Google Map data driven styling for fill boundary for multi State - not working as expected

72 views Asked by At

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. Google Map Current result

0

There are 0 answers