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. Any tips or pointing in the right direction would be greatly appreciated.
أكثر...
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. Any tips or pointing in the right direction would be greatly appreciated.
أكثر...