I am trying to create the Google Map with USA State with different color based on my unique data related calculation. I am providing the different color without issue to the featureStyleOptions to set color to state using place_id on the map but though I am getting same color mostly for all state.
I double checked my color method - it's providing the different color for state -- though I am getting single color only most of them. The last array of the state only getting applied correct color on map. I am not getting why this is happening, Please anyone help me to resolve this.
CODE: using angular - typescript.
private fillStateboundray(placeFillColorObj: { placesResult: google.maps.places.PlaceResult, fillColor: string }[]) {
_.forEach(placeFillColorObj,(record, index)=>{
console.log(index);
console.log(record);
let fcolor: string = record.fillColor;
let placeResult: google.maps.places.PlaceResult = record.placesResult;
let featureStyleOptions: google.maps.FeatureStyleOptions;
const locality: google.maps.FeatureType = <google.maps.FeatureType>placeResult.types?.at(0)?.toLocaleUpperCase();
let statePlaceId = placeResult.place_id;
let featureLayer = this.map.getFeatureLayer(locality);
featureStyleOptions = {
strokeColor: '#ffffff',
strokeOpacity: 0.3,
strokeWeight: 3.0,
fillColor: fcolor,
fillOpacity: 0.5,
};
featureLayer.style = (options: any) => {
if (options.feature.placeId == statePlaceId ) {
console.log(placeResult.name + "setting fill");
return featureStyleOptions;
}
console.log(placeResult.name + "setting not fill");
return null;
};
});
See the below map having same color for all state. For example I gave the red color for Texas but getting some other color. this is my issue.
