I have implemented the leaflet map library in my react project https://react-leaflet.js.org/en/ and implemented a geojson map component like below
class MapContainer extends React.Component {
state = {
greenIcon: {
lat: 8.3114,
lng: 80.4037
},
zoom: 8
};
grenIcon = L.icon({
iconUrl: leafGreen,
iconSize: [24, 24], // size of the icon
//iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -16]
});
render() {
const positionGreenIcon = [
this.state.greenIcon.lat,
this.state.greenIcon.lng
];
return (
<div className="mapdata-container">
<Map className="map" style={{height:'100%',width:'100%'}} center={positionGreenIcon} zoom={this.state.zoom}>
<GeoJSON data={geo}/>
<Marker position={positionGreenIcon} icon={this.grenIcon}>
<Popup>I am a green leaf</Popup>
</Marker>
</Map>
</div>
);
}
}
export default MapContainer;
It looks like this
i want to color each province with different colors and there's not alot in the documentation of how to do this.
This is the geojson file i've used. https://raw.githubusercontent.com/thejeshgn/srilanka/master/electoral_districts_map/LKA_electrol_districts.geojson
How do i fill
each province with different colors.
You can easily achieve that using style
prop on your GeoJSON wrapper. Create a style method which accepts the feature as argument. Then in the fillColor property use the properties: { electoralDistrict } to identify the district and return the desired color: Here is an example of how it could be:
class MapContainer extends React.Component {
state = {
greenIcon: {
lat: 8.3114,
lng: 80.4037
},
zoom: 8
};
grenIcon = L.icon({
iconSize: [24, 24], // size of the icon
//iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
popupAnchor: [-3, -16],
iconUrl: leafGreen
});
giveColor = district => {
switch (district) {
case "Matara":
return "red";
case "Polonnaruwa":
return "brown";
case "Ampara":
return "purple";
default:
return "white";
}
};
style = feature => {
const {
properties: { electoralDistrict }
} = feature;
return {
fillColor: this.giveColor(electoralDistrict),
weight: 0.3,
opacity: 1,
color: "purple",
dashArray: "3",
fillOpacity: 0.5
};
};
render() {
const positionGreenIcon = [
this.state.greenIcon.lat,
this.state.greenIcon.lng
];
return (
<div className='mapdata-container'>
<Map
className='map'
style={{ height: "100vh", width: "100%" }}
center={positionGreenIcon}
zoom={this.state.zoom}
>
<GeoJSON data={geo} style={this.style} />
<Marker position={positionGreenIcon} icon={this.grenIcon}>
<Popup>I am a green leaf</Popup>
</Marker>
</Map>
</div>
);
}
}