A Leaflet control that search markers/features location by custom property.
Support ajax/jsonp autocompletion and JSON data filter/remapping.
Copyright 2014 Stefano Cudini
Tested in Leaflet 0.7.2
#Where
Demo online:
labs.easyblog.it/maps/leaflet-search
Source code:
Github
Bitbucket
NPM
Atmosphere
Websites that use Leaflet Control Search
#Examples (require src/leaflet-search.css)
Adding the search control to the map:
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markersShort way:
var map = new L.Map('map', { searchControl: {layer: searchLayer} });#Advanced Examples
Ajax request to search.php for retrieve elements locations:
map.addControl( new L.Control.Search({url: 'search.php?q={s}'}) );Request to third party JSONP service, implements Geocode Searching using OSM API:
map.addControl( new L.Control.Search({
url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
jsonpParam: 'json_callback',
propertyName: 'display_name',
propertyLoc: ['lat','lon']
}) );Search and color features vector in GeoJSON layer:
var searchControl = new L.Control.Search({layer: geojsonLayer, circleLocation:false});
searchControl.on('search_locationfound', function(e) {
e.layer.setStyle({fillColor: '#3f0'});
}).on('search_collapsed', function(e) {
featuresLayer.eachLayer(function(layer) {
featuresLayer.resetStyle(layer);
});
});
map.addControl(searchControl);Static data source:
var data = [
{"loc":[41.575330,13.102411], "title":"aquamarine"},
{"loc":[41.575730,13.002411], "title":"black"},
{"loc":[41.219190,13.062145], "title":"cyan"}
];
map.addControl(new L.Control.Search({
markerLocation: true,
callData: function(text, callResponse) {
//here can use custom criteria or merge data from multiple layers
callResponse(data);
return { //called to stop previous requests on map move
abort: function() {
console.log('aborted request:'+ text);
}
};
}
}) );
#Build
Since Version 1.4.7 this plugin support Grunt for building process. Therefore the deployment require NPM installed in your system. After you've made sure to have npm working, run this in command line:
npm install
grunt
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent