Package Exports

leaflet-search/dist/leaflet-search.src.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leaflet-search) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Leaflet.Control.Search

A leaflet control that search markers/features location by custom property.
With ajax/jsonp autocompletion and JSON fields filter/remap

Tested in Leaflet 0.7.2

#Where

Demo online:
labs.easyblog.it/maps/leaflet-search

Source code:
Github
Bitbucket
NPM
Atmosphere

#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

#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 markers

Short 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);
    }
}) );