Interactive HTML5 Map (Leaflet, standalone)
Precio antes del pagoCanvas-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.
Datos de OpenStreetMap al 26 de octubre de 2026 · hace 7 días
Características principales
Todos los ejemplos de mapas por formato
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:
Características del formato
- Estándar abierto
- Solo 2D
- Sin pérdida de calidad
- Guarda los atributos de los objetos
- Resultado: 1 archivo
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. Cualquier área, con el precio visible antes de pagar.