I want to add GeoJSON data to my map, but get an error:

Uncaught TypeError: Cannot read property 'setZIndex' of undefined


    queryLayer = L.geoJSON(JSON.parse(response), {
      pointToLayer: function(feature, latlng){
        var str = "<h5 align=\"center\">" + feature.properties.raw_name + "</h5>";
        str += "<p> State:" + feature.properties.state + " LGA: " + feature.properties.lga + "</p>";

        if(feature.properties.raw_marker !== null &&
          feature.properties.raw_marker  !== undefined &&
          feature.properties.raw_marker  !== ""){
            var customIcon = L.icon({iconUrl: "../"+feature.properties.raw_marker,iconSize:  [28, 38], popupAnchor:  [-3, -15]});
            return L.marker(latlng, {icon: customIcon})
                    .on('click', function(){searchData(feature);});
        } else {
            return L.marker(latlng)
                    .on('click', function(){searchData(feature);});

overlayMaps = {
  "Industies ": layerIndustries,
  "Raw Materials": queryLayer

There's a lot of code missing, so there is a bit of guessing involved, but I would say problem comes from the fact that overlay is being loaded async and not being loaded completely at the time layer control is added to the map.

Solution is to leave queryLayer out of overlayMaps object and add it to the control after layer is added to the map inside ajax call:

myLayerControl.addOverlay(queryLayer, 'Raw Materials');
| improve this answer | |
  • Thank you,i will give it a try – user2999227 Apr 8 at 9:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.