01
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.
🌍
Toute côte mondiale
Fonctionne partout où OSM cartographie un trait de côte.
🔍
Géocodage intégré
Saisie du nom d'une ville ou d'un port — Nominatim résout les coordonnées.
🗂
Format MBTiles
Fichier SQLite standard, compatible QGIS, TileServer GL, OsmAnd…
👁
Visualiseur intégré
Navigation le long du trait de côte directement dans l'application.
⚙️
Paramètres flexibles
Buffer 100–2000 m, zooms 13 à 19, source IGN ou OSM.
📴
PWA installable
Installable sur mobile et desktop, cache applicatif hors-ligne.
02
Flux de travail
1
Extrémités
Nom ou coordonnées
2
Trait de côte
Overpass OSM
3
Paramètres
Buffer · Zooms
4
Téléchargement
Tuiles IGN / OSM
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).
03
① 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.
💡
Nominatim est limité à 1 requête par seconde.
Pour des noms ambigus, ajoutez le pays : « Dieppe, France »
plutôt que « Dieppe » seul.
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.
⚠️
Les longitudes à l'ouest de Greenwich sont négatives.
En France métropolitaine, toutes les longitudes sont positives
sauf la pointe du Cotentin et la Bretagne occidentale.
04
② 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 Overpass
L'API Overpass est interrogée sur la bounding box
des deux points (élargie de 15 % de chaque côté).
La balise OSM natural=coastline est utilisée —
elle couvre l'ensemble du trait de côte mondial cartographié dans OSM.
-
Assemblage et chaînage
Les 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 clip
L'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.
05
③ 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.
📐
Estimation indicative : ~25 Ko par tuile JPEG
(BD ORTHO IGN). Pour 5 000 tuiles → environ 125 Mo.
Vérifiez la taille estimée avant de lancer le téléchargement.
06
④ 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.
⚠️
Les tuiles sont conservées uniquement en mémoire vive
pendant la session. Fermez l'onglet ou rechargez la page et
tout est perdu — exportez le fichier MBTiles avant de quitter.
07
⑤ 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.mbtiles
Structure 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;
🔄
L'axe Y est inversé lors de l'écriture MBTiles
(convention TMS : 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.
08
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.
09
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-mbtiles ou TileServer GL
plugin
-
Leaflet
Plugin
leaflet-mbtiles
plugin
-
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
10
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.
🔒
Le Service Worker et les fonctions PWA nécessitent
HTTPS — GitHub Pages le fournit nativement.
En local, utilisez localhost ou un proxy HTTPS.
11
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 |
