Variable Polyline Weight with GEOJSON in Leaflet
i think your function should actually return the weight. something more like this:
var getStyle = function(feature){
var weight;
if (feature.properties.Value > 30000000) {weight = 8;}
else if (feature.properties.Value > 10000000) {weight = 7;}
else if (feature.properties.Value > 5000000) {weight = 6;}
else if (feature.properties.Value > 1000000) {weight = 5;}
else if (feature.properties.Value > 500000) {weight = 4;}
else if (feature.properties.Value > 100000) {weight = 3;}
else if (feature.properties.Value > 1000) {weight = 2;}
else if (feature.properties.Value > 1) {weight = 1;};
return {
color: 'red',
weight: weight
}
};
var getPopup = function(feature, layer) {
var content = 'popup content goes here';
layer.bindPopup(content);
};
try this then for the styling and popup part:
var CHNimports = L.geoJson(CHN, {
style: getStyle,
onEachFeature: getPopup
}).addTo(map);
I think your issue is that you're calling L.geoJson
with too many parameters.
Your code;
var CHNimports = L.geoJson(CHN, {style: getStyle}, {
onEachFeature: function (feature, layer) {
layer.bindPopup("Omitted for formatting...");
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
What it should look like, note the change to the style
property;
var CHNimports = L.geoJson(CHN, {
style: getStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("Omitted for formatting...");
},
pointToLayer: function (feature, latlng) {
return L.polyline(latlng);
}
}).addTo(map);
The function L.geoJson
only takes 2 arguments. The first is the geoJson object and the second is another json object that contains style
, onEachFeature
and pointToLayer
.
Documentation: http://leafletjs.com/reference.html#geojson