I'm using leaflet and trying to add a popup to a point on the map that will return a property of the point from the geojson file. Going off this post has been helpful problem adding pop-up to GeoJSON layer in Leaflet , but it only returns the same text for each point. Here's part of the code:
function eqcolors(mag) { return mag >= 5 ? 'maroon': mag >= 4 ? 'red': mag >= 3 ? 'orange': mag >= 2 ? 'yellow': mag >= 1 ? 'green': 'rgb(255,255,255)'; }function eqstyle(feature){ return { radius: 8, fillColor: eqcolors(feature.properties.mag), color: eqcolors(feature.properties.mag), weight: 1, opacity: 1, fillOpacity: 0.8 }}function onEachPoint(feature, layer){ switch (feature.properties.mag){ case 1.0 : return layer.setRadius(5); case 1.1 : return layer.setRadius(5); case 1.2 : return layer.setRadius(5); case 1.3 : return layer.setRadius(5); case 1.4 : return layer.setRadius(5); case 1.5 : return layer.setRadius(5); case 1.6 : return layer.setRadius(5); case 1.7 : return layer.setRadius(5); case 1.8 : return layer.setRadius(5); case 1.9 : return layer.setRadius(5); case 2.0 : return layer.setRadius(10); case 2.1 : return layer.setRadius(10); case 2.2 : return layer.setRadius(10); case 2.3 : return layer.setRadius(10); case 2.4 : return layer.setRadius(10); case 2.5 : return layer.setRadius(10); case 2.6 : return layer.setRadius(10); case 2.7 : return layer.setRadius(10); case 2.8 : return layer.setRadius(10); case 2.9 : return layer.setRadius(10); case 3.0 : return layer.setRadius(15); case 3.1 : return layer.setRadius(15); case 3.2 : return layer.setRadius(15); case 3.3 : return layer.setRadius(15); case 3.4 : return layer.setRadius(15); case 3.5 : return layer.setRadius(15); case 3.6 : return layer.setRadius(15); case 3.7 : return layer.setRadius(15); case 3.8 : return layer.setRadius(15); case 3.9 : return layer.setRadius(15); case 4.0 : return layer.setRadius(20); case 4.1 : return layer.setRadius(20); case 4.2 : return layer.setRadius(20); case 4.3 : return layer.setRadius(20); case 4.4 : return layer.setRadius(20); case 4.5 : return layer.setRadius(20); case 4.6 : return layer.setRadius(20); case 4.7 : return layer.setRadius(20); case 4.8 : return layer.setRadius(20); case 4.9 : return layer.setRadius(20); case 5.0 : return layer.setRadius(25); default: layer.setRadius(100); }}function pointToLayer(feature, latlng){ var popupOptions = {maxWidth: 200}; var popupContent = "This is some content"; return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions); }var geojson;//map output geojson = L.geoJson(eq, { style: eqstyle, onEachFeature: onEachPoint, pointToLayer: pointToLayer}).addTo(map);and the geojson file:
var eq ={"type": "FeatureCollection","features": [{ "type": "Feature", "properties": { "time": "2014-02-16T20:23:35.420Z","depth": 5.0, "mag": 3.2, "magType": "mb_lg", "nst": 0.0, "gap": 52.0, "dmin": 0.47, "rms": 0.45, "net": "us", "id": "usc000mrls", "updated": "2014-02-17T16:34:23.777Z","type": "earthquake"}, "geometry": { "type": "Point"For polygons layer.bindPopup(feature.properties.popupContent) works. Is a different method used for points?
أكثر...
function eqcolors(mag) { return mag >= 5 ? 'maroon': mag >= 4 ? 'red': mag >= 3 ? 'orange': mag >= 2 ? 'yellow': mag >= 1 ? 'green': 'rgb(255,255,255)'; }function eqstyle(feature){ return { radius: 8, fillColor: eqcolors(feature.properties.mag), color: eqcolors(feature.properties.mag), weight: 1, opacity: 1, fillOpacity: 0.8 }}function onEachPoint(feature, layer){ switch (feature.properties.mag){ case 1.0 : return layer.setRadius(5); case 1.1 : return layer.setRadius(5); case 1.2 : return layer.setRadius(5); case 1.3 : return layer.setRadius(5); case 1.4 : return layer.setRadius(5); case 1.5 : return layer.setRadius(5); case 1.6 : return layer.setRadius(5); case 1.7 : return layer.setRadius(5); case 1.8 : return layer.setRadius(5); case 1.9 : return layer.setRadius(5); case 2.0 : return layer.setRadius(10); case 2.1 : return layer.setRadius(10); case 2.2 : return layer.setRadius(10); case 2.3 : return layer.setRadius(10); case 2.4 : return layer.setRadius(10); case 2.5 : return layer.setRadius(10); case 2.6 : return layer.setRadius(10); case 2.7 : return layer.setRadius(10); case 2.8 : return layer.setRadius(10); case 2.9 : return layer.setRadius(10); case 3.0 : return layer.setRadius(15); case 3.1 : return layer.setRadius(15); case 3.2 : return layer.setRadius(15); case 3.3 : return layer.setRadius(15); case 3.4 : return layer.setRadius(15); case 3.5 : return layer.setRadius(15); case 3.6 : return layer.setRadius(15); case 3.7 : return layer.setRadius(15); case 3.8 : return layer.setRadius(15); case 3.9 : return layer.setRadius(15); case 4.0 : return layer.setRadius(20); case 4.1 : return layer.setRadius(20); case 4.2 : return layer.setRadius(20); case 4.3 : return layer.setRadius(20); case 4.4 : return layer.setRadius(20); case 4.5 : return layer.setRadius(20); case 4.6 : return layer.setRadius(20); case 4.7 : return layer.setRadius(20); case 4.8 : return layer.setRadius(20); case 4.9 : return layer.setRadius(20); case 5.0 : return layer.setRadius(25); default: layer.setRadius(100); }}function pointToLayer(feature, latlng){ var popupOptions = {maxWidth: 200}; var popupContent = "This is some content"; return L.circleMarker(latlng, eqstyle).bindPopup(popupContent, popupOptions); }var geojson;//map output geojson = L.geoJson(eq, { style: eqstyle, onEachFeature: onEachPoint, pointToLayer: pointToLayer}).addTo(map);and the geojson file:
var eq ={"type": "FeatureCollection","features": [{ "type": "Feature", "properties": { "time": "2014-02-16T20:23:35.420Z","depth": 5.0, "mag": 3.2, "magType": "mb_lg", "nst": 0.0, "gap": 52.0, "dmin": 0.47, "rms": 0.45, "net": "us", "id": "usc000mrls", "updated": "2014-02-17T16:34:23.777Z","type": "earthquake"}, "geometry": { "type": "Point"For polygons layer.bindPopup(feature.properties.popupContent) works. Is a different method used for points?
أكثر...