Leaflet Search Control - Cannot read property 'call' of undefined

Question

I am having an issue with Leaflet Control Search, I am testing on C9.io, using Laravel 5.2, I am trying to search a L.geojson layer but all it comes up with is "Location not Found" and the console gives error: "Cannot read property 'call' of undefined"

I have a global variables that holds the map, L.geojson layers, and tiles.

var map, allcalls, mapquest;

mapquest = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
    maxZoom: 18,
    subdomains: ["otile1", "otile2", "otile3", "otile4"],
  });
map = new L.Map('map', {
    center: new L.LatLng(39.90973623453719, -93.69140625),
    zoom: 3,
    layers: [mapquest]
  });
var promise = $.getJSON("leaflet_php/get_users.php");
promise.then(function(data) {

    allcalls = L.geoJson(data, {
      onEachFeature: function (feature, layer) {
     layer.bindPopup(feature.properties.fn + '<br>' +feature.properties.gender + '<br>' + feature.properties.addr + '<br>'+ feature.properties.city );
 }
    });
    map.fitBounds(allcalls.getBounds(), {
        padding: [20, 20]
    });

    allcalls.addTo(map);
});

Then I start the L.control.search, and it shows on the map but when I search I get no results the loader gif never stops and I get console error "Cannot read property 'call' of undefined"

var controlSearch = new L.Control.Search({
  layer: allcalls, 
  position:'topleft',
        propertyName: 'city',
});
  map.addControl( controlSearch );

I am generating the json using https://github.com/bmcbride/PHP-Database-GeoJSON. My Json has at least 1000 features, each feature has 30 properties. So this is an abbreviated version. This is a sample of the json I get:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":   {"type":"Point","coordinates":[-80.191626,26.339826]},"properties":{"id":1,"fn":"SAMUEL","mi":null,"ln":"STANTON","name_pre":"MR","addr":"9 HONEYSUCKLE DR","apt":null,"city":"AMELIA","st":"OH","zip":45102,"z4":9722,"dpc":99,"fips_cty":25,"latitude":26.339826,"longitude":-80.191626,}},

Any help is greatly appreciated. Thanks in advance.

Do you instantiate your `L.Control.Search` within your Promise callback? — ghybs, Mar 31 '16 at 04:49
No Its not, but their examples do not initiate inside the callback. — jsrosas, Apr 01 '16 at 04:41

score 0 · Answer 1 · edited May 23 '17 at 12:08

You should instantiate L.Control.Search within your Promise callback, or at least use the setLayer() method within that callback.

It looks like you have a classic asynchronous issue: you initiate an AJAX request (through jQuery's getJSON), which will assign the value of your allcalls variable once resolved.

In parallel, you instantiate your L.Control.Search and specify allcalls as the Layer Group to be searched in. However, at that time, the AJAX is still processing (i.e. not resolved), so allcalls is still unassigned (i.e. undefined).

Therefore your Search Control knows nothing about the L.geoJson layer group that is built later on in the AJAX resolution.

Leaflet Search Control - Cannot read property 'call' of undefined

1 Answers1