[GIS] Error Using ‘L.mapbox.featureLayer’ to load GeoJSON with pointToLayer Option

Question

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.

Answer 1

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