stefanocudini/leaflet-search

Search stuff in a Leaflet map

Leaflet Control Search

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

If this project helped your work help me to keep this alive by Paypal DONATION ❤

Tested in Leaflet 0.7.x and 1.3.x

Where

Demo: opengeo.tech/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)

• demography colorado.gov
• NMEA Generator
• Guihuayun maps
• Pouemes
• Folium
• OpenTopoMap
• Falesia.it
• Leaflet Control Search (Official demos)
• Parkowanie Gliwice
• Agenziauscite.Openstreetmap.it
• Modern Leaflet Toolbar
• UnGiro.it
• OpenBeerMap
• Spatial statistics for the city of Tampere, Finland
• BALIMIO Bali photo guide
• Flask Admin
• LIVE-Map LiF:YO
• OpenTrailMap
• Rutas Morelia
• EDSM - Galactic Map
• The area of effect of the "MOAB" bomb in Afghanistan
• Ipyleaflet
• Craft Ottawa
• Sea Florida Change

leaflet-search's Issues

onLayerAddRemove causing Layer to be added involuntarily

Hello Stefano,

I am using leaflet-search with a L.GeoJson layer. I use the featureCreate and pointToLayerCreate functions with the addData method for my GeoJson layer to enrich each of my datapoints when they are added to the layer. However each marker created gets added to a specific L.FeatureGroup layer and the GeoJson layer does NOT get added to the map -- but I DO use it as the search layer for L.Control.Search .

My problem is that L.Control.Search is automatically adding my GeoJson layer when the onLayerAddRemove function is called by L.Control.Search , which I believe happens whenever a FeatueGroup layer is added to the map. This is a problem for me...

I was able to put a bandaid on the problem by commenting out use of onLayerAddRemove but this obviously isn't a real fix. Is there something different I can be doing to avoid this problem or some other way to fix what's going on?

Thanks

Can this control and search results container be used outside of the leaflet map

Is there an example perhaps of utilizing this plugin as a separate UI for searching and selecting results from that of the map control?

custom width

hi,

I want to give custom width (etc: 50%) to search box. Is it possible?

Resize max width when map is resized

method: _handleAutoresize() now not resize max search box width when map is resized

Case Insensitive Searching

Hello,

I've noticed that if the casing of what you type in the search box doesn't match the casing of the search tag, you will still get a correct auto-complete suggestions, but pressing "enter" will say no results found.

Is there a way to create a search property like "Music" and then be able to type "music" into the search box, hit the enter key, and locate the marker?

Thanks!

Search in more than 1 layer?

Hello Stefano,
first of all, great plugin, thanks a lot for that!
2 quick questions:
A)
Is it possible to search in more than 1 layer at once?
I have several geoJsonLayers and I'd like to search all of them (for the same propertyName)
something like: var searchControl = new L.Control.Search({layer: markers1, markers2, …

B)
I set circleLocation:true, but the circle always only shows up on the 2nd search request, never on the first search… how come?

thanks in advance, best, Julia

circleLocation: false

you can see at http://silentt.fr/parkdar/

map.addControl( new L.Control.Search({
...
circleLocation: false,
animateLocation: false,
markerLocation: false,
...
}) );

so when i click on result the circle is here

Static Data / GeoJSON Search Not Working

I was having trouble getting Leaflet-search to work correctly with static data or GeoJSON files, as in these examples:

http://labs.easyblog.it/maps/leaflet-search/examples/calldata.html
http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html

...but I just noticed that the examples actually aren't working either.

For the static data example, using callData, typing in any search term brings up the full list of values without matching your text to the correct item.

For the GeoJSON example, the 'spinner' animation appears but no matches are ever found. If you type 'enter' on a search term that should match (like 'Alabama'), it says "Location not found."

Accessibility issue

I have notice that your search tool is missing a default label element for the text input box which is an accessibility issue as all controls and media elements should have labels even if they are not always visible.

Possibility to change url search

for my use, when the user select on dropdown value
change the url to execute
like
VALUE1
q={s}&type=VALUE1
search.seturl('search.php?q={s}&type=' + checked);
ect

var search = map.addControl( new L.Control.Search({
url: 'search.php?q={s}&type=default',
propertyName: 'name',
propertyLoc: ['lat','lng'],
}) );

function choice() { var checked = document.getElementById("check").value; search.seturl('search.php?q={s}&type=' + checked); }

conflict with leaflet-fullscreen

when in full screen i cannot type into the search box anymore... Please advise

https://github.com/brunob/leaflet.fullscreen

javascript error when using in Local simple.htm for leflet search

Hello your simple sample works good on your website , but if I download your package I have 2 java script errors

Reference error L is not defined ( in leafletserch.js) i.e. ( L.controlsearch = l.control.extent)

Reference error L is not defined in simple.htm line 53 ( var map = new Lmap etc etc )

but the code of you page Ctrl U under firefox is exactly the same !

who can help me ?

I am under window 7 and Firefox

the link I am talking about http://labs.easyblog.it/maps/leaflet-search/examples/simple.html

regards

use with WFS (geoserver)

I need a help to use library leaflet.control.search.
In example json :

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'],
    markerLocation: true,
    autoType: false,
    autoCollapse: true,
    minLength: 2,
    zoom:10
}) );

alter this URL for

map.addControl( new L.Control.Search({
   url: 'http://localhost/geoserver/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=sedhab%3Alote_siturb&CQL_FILTER=conjunto%20like%20%27{s}%27&outputFormat=application/json&format_options=json&SrsName=EPSG%3A4326&osm_type=N&limit=100&addressdetails=0&json_callback=L.Control.Search.callJsonp',
   jsonpParam: 'json_callback',
   propertyName: 'display_name',
   propertyLoc: ['lat','lon'],
   markerLocation: true,
   autoType: false,
   autoCollapse: true,
   minLength: 2,
   zoom:10
}) );

I would like ajustar for my WSF(geoserver), you can get help us.

to add NEW option: collapsed, like L.Control.Layers

add option: collapsed
like L.Control.Layers which allows to show the control already opened when the map is loaded. Disabling option autoCollapsed if the option collapsed is false.

you code have error in function _recordsFromLayer (leaflet-search.js)

source code:
if(layer instanceof L.Marker || L.CircleMarker)

must be:
if(layer instanceof L.Marker || layer instanceof L.CircleMarker)

no search result for markers(Points) in geojson

i cant seem to get search results for markers(points) in geojson layers,.but with polygons or polylines in geojson, i do get search results..

Question: leaflet-search from Tabletop allocated data

Disclaimer: I'm pretty new to javascript and only kind of know what I'm doing

I'm racking my brain trying to figure out if the issue here is with Tabletop or with how I'm putting that data into the markers for leaflet-search to use. Here is a link to the site I'm trying to implement leaflet-search on. edit: Username and password information revoked due to closing the issue

Here's the code that is generating the markers and (I'm pretty sure) giving them titles

var markersLayer;
function startUpLeafet(tabletopData) {
        // Tabletop creates arrays out of our data
        // We'll loop through them and create markers for each
        for (var num = 0; num < tabletopData.length; num ++) {
                // Our table columns
                var dataName = tabletopData[num].name;
                var dataFaction = tabletopData[num].faction;
                var dataInterest = tabletopData[num].interest;
                var dataDP = tabletopData[num].dp;
                var dataType = tabletopData[num].type;
                var dataComments = tabletopData[num].comments;
                var dataDate = tabletopData[num].date;

                // Pull in our lat, long information
                var dataLat = tabletopData[num].latitude;
                var dataLong = tabletopData[num].longitude;

                // Add to our marker
                marker_location = new L.LatLng(dataLat, dataLong);
                // Create the marker
                markers = new L.Marker(marker_location, {icon: icons[dataFaction], title: dataInterest});

                // Add to our marker
                markers.bindPopup(popup);

                // Create layer group
                markersLayer = L.layerGroup([markers]);

        // Add marker to our to map
        map.addLayer(markersLayer);
        }
};

In index.html I've got this calling leaflet-search

    map.addControl( new L.Control.Search({
        layer: markersLayer,
        text: 'Interest...',
        initial: true
    }) );

In the source spreadsheet for Tabletop some (not all) of the markers have an item "Interest" that is filled with things like Speaker, Skateboard, PDA, Tires, etc. It's the only thing that really needs to be searchable so I'm just trying to assign that to each marker's title attribute and let leaflet-search search through that.

I appreciate any help you're willing to give.

Problem with Control Search and Custom Icons.

Hello. I have small problem. I use Leaflet with plugins Control Search and Marker Cluster.

I needed to add a custom icons and I read a tutorial from http://leafletjs.com/examples/custom-icons.html

When I add the code {icon: iconRed} to L.Marker, searching doesnt work anymore.

My code sample:

    var markers = L.markerClusterGroup({ disableClusteringAtZoom: 16 });

    /////////////

    var controlSearch = new L.Control.Search({layer: markers, initial: false});

    /////////////

    var LeafIcon = L.Icon.extend({
            options: {
                iconSize:     [32, 37],
                iconAnchor:   [16, 37],
                popupAnchor:  [1, -30]
            }
    });
    /////////////

    var iconRed = new LeafIcon({iconUrl: './images/marker_icons/red.png'}),
        iconGreen = new LeafIcon({iconUrl: './images/marker_icons/green.png'});

    /////////////

    var addressPoints = [
        [0,0, "Item 1"],
        [1,1, "Item 2"],
        [2,2, "Item 3"],
        [3,3, "Item 4"]
    ];

    /////////////

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];   
        var title = a[2];

        marker = new L.Marker(new L.latLng(a[0], a[1]), {icon: iconRed}, {title: title});

        marker.bindPopup(title);

        markers.addLayer(marker);
    }

    /////////////

    map.addLayer(markers);

    /////////////

    map.addControl(controlSearch);

Leaflet control search click on tooltip marker disappear.

Am using leaflet control search for searching various markers in our site. When Am clicking on mouse for particular search is working fine. But when Am entering keyboard button all markers are disappear.Please suggest.

Working on TODO: optimizing fillRecordsCache to use layersearch and AJAX

Hello Stafano,

My application uses a GeoJson layer for my datalayer but also allows for searching for addresses not in my datalayer through an ajax call(using callData ). I have made a crude modification to fillRecordsCache so that I can search both data sources but am having a slight problem. I was hoping you could point me in the right direction on how to work this out.

Here's what I've done:

    _fillRecordsCache: function () {
        var inputText = this._input.value;

    L.DomUtil.addClass(this._container, 'search-load');

    if(this.options.callData)   //CUSTOM SEARCH CALLBACK(USUALLY FOR AJAX SEARCHING)
    {
        var that = this;
        var performthis = this._recordsFromLayer() //get records from layer
        this.options.callData(inputText, function (jsonraw) {

            that._recordsCache = {};
            for (var key in performthis) {
                that._recordsCache[key] = performthis[key]; //add each record from layer to recordsCache
            }

    //that._recordsCache = performthis;
            //that._recordsCache = that._filterJSON(jsonraw);
            var moredata = that._filterJSON(jsonraw); //put filtered json results in a seperate array
            for (var key in moredata)
            {
                that._recordsCache[key] = moredata[key]; //add each record from json results to recordsCache
            }
            that.showTooltip();

            L.DomUtil.removeClass(that._container, 'search-load');
        });
    },.....

Basically I'm just calling both methods for filling the recordsCache and combining the results.

So the problem..

When searching for records from layer everything behaves as expected. Searching ajax results also works as expected but only when the first result returned is the address I am searching for, otherwise the first result returned from the ajax call is the record sent to showTooltip even if further searching narrows results to a different address.

As an example if I search for Atlanta, Georgia -- when I pause typing results are fetched and the autocomplete is filled with Atlanta, Georgia. If I continue to type out an address (e.g. 3370 Peachtree Road, Atlanta, Georgia), autocomplete works as expected but when the tooltip is clicked the record for Atlanta,Georgia(rather than Peachtree Road as it reads) is shown.

Is there anything I can do to correct this?

Thanks for your tme

Searching within more columns/attributes

I´am use the searching on GeoJSON, it works fine. But is there any possibility to search within more than one column/attribute? For example if you have in table columns "id", "name", "owner", etc. Currently you can write down only one attribute in "propertyName". And I want to searching within "name" as well as "owner". Thanks

add start it collapsed: false

I'm currently using this pugglin and me abut the need to enter into a form. Leaving everything open without control magnifying glass is used to collapse it or not time. I'll be trying to develop but if anyone can help would be great!

thanks everyone and stefanocudini for their great work!

Searching a LayerGroup with multiple layers

I have a function that adds markers to different layers based on a certain property. Then I combine them all into one larger LayerGroup. So something like

var firstMarkersLayer = L.layerGroup();
var secondMarkersLayer = L.layerGroup();
var thirdMarkersLayer = L.layerGroup();

function that adds markers to the layers //this works fine

var allMarkersLayer = L.layerGroup([firstMarkersLayer, secondMarkersLayer, thirdMarkersLayer]);

leaflet-search doesn't appear to be able to search the allMarkersLayer group but will search any of the subgroups fine. Is it possible to have it search the subgroups, or to just define multiple groups for it to search?

Searching on a geoJson layer

Hi Stefano

I really like the look of your plugin and I have tested it but can't get it working with a L.geoJson layer

Please could you have a look at my code and see what I'm doing wrong.

Thanks

Matt

var map = L.map('map').setView([50.370, -4.14], 12);


    L.tileLayer('http://{s}.tile.cloudmade.com/a8ed148d84c2438ba62c2742cac051ae/33356/256/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <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://cloudmade.com">CloudMade</a>'
    }).addTo(map);

    var neighbourhoods = L.geoJson(ngbhs,
    {onEachFeature: function 
    (feature, layer) 
    {layer.bindPopup(
    '<a href='+feature.properties.NOTES+'" target="_blank">'+feature.properties.NAME+'</a>'
    );}
    }
    );

    map.addLayer(neighbourhoods);

    map.addControl(new L.Control.Search({layer: neighbourhoods}));
    //searchLayer contains searched markers

    //map.addControl(new L.Control.Search({searchJsonpUrl: 'search.php?q={s}&callback={c}'}) );
    //searchJsonpUrl is jsonp service for retrieve elements locations

Display search box out side the map div.

is it possible to show search box div out side the map div. for example pass div id in options and search box created in specified div rather than into default leaflet container div?

autoCollapse option hide this._markerLoc before that visualized

icon on mobile

I use the no mobile css for mobile
yes is not good but i prefer

you can see the result :

i have see the css and i see that

leaflet-bar

and when i add this

it is not perfect but if its closer

Ability to search both GeoCode and GeoJSON features

It would be nice if there was a way to do GeoCode searches and searching by GeoJSON features at the same time.

Doesn't work on mobile

The suggested marker titles are not listed as the user types a valid marker title.

Pressing return on Mobile Safari results in "undefined" being listed under the search bar.

resolve options condition problem autoCollapse: true, markerLocation: true

autoCollapse: true and markerLocation: true
cause not show location

Search not showing. Bar at top of screen?

This is my code, what am I doing wrong experts? This is for mobile. The CSS on the nav buttons works but the search bar doesn't show up. What is wrong with that? And there seems to be a bar at the top of the screen right before my map. How would I fix this?

<!DOCTYPE HTML>
<html>
<head>
    <title>Mobile</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />   
    <link rel="stylesheet" href="leaflet.css" />
    <link rel="stylesheet" href="leaflet-search.css" />
    <link rel="stylesheet" href="leaflet-search.mobile.css" />
    <link rel="stylesheet" href="mobile.css" />
<script src="leaflet-src.js"></script>   
<style>
body {
    padding:0;
    margin:0;
}
   html,body, #map {
    height: 100%;
}
</style> 
</head>

<body>
    <div id="map"></div>
<script>
 var map = L.map('map');

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <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>',
}).addTo(map);
    function onLocationFound(e) {
    var radius = e.accuracy / 1;

    L.marker(e.latlng).addTo(map)
        .bindPopup("You are here!").openPopup();

    L.circle(e.latlng, radius).addTo(map);
}

    function onLocationError(e) {
    alert(e.message);
}
    map.on('locationfound',onLocationFound);
    map.on('locationerror', onLocationError);

map.locate({setView: true, maxZoom: 16});
;
var jsonpurl = 'http://open.mapquestapi.com/nominatim/v1/search.php?q={s}'+
                   '&format=json&osm_type=N&limit=100&addressdetails=0',
        jsonpName = 'json_callback';
    //third party jsonp service

    function filterJSONCall(rawjson) {  
        var json = {},
            key, loc, disp = [];

        for(var i in rawjson)
        {   
            disp = rawjson[i].display_name.split(',');  
            key = disp[0] +', '+ disp[1];

            loc = L.latLng( rawjson[i].lat, rawjson[i].lon );

            json[ key ]= loc;
        }

        return json;
    }

    var mobileOpts = {
        url: jsonpurl,
        jsonpParam: jsonpName,
        filterJSON: filterJSONCall,     
        text: 'Color...',
        autoType: false,
        tipAutoSubmit: true,
        autoCollapse: false,
        autoCollapseTime: 20000,
        animateLocation: true,
        markerLocation: true,
        delayType: 800  //with mobile device typing is more slow        
    };

    map.addControl( new L.Control.Search(mobileOpts) );
    //view source of search.php for more details

    map.addControl(new L.Control.Zoom());
</script>
</body>
</html>

Error using HTML5 Geolocation

The Browser returns "Uncaught TypeError: Cannot call method 'call' of undefined " error using leaft-search.js and not accepting the the HTML5 Geolocation.
Here the basic html5 geolocation code that I am using with leaft-search:

function initCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
showError("Your browser does not support Geolocation!");
}
}

function show_map(position) {
var latitude_html5 = position.coords.latitude;
var longitude_html5 = position.coords.longitude;
// let's show a map or do something interesting!
}

Does anyone tryed to use it with html5 geolocation? Am I the only one who's faceing this issue?
Thanks
Ricky

Cannot get search working with geojson layer

The symptom is that there are no records being found. Features may be dynamically added and removed from the map so I've tried re-adding the control when this happens.

This is experimental code rather than actual work towards the final app and everything is running on a micro instance with only a single process non production process thread so apologies for the performance:

http://www.footholdgame.com/experiments/scratch_test/

Zoom in quick to avoid a different bug (boundary condition).

The lmap_add_search_control() adds the search control which is not seeing any of the layer data. I'm new to javascript and was having trouble stepping through your code to find out what is going wrong so I hope you can help.

Search on the active Layer (change target with the radio button in L.control.layers)

Hello,

First of all thank you very much for this usefull search solution.

Is there any way to alternate the target of the research with a helper function like getActiveLayer?

I would like to have a unique search field that switches target according to the active Layer in L.control.layers.
The layers are not Json objects but arrays of coordinates.
I have looked into the documentation of Leaflet and the search plugin but I have not found anything.

Thanks,

wrapper ID doesn´t work

edit: it works, my mistake :-)

bug search Firefox Mobile Android

when i write the term search the plugin do no execute the search.php?....
so when i capture the screen it start the search (lol)

still can't make the button visible

Thanks for such a great plug-in. However I still can't make the search box show on my map, where did I go wrong? Thanks again for any comments!

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,}).addTo(map);

queryUrl= 'http://localhost:8080/geoserver/jacktest/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jacktest:jacktest&outputFormat=text/javascript&format_options=callback:callback&featuretype&CQL_FILTER=LAND10='

map.addControl( new L.Control.Search({ url:'queryUrl{s}', jsonpParam:'callback', text:'Color...', markerLocation: true}) );

Scrolling doesn't work in Mobile Safari

When the user's search results in more markers than can be displayed, scrolling is introduced. However, on Mobile Safari, scrolling doesn't work.

The screenshot shows that there are more markers that are found by the search, but the user cannot tap and scroll the list of markers to access the markers at the end of the list.

Incompatibility with leaflet v0.6.4

I think there's an incompatibility with the latest version of leaflet, version 0.6.4. In my leaflet-search, inside the function '_recordsFromLayer', the layer variable matches L.Marker, when it should match L.Path. In the leaflet source you are using in your 'vector features' example, your layer variable is an instance of "n.Class.extend.t, which goes through and matches L.Path, and your layer is created from geoJSON. In the latest leaflet v0.6.4, that no longer exists, and my layer is an instance of "o.Class.extend.e, also created from geoJSON, yet it matches L.Marker. So that causes errors and the records returned are empty.

Working on a fidde, but I can't even get that working to demonstrate this error. Here's the fiddle:
http://jsfiddle.net/krb686/3gVdG/1/
For some reason the search box doesn't want to show up

And the fiddle uses all of the same resources as your vector example, except I updated the leaflet css and js files.

disable auto addLayer to map

here:
https://github.com/stefanocudini/leaflet-search/blob/master/src/leaflet-search.js#L141

TODO:
if layer is not already in map.. addTo map only marker founded!

Android soft keyboard

On android devices, the screen keyboard quickly toggles on and off when panning a map with the leaflet-search plugin enabled, when the plugins input field is not collapsible such as in this example: http://labs.easyblog.it/maps/leaflet-search/examples/outside.html

I am currently using a Nexus 7 as well as a moto X, for testing and it occurs on both devices, in both your example, as well as on my map. I suspect that when the map is touched to drag and pan, that it triggers a ghost click event which temporarily sets the focus to the input field triggering the on screen keyboard, and resizing the map, before the focus gets reset back to the map.

Importe geojson file to a leaflet map using Geoserver Url

If possible, could you point me in the right direction for implementing this? I really have no idea to do it. i am not so experimented with javascript and php

Thanks,

Ayad

autocomplit

if I set options.initial = false;
it turn on substring search but it isn't switch off autocomplit.
So if you have record "point" for search and try to enter "oi" it will set text "Po_int" and don't allow me to continue to enter letter "n" to clarify search request.
I think to fix it leaflet-search should switch off autocomplit by default.

Package still maintained?

https://atmospherejs.com/mrt/leaflet-search could use an update for Meteor 0.9+.

To remove mrt as a contributor:

meteor admin maintainers <your_username>:<your_package> --remove mrt

If you were originally the maintainer on the old package system, you can attach your Meteor Developer account at http://atmosphere.meteor.com/accounts, then ping tmeasday to give you ownership of the old package.

Append variable from select input to Nominatim url

By the initialization i tried to add the ctemp variable :

url2: 'http://nominatim.openstreetmap.org/search?format=json&q={s}&country={ctemp}&limit=2',

The variable come from
var ctemp=s('#countryup option:selected').text();
The problem is the value of it dynamically change,and in the url its seems its normal string and not a variable value.How can i solve this?

Working With Large DataSets

I am using Leaflet Search with a setup similar to this specific example - http://labs.easyblog.it/maps/leaflet-search/examples/outside.html. I need help with querying a large dataset (55 000 records) without the browser freezing. Is there a way to do ajax server side filtering with ajax?

Enhancement: search by more than one geojson attribute?

If possible, could you point me in the right direction for implementing this?

Thanks,

Mark

Erratic Search Behaviour

I've tried to implement leaflet-search in a leaflet map that I've written however I'm getting some strange results.

I've created a fiddle (http://jsfiddle.net/Gs5Mw/4/) containing the code, though it doesn't enable the full functionality of the map.

The full map (which is working on my system) pulls in coordinates from the file countriesSmall.js, along with country name and a few other specifics that are required to be shown in the div in the top right of the map.

I tried to set up leaflet-search to use countriesSmall.js as its source, but it doesn't find all of the countries in the file. Rather it finds seemingly random countries. For example it will not recognise China or United States but will recognise United Arab Emirates.

I'm sure this is a problem in the implementation of the plugin on my end, as opposed to a problem with the plugin itself. This is the first JavaScript 'applet' that I've written (I'm still new to this, so my apologies) and I can't find the error.

I'd be very pleased if someone was willing to help!

ECCN Classification

Does Leaflet-Search have a current ECCN classification pursuant to the Export Administration Regulations? And if not, does the software include any encryption functionalities?

Thanks,
suneet

support .abort() method for callData function

to prevent parallel requests:
https://github.com/stefanocudini/leaflet-layerJSON/blob/master/src/leaflet-layerjson.js#L241