Cómo añadir una leyenda en Leaflet

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

Ahora 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:

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í:

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

Este es el resultado:

resultado

Si te ha gustado esta entrada deja un comentario o compártela!

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos