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:
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).
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:
3. A continuación nos descargamos el plugin haciendo clic sobre el botón Download ZIP:
4. Descomprimimos el archivo y lo colocamos en el directorio en el que se encuentre nuestro HTML.
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 © <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 de web mapping interactivo con Leaflet.
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.
Hola
Aurelio:
como puedo hacer este mismo ejemplo en fusion tlabe
gracias
Buena pregunta Raymundo,
En la documentación de la API JavaScript de Google Maps pues haber algún ejemplo, yo solo he encontrado esto: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=es Saludos!
Gracias
estare googleando saludos
Hola Aurelio como puedo juntar este ejemplo con con el ejemplo: Incluir una leyenda 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 mapavar legend = L.control({position: 'bottomright'});
...
...
legend.addTo(map);
Saludos!