Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including leaflet-search with all npm packages installed. Try it out:

var leafletSearch = require("leaflet-search")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

leaflet-search v2.9.0

Leaflet Control for searching markers/features by attribute on map or remote searching in jsonp/ajax

Leaflet Control Search

npm version

A Leaflet control that search markers/features location by custom property.
Support ajax/jsonp autocompletion and JSON data filter/remapping.

Licensed under the MIT license.

Copyright Stefano Cudini

Tested in Leaflet 0.7.x and 1.3.x

Image

Where

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

Source code:
Github NPM

Bug tracking:

Waffle.io

Websites that use Leaflet.Control.Search

Install

npm install --save leaflet-search

Options

OptionDefaultDescription
url''url for search by ajax request, ex: "search.php?q={s}". Can be function to returns string for dynamic parameter setting
layernulllayer where search markers(is a L.LayerGroup)
sourceDatanullfunction to fill _recordsCache, passed searching text by first param and callback in second
jsonpParamnulljsonp param name for search by jsonp service, ex: "callback"
propertyLoc'loc'field for remapping location, using array: ['latname','lonname'] for select double fields(ex. ['lat','lon'] ) support dotted format: 'prop.subprop.title'
propertyName'title'property in marker.options(or feature.properties for vector layer) trough filter elements in layer,
formatDatanullcallback for reformat all data from source to indexed data object
filterDatanullcallback for filtering data from text searched, params: textSearch, allRecords
moveToLocationnullcallback run on location found, params: latlng, title, map
buildTipnullfunction to return row tip html node(or html string), receive text tooltip in first param
container''container id to insert Search Control
zoomnulldefault zoom level for move to location
minLength1minimal text length for autocomplete
initialtruesearch elements only by initial text
casesensitivefalsesearch elements in case sensitive text
autoTypetruecomplete input with first suggested result and select this filled-in text.
delayType400delay while typing for show tooltip
tooltipLimit-1limit max results to show in tooltip. -1 for no limit, 0 for no results
tipAutoSubmittrueauto map panTo when click on tooltip
firstTipSubmitfalseauto select first result con enter click
autoResizetrueautoresize on input change
collapsedtruecollapse search control at startup
autoCollapsefalsecollapse search control after submit(on button or on tips if enabled tipAutoSubmit)
autoCollapseTime1200delay for autoclosing alert and collapse after blur
textErr'Location not found'error message
textCancel'Canceltitle in cancel button
textPlaceholder'Search'placeholder value
hideMarkerOnCollapsefalseremove circle and marker on search control collapsed
position'topleft'position in the map
marker{}custom L.Marker or false for hide
marker.iconfalsecustom L.Icon for maker location or false for hide
marker.animatetrueanimate a circle over location found
marker.circleL.CircleMarker optionsdraw a circle in location found

Events

EventDataDescription
'search:locationfound'{latlng, title, layer}fired after moved and show markerLocation
'search:expanded'{}fired after control was expanded
'search:collapsed'{}fired after control was collapsed

Methods

MethodArgumentsDescription
setLayer()L.LayerGroup()set layer search at runtime
showAlert()'Text message'show alert message
searchText()'Text searched'search text by external code

Examples

(require src/leaflet-search.css)

Adding the search control to the map:

var searchLayer = L.layerGroup().addTo(map);
//... adding data in searchLayer ...
map.addControl( new L.Control.Search({layer: searchLayer}) );
//searchLayer is a L.LayerGroup contains searched markers

Short way:

var searchLayer = L.geoJson().addTo(map);
//... adding data in searchLayer ...
L.map('map', { searchControl: {layer: searchLayer} });

AMD module:

require(["leaflet", "leafletSearch"],function(L, LeafletSearch) {

    //... initialize leaflet map and dataLayer ...

    map.addControl( new LeafletSearch({
        layer: dataLayer
    }) );
});

Build

Therefore the deployment require npm installed in your system.

npm install
grunt
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free