Aprende las etiquetas y funciones clave para construir tu mapa web aunque no sepas programar

Introducción

Si trabajas en GIS y quieres mostrar datos en la web, no necesitas aprender todo HTML o JavaScript: aquí tienes las etiquetas y comandos que más usarás para crear mapas interactivos con herramientas como Leaflet o Mapbox.

✔ HTML para mapas

¿Qué es?

Piensa en HTML como el plano arquitectónico de una casa.

Define qué cosas hay (paredes, puertas, ventanas) pero no su color o estilo.
En una página web, son elementos como títulos, párrafos, imágenes y en nuestro caso es el espacio donde va el mapa.

📌 Ejemplo:

Cuando dices <div id="map"></div>, estás diciendo:

“Aquí voy a poner un espacio para mi mapa”.

Aún no se ve bonito, pero el lugar ya está reservado.

Las etiquetas HTML más usadas

Etiqueta	Uso en mapas	Ejemplo
`<div>`	Contenedor del mapa y paneles.	`<div id="map"></div>`
`<link>`	Enlazar CSS de librerías como Leaflet.	`<link rel="stylesheet" href="leaflet.css"/>`
`<script>`	Cargar JavaScript (librerías y tu código).	`<script src="leaflet.js"></script>`
`<style>`	CSS rápido para darle tamaño al mapa.	`<style>#map {height: 500px;}</style>`
`<h1>`, `<p>`	Títulos y textos.	`<h1>Mapa de colegios</h1>`
`<select>`	Crear menús desplegables (por ejemplo para cambiar capas).	`<select id="capas"><option value="osm">OSM</option></select>`
`<button>`	Botones para acciones (por ejemplo para centrar mapa, añadir marcador).	`<button id="centrar">Centrar mapa</button>`

💡Siempre el id en <div>, <select> o <button> es clave para que puedas manipularlos desde JavaScript.