En este momento estás viendo Cómo agregar una Leyenda a un mapa con la API de Leaflet

Cómo agregar una Leyenda a un mapa con la API de Leaflet

  • Categoría de la entrada:Leaflet
  • Tiempo de lectura:5 minutos de lectura

Los mapas interactivos no solo deben mostrar información geográfica, sino también facilitar su comprensión. Uno de los elementos clave para lograrlo es la leyenda, ya que permite interpretar los símbolos, colores y estilos visuales usados en el mapa. Aquí te explico paso a paso como agregar elementos como puntos de interés, polilíneas y marcadores, e incorporar una leyenda personalizada que dé contexto. ¡Vamos a hacerlo!

1. Agregar un punto de interés

Un punto de interés (POI) es una ubicación representada por un marcador o punto en el mapa. En Leaflet lo puedes hacer así:

// Agregar un marcador
var marker_cerro = L.circleMarker(L.latLng(4.791132952755172, -73.99527784552215), {
    radius: 6,
    fillColor: "#ff0000",
    color: "blue",
    weight: 2,
    opacity: 1,
    fillOpacity: 0.6,
}).addTo(map);

L.circleMarker crea el marcador y addTo(map) lo agrega al mapa.

2. Agregar una polilínea

Las polilíneas son útiles para representar rutas, calles, ríos o límites.

// Agregar coordenadas para dibujar una polilinea
var coord_camino = [
    [4.798039528031478, -74.03124090388363],
    [4.79059838513191, -74.02832266048456],
    [4.786663954996014, -74.02806516841994],
    [4.784183541760121, -74.02832266048456],
    [4.781275459625073, -74.02703520016145],
    [4.777683105825763, -74.02617689327938],
    [4.7735878498196636, -74.02655897938767],
    [4.771834421730695, -74.02735291325358],
    [4.770316205986422, -74.02692375981255]
];

var camino = L.polyline(coord_camino, {
    color: 'red'
}).addTo(map);

L.polyline recibe un array de coordenadas y un objeto con propiedades de estilo. En este caso, color: 'red'.

📍 3. Agregar un marcador personalizado

Un marcador puede tener un ícono diferente o algún estilo adicional:

var customIcon = L.icon({
  iconUrl: 'icono.png',
  iconSize: [32, 32]
});

L.marker([4.61, -74.08], { icon: customIcon })
  .addTo(map)
  .bindPopup("Marcador con ícono personalizado");

Se define una imagen como ícono y se asigna al marcador con la opción { icon: customIcon }.

4. Agregar Leyenda

Una leyenda ayuda a interpretar los colores, símbolos o estilos del mapa. En Leaflet, la leyenda se puede crear como un control personalizado:

// Agregar la leyenda
const legend = L.control.Legend({
    position: "bottomright",
    collapsed: false,
    symbolWidth: 24,
    opacity:1,
    column:1,
    legends: [
        {
            label: "Cerro Guayabos",
            type: "circle",
            radius: 6,
            color: "blue",
            fillColor: "#FF0000",
            fillOpacity: 0.6,
            weight: 2,
            layers: [marker_cerro],
            inactive: false,
        }, {
            label: "Carrera Septima",
            type: "polyline",
            color: "#FF0000",
            fillColor: "#FF0000",
            weight: 2,
            layers: camino
        },  {
            label: "Barrios",
            type: "rectangle",
            color: "#0074f0",
            fillColor: "#009ff0",
            weight: 2,
            layers: barriosJS,barrios
        }, {
            label: "Marcador",
            type: "image",
            url: "Leaflet.Legend-master/examples/marker/purple.png"
        },{
            label: "Linea Punteada",
            type: "polyline",
            color: "#0000FF",
            fillColor: "#0000FF",
            dashArray: [5, 5],
            weight: 2
        }, {
            label: "Poligono",
            type: "polygon",
            sides: 5,
            color: "#FF0000",
            fillColor: "#FF0000",
            weight: 2
        }]
}).addTo(map);
  • Se crea un control (L.control) que se ubica en una esquina del mapa.
  • Luego se añade al mapa con leyenda.addTo(map).

Consejos:

  • Leaflet tiene una gran comunidad por lo que hay plugins para leyendas avanzadas si los necesitas.
  • Siempre revisa que tu HTML incluya el contenedor del mapa con su div correspondiente.
  • Puedes personalizar la leyenda con CSS para que tenga íconos, bordes, sombras, etc.

Puedes ver el video completo aquí:

Etiquetas: , , , ,