CODEWITHSUNDEEP
javascriptleafletstylesgeojson
astaga
astaga

Reputation: 91

geojson data style by order of properties (leaflet)

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

Upvotes: 1

Views: 594

Answers (2)

treecon
treecon

Reputation: 2825

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)

Upvotes: 0

Nevus
Nevus

Reputation: 1407

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);

Upvotes: 1

Related Questions