Interactive HTML5 Map (Leaflet, standalone)
Open BetaCanvas-HTML est un fichier HTML5 interactif et autonome contenant une carte Leaflet.js. Toutes les données de la zone choisie sont intégrées au fichier en GeoJSON, directement dans le JavaScript : la page s'ouvre donc dans n'importe quel navigateur, sans serveur et sans décompression — un double-clic sur le .html suffit. La carte gère le zoom et le déplacement, un sélecteur de visibilité des couches, des info-bulles au clic affichant les attributs d'un objet et un habillage de base par couche (routes en gris, bâtiments en orange, eau en bleu, végétation en vert). Le fond de carte OpenStreetMap et la bibliothèque Leaflet elle-même se chargent depuis un CDN : les tuiles de fond exigent donc Internet, tandis que les couches GeoJSON intégrées fonctionnent hors connexion.
Caractéristiques principales
À propos du format HTML5 Map
Canvas-HTML, c'est une carte interactive prête à l'emploi, entièrement empaquetée dans un seul fichier HTML. À l'intérieur : la bibliothèque Leaflet et les données de la zone choisie sous forme de GeoJSON, directement dans le code de la page — le fichier s'ouvre donc d'un double-clic dans n'importe quel navigateur, sans serveur ni installation de logiciel.
On choisit ce format quand la carte doit être montrée à quelqu'un, et non traitée : l'envoyer au client, la joindre à un rapport, la déposer sur un wiki interne, montrer un export à un collègue qui n'a pas de SIG. La personne en face ouvre simplement le fichier et travaille avec la carte — elle la déplace, zoome, clique sur les objets.
La carte offre le zoom et le déplacement, un sélecteur de couches et des info-bulles au clic avec les attributs de l'objet ; les couches sont colorées par type — routes, bâtiments, eau, végétation, occupation du sol. La caméra se cale d'emblée sur les limites de la zone choisie. On prend jusqu'à 50 000 objets par couche pour que la page reste réactive.
Une réserve au sujet d'Internet : les données elles-mêmes sont intégrées au fichier et fonctionnent hors connexion, tandis que la bibliothèque Leaflet et le fond de carte OpenStreetMap se chargent depuis le réseau — sans accès à Internet, il ne restera que les couches vectorielles sur un fond vide.
Logiciels pour ouvrir les fichiers HTML5 Map
Les programmes suivants peuvent ouvrir, modifier et traiter les fichiers Interactive HTML5 Map (Leaflet, standalone) (.html) exportés depuis OSM2CDR :
Caractéristiques du format
- Standard ouvert
- 2D uniquement
- Sans perte de qualité
- Stocke les attributs
- Sortie : 1 fichier
- A single standalone .html with the area's GeoJSON embedded inline; Leaflet and the basemap tiles load from a CDN, so the background needs internet.
Qui utilise les cartes HTML5 Map
Comment exporter en HTML5 Map
Comment ouvrir après l’export
- Navigateur — ouvrez le fichier d'un double-clic ; Chrome, Firefox, Edge et Safari conviennent, rien à installer.
- Envoi à un collègue — le fichier est autonome, mais pour une grande zone il pèse des dizaines de mégaoctets : la messagerie bloque souvent ce genre de pièce jointe, un lien vers le cloud est plus sûr.
- Publication sur un site — déposez le .html sur l'hébergement et intégrez-le dans la page par une balise iframe ; aucun back-end nécessaire.
- Modifier l'habillage — c'est du HTML ordinaire avec du JavaScript : dans un éditeur de texte, on change les couleurs des couches, le titre et l'adresse du fond de carte.
- Présentation sans Internet — vérifiez à l'avance : les couches intégrées s'afficheront, mais les tuiles de fond et Leaflet servi depuis un CDN ne se chargeront pas.
Cartes populaires en HTML5 Map
Export de cartes en Interactive HTML5 Map (Leaflet, standalone)
Téléchargez des cartes HTML5 Map professionnelles depuis OpenStreetMap. Génération instantanée, n’importe quelle zone.