Cómo insertar un control de búsqueda en Leaflet

Cómo insertar un control de búsqueda en Leaflet

Leaflet es una librería JavaScript open source para crear mapas interactivos. Es sencillo y rápido de aprender y tiene una  API bien documentada.

Uno de los aspectos clave de Leaflet es que ofrece un código base sobre el que se pueden desarrollar complementos para hacer una aplicación más potente.

Una vez que hemos visto cómo crear un mapa web con Leaflet, podemos implementar nuevas funcionalidades mediante el uso de plugins, en esta entrada te recomendamos algunos de los mejores, para hacer una aplicación más potente.

Para este tutorial, partimos del mapa web que creamos en el artículo «Cómo crear un mapa web en Leaflet a partir de un GeoJSON«, puesto que en aquella entrada explicábamos cómo convertir una capa en formato shapefile en un archivo GeoJSON, lo añadimos a nuestro visor y le dimos un poco de color a cada uno de nuestros países, en función de su población:

Visor web con capas geojson

Leaflet Control Search – Control de búsqueda en Leaflet

Vamos a continuar proporcionando más interactividad a nuestro visor web. Incorporaremos un control que realice una búsqueda en uno de los campos de los atributos de una capa (en formato GeoJSON).

búsqueda en Leaflet
Se paciente, el visor interactivo con el control de búsqueda está más abajo

1. Ve a la página de plugins de Leaflet: http://leafletjs.com/plugins.html

2. En la Sección: Overlay interaction > Search & popups y pincha sobre Leaflet Search. Este es el plugin para añadir las capas de Google en Leaflet:

leaflet Search

3. A continuación nos descargamos el plugin haciendo clic sobre el botón Download ZIP:
download ZIP

4. Descomprimimos el archivo y lo colocamos en el directorio en el que se encuentre nuestro HTML.

leaflet search descomprimido

5. Debajo del script que añade la capa countries.js, añadiremos la librería JavaScript y la hoja de estilos CSS en la cabecera del HTML:

6. Creamos una variable denominada countriesJS para meter en ella la capa de países que tenemos en formato GeoJSON (en un archivo externo):

7. A continuación creamos una nueva variable, denominada searchControl, que contendrá el control de búsqueda, que se implementa a través de la clase L.Control.Search :

8. En el código superior vemos como las propiedades de la clase L.Control.Search son layer y property name, en las que incluiremos respectivamente la capa sobre la que queremos realizar la búsqueda (countriesJS), y el campo que contendrá el texto a buscar (name).

La opción de mostrar la localización mediante una circunferencia (circleLocation) viene por defecto como true. Esto es útil si trabajamos con una capa de puntos, pero en una capa de polígonos, lo interesante es resaltar el polígono con otro color. Por lo tanto modificamos el código para eliminar esta circunferencia (circleLocation: false).

9. E inmediatamente después y antes de añadir el control al mapa, crearemos una función para definir el estilo del objeto geográfico resultado de la búsqueda:

10. Por último añadimos el control al mapa:

Listo. Esta es la manera más simple de añadir el control de búsqueda de atributos en una capa geoJSON.

Haz clic en el nuevo botón con forma de lupa, e introduce el nombre de un país en el campo de búsqueda:

Aquí tienes el HTML completo:

Más ejemplos de uso:

http://labs.easyblog.it/maps/leaflet-search/

Quizá también te interese saber cómo…

Si quieres aprender a hacer más cosas como estas, apúntate ya a nuestro curso online visores webmapping con Leaflet.

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

5 comentarios en “Cómo insertar un control de búsqueda en Leaflet”

    • Hola Daniel,

      Puedes unir los bloques de código con ambos controles. Sobre la base de código de este ejemplo, en la línea 94, añades el control de la leyenda:

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

      Saludos!

Los comentarios están cerrados.