Interactive HTML5 Map (Leaflet, standalone)
Open BetaCanvas-HTML es un archivo HTML5 interactivo y autocontenido con un mapa de Leaflet.js. Todos los datos del área elegida van incrustados en el archivo como GeoJSON dentro del propio JavaScript, así que la página se abre en cualquier navegador sin servidor y sin descomprimir nada: basta con hacer doble clic en el .html. El mapa admite zoom y desplazamiento, un conmutador de visibilidad de capas, ventanas emergentes al hacer clic con los atributos del objeto y un estilo básico por capa (carreteras en gris, edificios en naranja, agua en azul, zonas verdes en verde). El mapa base de OpenStreetMap y la propia biblioteca Leaflet se cargan desde una CDN, de modo que las teselas de fondo necesitan internet; las capas GeoJSON incrustadas funcionan sin conexión.
Características principales
Acerca del formato HTML5 Map
Canvas-HTML es un mapa interactivo listo para usar, empaquetado por completo en un único archivo HTML. Dentro están la biblioteca Leaflet y los datos del área elegida en forma de GeoJSON, directamente en el código de la página, así que el archivo se abre con doble clic en cualquier navegador: no hace falta ni servidor ni instalar programas.
Se elige este formato cuando el mapa hay que enseñárselo a alguien, no procesarlo: enviarlo a un cliente, adjuntarlo a un informe, colgarlo en la wiki interna o mostrarle la exportación a un compañero que no tiene SIG. La persona del otro lado simplemente abre el archivo y trabaja con el mapa: lo desplaza, lo acerca, hace clic en los objetos.
El mapa tiene zoom y desplazamiento, conmutador de capas y ventanas emergentes con los atributos del objeto al hacer clic; las capas están coloreadas por tipo: carreteras, edificios, agua, zonas verdes y usos del suelo. La cámara se encuadra de inmediato en los límites del área elegida. Por capa se toman hasta 50 000 objetos, para que la página siga respondiendo con soltura.
Una salvedad sobre internet: los datos en sí van incrustados en el archivo y funcionan sin conexión, pero la biblioteca Leaflet y el mapa base de OpenStreetMap se descargan de la red — sin acceso a internet quedarán solo las capas vectoriales sobre un fondo vacío.
Programas para abrir archivos HTML5 Map
Los siguientes programas y aplicaciones pueden abrir, editar y procesar archivos Interactive HTML5 Map (Leaflet, standalone) (.html) exportados desde OSM2CDR:
Format specifications
- Open standard
- 2D only
- Lossless (no quality loss)
- Stores feature attributes
- Output: 1 file
- 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én usa los mapas HTML5 Map
Cómo exportar a HTML5 Map
Cómo abrir tras la exportación
- Navegador — abra el archivo con doble clic; funciona en Chrome, Firefox, Edge y Safari, sin instalar nada más.
- Envío a un compañero — el archivo es autosuficiente, pero para un área grande pesa decenas de megabytes: el correo suele cortar eso, así que es más seguro un enlace a la nube.
- Publicación en un sitio web — suba el .html al alojamiento e incrústelo en la página con una etiqueta iframe; no hace falta backend.
- Cambios de apariencia — es HTML corriente con JavaScript: en un editor de texto se cambian los colores de las capas, el título y la dirección del mapa base.
- Presentación sin internet — compruébelo antes: las capas incrustadas se dibujarán, pero las teselas de fondo y Leaflet desde la CDN no se cargarán.
Mapas populares en HTML5 Map
Exportar mapas a Interactive HTML5 Map (Leaflet, standalone)
Descarga mapas HTML5 Map profesionales desde OpenStreetMap. Generación instantánea, cualquier área.