Cómo añadir una leyenda en Leaflet

por

En esta entrada vamos a añadir una bonita leyenda en una mapa web realizado con Leaflet.

Una vez que ya sabes cómo crear un sencillo mapa con Leaflet , incorporar una capa en formato geoJSON e incluso añadir las capas de Google, ahora vamos a incluir una leyenda.

Hay muchas formas de incluir leyendas, esta que os proponemos es una de las más sencillas, ya que incorpora un control con una imagen estática. Pero si tenemos un estilo CSS o SLD creado en GeoServer es posible incluir esta leyenda extraída del estilo SLD. De esta manera si se modifica el estilo de la capa, la leyenda se actualizará también.

Esta es la parte de código que tenemos que incluir en nuestro script:

// Insertando una leyenda en el mapa
 var legend = L.control({position: 'bottomright'}); 
 legend.onAdd = function (map) 
{ var div = L.DomUtil.create('div', 'info legend'); 
   div.innerHTML += '<img alt="legend" src=" leyenda.png " width="127" height="120" />'; 
}; 
legend.addTo(map);

Ahora damos un paso más: en lugar de apuntar a un archivo PNG estático, podemos utilizar la respuesta del servicio de GeoServer GetLegendGraphic, que puede devolver la leyenda de una capa dada como un archivo PNG, por ejemplo:

http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=usa:states

Si introduces esta url en el navegador aparecerá la leyenda

leyenda
Con lo que el código final quedaría así:

// Insertando una leyenda en el mapa 
var legend = L.control({position: 'bottomright'}); 

legend.onAdd = function (map) { 
var div = L.DomUtil.create('div', 'info legend'); 
div.innerHTML += '<img alt="legend" src=" http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=usa:states" width="127" height="120" />'; 
}; 
legend.addTo(map);

Por último, si se desea se puede modificar el estilo de nuestra leyenda mediante CSS:

.legend { 
  opacity: 0.7; 
}

Este es el resultado:

resultado

Si te ha gustado esta entrada compártela!