CODEWITHSUNDEEP
phplaravelleafletgeojsonc9.io
jsrosas
jsrosas

Reputation: 103

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

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.

Upvotes: 1

Views: 2661

Answers (1)

ghybs
ghybs

Reputation: 53185

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.

Upvotes: 0

Related Questions