I tried styling multiple routes based on distance route(geojson properties).
Ascending from the shortest(red, orange, yellow,green, blue) to the longest one.
Since the distance of route is not fixed on some value, I can't use this styling from leaflet interactive cloropeth styling:
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
here is the example of geojson (the coordinate list is cutted):
{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"3989.57671272009"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"2667.74036482918"}}]}
Does anybody know how to style from the order of properties? not from the exact value
You can use Array.prototype.sort to sort the elements.
// input
myVariable = {"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2382587,-7.9579805],[110.2380463,-7.9581418]]]},"properties":{"distance":"3989.57671272009"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2371966,-7.9598229]]]},"properties":{"distance":"2206.76527447351"}},
{"type":"Feature","geometry":{"type":"MultiLineString","coordinates":[[[110.2374145,-7.9593029],[110.2379765,-7.9594952]]]},"properties":{"distance":"2667.74036482918"}}]}
// Sort by distance; highest distance will be first element
// To sort as lowest first flip a and b
myVariable.features.sort((a, b) => b.properties.distance - a.properties.distance);
colors = ['#800026', '#BD0026', '#E31A1C', '#FC4E2A', '#FD8D3C', '#FEB24C', '#FED976', '#FFEDA0'];
// Now you can get color using index
// The next step depends on how you want to use color
// For example adding color property to each item in myVariable.features
myVariable.features.forEach((features, index) => {
if (index < colors.length) features.color = colors[index];
else featurs.color = colors[colors.length - 1];
});
// Show the final output
console.log(myVariable);You can pass a function to style property in GeoJSON options.
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
L.geoJSON(routes, {
style: (feature) => {
return {color: getColor(feature.properties.distance)};
}
}).addTo(map);
Here is a working fiddle: https://jsfiddle.net/7eh1bajL/
(I have used your GeoJSON but changed distance values so that you can see different colors being applied)