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:

<script src="leaflet-search-master\src\leaflet-search.js"></script>
<link rel="stylesheet" href="leaflet-search-master\src\leaflet-search.css" />

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

var countriesJS = L.geoJson(countries, {
       onEachFeature: popup,
       style: style
}).addTo(map);

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 :

var searchControl = new L.Control.Search({
       layer: countriesJS,
       propertyName: 'NAME',
       circleLocation: false
});

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:

searchControl.on('search_locationfound', function(e) {
       e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
})

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

map.addControl(searchControl);

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:

<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
	<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
	 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
	 <script type="text/javascript" src="countries.js"></script>
	 <script src="leaflet-search-master\src\leaflet-search.js"></script>
	 <link rel="stylesheet" href="leaflet-search-master\src\leaflet-search.css" />

 <style>
  #map { 
	  width: 100%;
	  height: 600px;
	  box-shadow: 5px 5px 5px #888;
  }
 </style>
 
 </head>
  <body>
   <div id="map"></div>
 <script>
 
	var map = L.map('map', {
		center: [41.66, -4.72],
		zoom: 4
	});
	
	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
				'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="http://mapbox.com">Mapbox</a>',
			id: 'mapbox.light'
		}).addTo(map);
		

	var countryStyle = {
		'color': "#858585",
		'weight': 2,
		'opacity': 0.6
	};
	
	function getColor(d) {
	return d > 100000000 ? '#800026' :
	d > 50000000 ? '#BD0026' :
	d > 20000000 ? '#E31A1C' :
	d > 10000000 ? '#FC4E2A' :
	d > 5000000 ? '#FD8D3C' :
	d > 2000000 ? '#FEB24C' :
	d > 1000000 ? '#FED976' :
	'#FFEDA0';
	}
	for(var i in countries.features)
	countries.features[i].properties.color = getColor( countries.features[i].properties.pop_est );
	
	function popup(feature, layer) {
		if (feature.properties && feature.properties.name) {
			layer.bindPopup(feature.properties.name);
		}
	}
	
	function style(feature) {
		return { fillColor: getColor(feature.properties.pop_est),
		weight: 2,
		opacity: 1,
		color: 'white',
		dashArray: '3',
		fillOpacity: 0.7
		};
	}
		
	var countriesJS = L.geoJson(countries, {
			onEachFeature: popup,
			style: style
		}).addTo(map);

	var searchControl = new L.Control.Search({
		layer: countriesJS, 
		propertyName: 'name',
		circleLocation: false
	});

	searchControl.on('search_locationfound', function(e) {
		e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
	})
	.on('search_collapsed', function(e) {
		countriesJS.eachLayer(function(layer) { //restauramos el color del elemento
			countriesJS.resetStyle(layer);
		});	
	});
	
	map.addControl(searchControl);

 </script>
 </body> 
 </html>

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 nuestra newsletter y te enviaremos nuestra propuesta con las mejores
Soluciones GIS basadas en software libre

Tan solo 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.