How to assign random colors to the shapefiles, geojsons, kml features using colorbrewer

[Ghetz]

Thanks Aviklai, for your cool code.

I'm new to react-leaflet and need some direction on how to assign random colors to the features similar to https://github.com/oxy86/react-leaflet-maps-shapefile

I tried the following (which may be the wrong approach) by adding style:

import colorbrewer from 'colorbrewer';`

export default class GeoData { public zoom: number; public center: any; public style: any;

constructor(zoom: number, center: any, style: any) {
    this.zoom = zoom;
    this.center = center;
    this.style = {
              opacity: 0.9,
              fillOpacity: 0.1,
              radius: 6,
              weight: 2,
             dashArray: "2",
          // from http://stackoverflow.com/a/15710692
         // color: colorbrewer.Spectral[11][Math.abs(JSON.stringify(feature).split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)) % 11]
  color: colorbrewer.Spectral[11] [ Math.ceil(Math.random() * 1000) % 11]

}
}

}`

But the colorbrewer import is throwing up [Cannot find module or its corresponding type declarations ...] error which I should be able to fix.
More importantly, I want to know whether the above is the right approach.

Any help will be very much appreciated.

[aviklai]

@Ghetz Hi, I am not sure it's related to this library and I am not sure I understand the question.
Can you create a codesandbox with the issue so it will be clearer?

[Ghetz]

@aviklai Thanks for your prompt response.

No, it's not related to your library. I'm basically trying to randomly assign different colors to the features. No worries, I will played around with the code a bit and see how it goes.

Many thanks once again for your awesome code.

[Ghetz]

@aviklai, Hi, I'm still struggling to assign different colours to each GeoJSON feature instead of the default blue colour. For example, if a file of US states is loaded, I want each state to have a different color.

I tried creating a codesandbox of your code to show you but it fails to run, though it runs in the webpack dev server on my PC.

Please I need your advise as to which file(s) in your code should be modified to change the default blue colour of the features in the map.

For example in App.tsx, I tried:

// a function to set colours
import colorbrewer as 'colorbrewer';

function randomlySetsTheFeaturesColor() { return ({ opacity: 1, fillOpacity: 0.7, radius: 6, weight: 2, dashArray: "2", // from http://stackoverflow.com/a/15710692 // color: colorbrewer.Spectral[11][Math.abs(JSON.stringify(feature).split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0)) % 11] fillColor: colorbrewer.Spectral[11] [ Math.ceil(Math.random() * 1000) % 11] }); }}

<GeoJSON key={overlay.id} data={overlay.data.data} pointToLayer={pointToLayer} onEachFeature={popUp} style={aFunctionthatSetstheLayerColor}/> '

But it doesn't work.
Any advise what I'm doing wrong please?

[aviklai]

@Ghetz check this out:
https://codesandbox.io/s/react-leaflet-geojson-colors-px6s0y

[Ghetz]

@aviklai , thanks so much
I just got it half working (for the geojson but the zipped shapefile crashes) by modifying your App.tsx code as follows:

function style(feature: any) { if (feature.properties.name) { console.log (feature.properties.name); } return ({ opacity: 1, fillOpacity: 0.7, radius: 6, weight: 2, dashArray: "2", color: '#' + Math.random().toString(16).substr(-6) //color: 'red' }); }

and

return ( <GeoJSON key={overlay.id} data={overlay.data.data} pointToLayer={pointToLayer} onEachFeature={popUp} style={style} /> )

I have just seen your awesome codesandbox which will be a very helpful guide to get everything working.
Thanks so much for your response, really appreciated. I will keep learning!

Lastly, how do I retrieve the imported layers names please?

[Ghetz]

No worries, I will try and work the imported layers names out.
Thanks once again