0

I am currently working on a project where I am loading GeoJSON into a map. The GeoJSON will include circles, point markers, and the other essentials shapes. I've been having this issue that I can't seem to resolve. I have looked up hundreds of sites and examples, but none have helped me resolve this conflict. I am using 'L.mapbox.featureLayer' since it gives me a little more control and more features than Leaflet's basic 'geoJson' function. The error I receive anytime I use 'L.mapbox.featureLayer' with 'pointToLayer' in the options is 'Uncaught TypeError: Cannot use 'in' operator to search for 'setStyle' in undefined' in feature_layer.js:99. Here is my code that I'm using:

viewData = L.mapbox.featureLayer(geoObject, {
    pointToLayer: function (feature, latlon) {
        if (feature.properties.type === 'circle') {
            L.CircleMarker(latlon, {
                radius: feature.properties.radius
            });
        } else if (feature.properties.type === 'marker') {
            return L.Marker(latlon);
        }
    },
    style: function (feature) {
        return {color: feature.properties.color};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.description);
        layer.openPopup();
    }
});

And here is what my geoObject, my GeoJSON, looks like.

{
"type": "FeatureCollection",
"features": [{
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44",
            "type": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.75085163116455, 47.558826485354054]
        }
    }, {
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44",
            "radius": 0,
            "type": "circle"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.748480558395386, 47.55689332395224]
        }
    }, {
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[10.74986457824707, 47.55741463292684], [10.74986457824707, 47.55792145612408], [10.751645565032959, 47.55792145612408], [10.751645565032959, 47.55741463292684], [10.74986457824707, 47.55741463292684]]]
        }
    }, {
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44",
            "radius": 46.73431930136609,
            "type": "circle"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.751506090164185, 47.5568860835133]
        }
    }, {
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44",
            "radius": 48.38720184258894,
            "type": "circle"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.749778747558594, 47.55663990799392]
        }
    }, {
        "type": "Feature",
        "properties": {
            "title": "Title",
            "description": "description",
            "marker-symbol": "star",
            "marker-size": "medium",
            "marker-color": "#f44",
            "type": "marker"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.748094320297241, 47.559333294894415]
        }
    }]
}

I realize from reading through feature_layer.js that layer is undefined. However, I'm not sure why. I've tried using the above code on the whole GeoJSON object as well running it through each feature to add a new layer for each feature. Both result with this error.

1 Answer 1

1

Try adding return before L.CircleMarker just as you have with markers. Without that I would guess layer is undefined.

5
  • Oh yeah, I have tried several different variations trying to figure this out. I added return back in, and I got the same result. Thanks though.
    – Josh
    Jun 25, 2015 at 19:51
  • couple of other things I notice, 1) try console.log(latlon) in each of those if statements, to make sure that's getting in there. Also shouldn't it be L.circleMarker and L.marker (lower case first letter, not uppercase as you have)? see the documentation: leafletjs.com/reference.html#circlemarker
    – toms
    Jun 25, 2015 at 20:03
  • Wow! I think that may have been it. The latlon were getting there. I think it was the caps. I'm quite embarrassed now.
    – Josh
    Jun 25, 2015 at 20:09
  • I believe I was using code from an example I saw. So, I think it's working. I just have a couple things to figure out. But that got me past the error which is what I was needing.
    – Josh
    Jun 25, 2015 at 20:28
  • Now that I'm looking at other work centered around the same thing, I'm seeing that there is a lot of code out there using L.Circle or L.Marker. I don't feel so bad anymore. But this does solve the problem for me. Thank you!
    – Josh
    Jun 26, 2015 at 2:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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