Notify President Madagascar
    Have ideas to improve npm?Join in the discussion! »

    leaflet-search

    2.9.9 • Public • Published

    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

    Install

    npm install --save leaflet-search
    

    Options

    Option Default Description
    url '' url for search by ajax request, ex: "search.php?q={s}". Can be function to returns string for dynamic parameter setting
    layer null layer where search markers(is a L.LayerGroup)
    sourceData null function to fill _recordsCache, passed searching text by first param and callback in second
    jsonpParam null jsonp 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,
    formatData null callback for reformat all data from source to indexed data object
    filterData null callback for filtering data from text searched, params: textSearch, allRecords
    moveToLocation null callback run on location found, params: latlng, title, map
    buildTip null function to return row tip html node(or html string), receive text tooltip in first param
    container '' container id to insert Search Control
    zoom null default zoom level for move to location
    minLength 1 minimal text length for autocomplete
    initial true search elements only by initial text
    casesensitive false search elements in case sensitive text
    autoType true complete input with first suggested result and select this filled-in text.
    delayType 400 delay while typing for show tooltip
    tooltipLimit -1 limit max results to show in tooltip. -1 for no limit, 0 for no results
    tipAutoSubmit true auto map panTo when click on tooltip
    firstTipSubmit false auto select first result con enter click
    autoResize true autoresize on input change
    collapsed true collapse search control at startup
    autoCollapse false collapse search control after submit(on button or on tips if enabled tipAutoSubmit)
    autoCollapseTime 1200 delay for autoclosing alert and collapse after blur
    textErr 'Location not found' error message
    textCancel 'Cancel title in cancel button
    textPlaceholder 'Search' placeholder value
    hideMarkerOnCollapse false remove circle and marker on search control collapsed
    position 'topleft' position in the map
    marker {} custom L.Marker or false for hide
    marker.icon false custom L.Icon for maker location or false for hide
    marker.animate true animate a circle over location found
    marker.circle L.CircleMarker options draw a circle in location found

    Events

    Event Data Description
    '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

    Method Arguments Description
    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
    npx grunt

    Use Cases

    This list is intended to be of utility for all developers who are looking web mapping sample code to solve complex problems of integration with other systems using Leaflet Control Search.

    Anyone can add the link of your website

    (spamming urls will be automatically deleted)

    Install

    npm i leaflet-search

    DownloadsWeekly Downloads

    6,678

    Version

    2.9.9

    License

    MIT

    Unpacked Size

    5.07 MB

    Total Files

    57

    Last publish

    Collaborators

    • avatar