Visualisation et sauvegarde de la BDortho du littoral
litto2mbtiles
Application web progressive d'extraction de tuiles orthophoto le long d'un tronçon littoral quelconque, avec export au format MBTiles.
Présentation
litto2mbtiles est une PWA (Progressive Web App) qui permet
d'extraire et de télécharger les tuiles d'orthophotographie aérienne
couvrant la bande littorale entre deux points quelconques,
puis de les conditionner dans un fichier .mbtiles
utilisable hors-ligne dans d'autres applications cartographiques.
Elle ne nécessite aucune installation, aucun serveur back-end, et fonctionne entièrement dans le navigateur. Le trait de côte est récupéré dynamiquement depuis OpenStreetMap via l'API Overpass.
Flux de travail
Chaque étape s'effectue dans l'onglet Extraire. La carte de prévisualisation (fond IGN Plan) affiche en temps réel le trait de côte (orange) et la bande buffer (teal), avec les marqueurs de départ (vert) et d'arrivée (rouge).
① Définir les extrémités
Deux modes de saisie sont disponibles, sélectionnables via le bouton bascule en haut de la barre latérale.
Par nom de lieu
Saisissez le nom d'une ville, d'un port ou d'un cap dans chacun des
deux champs, puis appuyez sur Entrée ou cliquez sur
la flèche →. Le service Nominatim (OpenStreetMap) résout
le nom en coordonnées géographiques, affichées sous le champ.
Par coordonnées décimales
Basculez en mode Par coordonnées et saisissez
la longitude et la latitude en degrés décimaux (WGS84).
Exemple pour le Cap de la Hève : longitude 0.0712,
latitude 49.5147.
② Charger le trait de côte
Une fois les deux extrémités définies, le bouton Charger le trait de côte (OSM) devient actif. Un clic déclenche trois opérations automatiques :
-
Requête OverpassL'API Overpass est interrogée sur la bounding box des deux points (élargie de 15 % de chaque côté). La balise OSM
natural=coastlineest utilisée — elle couvre l'ensemble du trait de côte mondial cartographié dans OSM. -
Assemblage et chaînageLes segments retournés (souvent plusieurs dizaines) sont chaînés par un algorithme glouton qui raccorde les extrémités les plus proches (tolérance 5 m). Le segment le plus long est retenu.
-
Simplification et clipL'algorithme Douglas-Peucker simplifie la polyligne à une précision de 80 m, puis le résultat est clippé aux deux points les plus proches des extrémités saisies. La longueur finale du tronçon est affichée dans les statistiques.
Le trait de côte apparaît en orange sur la carte de prévisualisation. Si le résultat semble incorrect (gap dans le trait, segment manquant), cela indique une lacune dans la cartographie OSM de la zone.
③ Configurer les paramètres
| Paramètre | Valeur par défaut | Description |
|---|---|---|
| Source ortho | IGN |
IGN : BD ORTHO 20 cm via la Géoplateforme IGN
(data.geopf.fr), France uniquement, accès libre.OSM : tuiles OpenStreetMap ( tile.openstreetmap.org), couverture mondiale,
résolution moindre.
|
| Buffer latéral | 200 m |
Largeur de la bande de part et d'autre du trait de côte. Choix : 100 m, 200 m, 500 m, ou valeur libre (50–2000 m). Un buffer plus large augmente fortement le nombre de tuiles aux zooms élevés. |
| Zoom minimum | 15 |
Niveau de zoom le moins détaillé à inclure. Le zoom 15 correspond à environ 5 m/pixel. Descendre à 13–14 ajoute peu de tuiles (chacun représente une surface 4× plus grande). |
| Zoom maximum | 17 |
Niveau de détail maximal. Chaque niveau supplémentaire quadruple le nombre de tuiles. Le zoom 17 (~1,2 m/pixel) est un bon compromis. Le zoom 19 (~0,3 m/pixel) convient aux relevés fins mais génère des fichiers très volumineux. |
Cliquez ensuite sur Calculer les tuiles pour afficher les statistiques par niveau de zoom, le nombre total et la taille estimée du fichier final.
④ Télécharger les tuiles
Le bouton Télécharger les tuiles lance le téléchargement en parallèle (3 connexions simultanées). Une sonde préalable vérifie la disponibilité du serveur IGN et détecte d'éventuels blocages CORS.
Indicateurs de progression
La barre de progression et le journal affichent en temps réel : le nombre de tuiles reçues, les tuiles absentes (404 — zones non couvertes, normal), et les erreurs réseau.
Gestion des erreurs réseau
Chaque tuile en erreur est retentée jusqu'à 5 fois avec un
délai exponentiel (1,2 s, 2,4 s, 4,8 s…). Les codes
429 (rate-limit) et 503 déclenchent
automatiquement ce mécanisme d'attente.
Interruption
Le bouton Interrompre arrête proprement le téléchargement. Les tuiles déjà reçues restent en mémoire et peuvent être exportées.
⑤ Exporter en MBTiles
Le bouton Exporter en MBTiles génère un fichier SQLite conforme à la spécification MBTiles 1.3. La génération s'effectue entièrement dans le navigateur via sql.js (SQLite compilé en WebAssembly).
Nommage automatique
Le fichier est nommé automatiquement d'après les deux extrémités et les niveaux de zoom, par exemple :
litto2mbtiles_Le_Havre_Etretat_z15-17.mbtilesStructure du fichier MBTiles
-- Table métadonnées SELECT * FROM metadata; -- name, description, format, bounds, center, minzoom, maxzoom -- Table tuiles (convention TMS — Y inversé) SELECT zoom_level, tile_column, tile_row, tile_data FROM tiles WHERE zoom_level = 16 LIMIT 5;
y_tms = 2^z − 1 − y_xyz).
Les tuiles sont téléchargées et stockées en mémoire en convention
XYZ standard, l'inversion n'intervient qu'à l'export.
Visualiseur intégré
L'onglet Visualiser (ou le bouton
Ouvrir dans le visualiseur) affiche les tuiles
téléchargées sur une carte interactive MapLibre GL.
Les tuiles sont servies depuis la mémoire vive via un
protocole personnalisé (litto2://) sans
aucune requête réseau supplémentaire.
Navigation le long du trait de côte
La barre du bas propose quatre boutons de navigation et un curseur continu :
| Contrôle | Action |
|---|---|
| ⏮ Début | Sauter au point de départ |
| ◀ Précédent | Waypoint précédent (−1 km) |
| ▶ Suivant | Waypoint suivant (+1 km) |
| ⏭ Fin | Sauter au point d'arrivée |
| Curseur | Position libre le long du tronçon |
La carte se centre automatiquement sur chaque waypoint
au zoom zMax − 1 avec une transition animée.
Utiliser le fichier MBTiles
Le fichier .mbtiles généré est un SQLite standard
compatible avec de nombreux outils :
- QGIS Couche → Ajouter → Raster → sélectionner le .mbtiles ✓ natif
-
TileServer GL
tileserver-gl fichier.mbtiles— serveur local HTTP ✓ natif -
MapLibre GL JS
Via plugin
maplibre-gl-mbtilesou TileServer GL plugin -
Leaflet
Plugin
leaflet-mbtilesplugin - OsmAnd Import direct en tant que carte hors-ligne ✓ natif
-
MB-Util
Convertit en dossier
{z}/{x}/{y}.jpg✓ natif - GeoServer Module GWC — publication en flux WMTS module
Déploiement
L'application est déployée sur GitHub Pages à l'adresse :
https://BernardHoyez.github.io/PWA/litto2mbtiles/
La structure de fichiers attendue dans le dépôt est :
PWA/
└── litto2mbtiles/
├── index.html
├── app.js
├── style.css
├── sw.js # Service Worker (cache app shell)
├── manifest.json # Manifeste PWA
└── icons/
├── icon192.png
└── icon512.png
Installation comme PWA
Sur mobile (Android/iOS) et desktop (Chrome/Edge), le navigateur propose d'installer l'application via le menu ou une bannière. Une fois installée, elle se comporte comme une application native avec accès hors-ligne au cache applicatif.
localhost ou un proxy HTTPS.
Limites & conseils pratiques
Mémoire navigateur
Les tuiles sont stockées en RAM. Pour de grandes zones (zoom 17–18 sur plusieurs dizaines de km), la consommation mémoire peut dépasser 500 Mo. Préférez un navigateur desktop et fermez les autres onglets.
Qualité du trait de côte OSM
La précision du résultat dépend de la cartographie OSM locale. En France métropolitaine la couverture est excellente. Dans d'autres régions, des lacunes peuvent apparaître (trait discontinu, segments en mer).
Couverture BD ORTHO IGN
La BD ORTHO IGN couvre uniquement la France métropolitaine et les DOM. Pour les côtes étrangères, utilisez la source OSM dans les paramètres. La résolution 20 cm est disponible aux zooms 17–19 ; aux zooms inférieurs, la résolution effective est moindre.
Conditions d'utilisation
BD ORTHO IGN via Géoplateforme : licence ouverte Étalab 2.0, usage libre y compris commercial. Tuiles OSM : licence ODbL — attribution OpenStreetMap requise.
Taille estimée des fichiers
| Tronçon | Buffer | Zooms | Tuiles est. | Taille est. |
|---|---|---|---|---|
| 30 km | 200 m | 15–17 | ~7 000 | ~175 Mo |
| 30 km | 200 m | 15–16 | ~1 800 | ~45 Mo |
| 30 km | 500 m | 15–17 | ~18 000 | ~450 Mo |
| 10 km | 200 m | 15–18 | ~9 000 | ~225 Mo |
Commentaires