How to update fillColor of polygonOptions with props?

Question

I'm drawing custom polygon with DrawingManager. I would like of modify fillColor of polygon with props. What should I do?

import React from 'react'
import GoogleMap from 'google-map-react'

export default (props: any) => {
  let {color} = props
  const handleGoogleMapApi = (google: any) => {
    console.log(google)
    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: ['polygon'],
      },
      polygonOptions: {
        strokeWeight: 5,
        fillOpacity: 0.45,
        fillColor: color,
      },
    })
    google.maps.event.addListener(drawingManager, 'polygoncomplete', (polygon: any) => {
      let points: any = polygon.getPath().getArray()

      points.forEach((point: any) => {
        const {lat, lng} = point
        console.log(lat(), lng())
      })
    })
    google.map.setMapTypeId('satellite')
    drawingManager.setMap(google.map)
  }
  return (
    <div style={{height: '60%', width: '100%'}}>
      <GoogleMap
        defaultCenter={{lat: -19.810968444640704, lng: -43.54377112158203}}
        defaultZoom={15}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={handleGoogleMapApi}
        onChange={handleGoogleMapApi}
        bootstrapURLKeys={{libraries: 'drawing', key: `${process.env.REACT_APP_PROVIDER_GOOGLE}`}}
      />
    </div>
  )
}

how you are using this component in render ?just pass color as props — Jatin Parmar, Mar 11 '20 at 08:14
@cura I don't think that you can change a color of a shape after it is created, but you can change the color for each new shape the user creates. What do you want to achieve? Change existing shapes color or new ones? — Christos Lytras, Mar 13 '20 at 20:55
expline what meaing deo you add specil color for each polygon as as variable or what explaine more ? — Mohammed Al-Reai, Mar 17 '20 at 10:34

score 0 · Answer 1 · answered Mar 16 '20 at 13:35

I have a lot of experience working with GIS + React, but never work with google API. I'd dig into your problem and there's suggestion: Probably you've chosen wrong library. I've read source code, examples of "google-map-react" - it's destitute maintained. There are more popular alternatives such a https://github.com/fullstackreact/google-maps-react#polygon

Even from example you'll get how to change color of Polygon.

score 0 · Answer 2 · answered Mar 17 '20 at 10:16

 render() {
    const center = this.getvalue();
    const {area=[]} = this.props;
        console.log(this.props);

        return (
            <googlemap
                defaultzoom={14}
                center={center}
                onrightclick={this.erasepolygon}>
                {
                    this.state.bounds.length != 0 &&
                    <polygon
                        paths={this.state.bounds}
                        options={{
                        strokecolor:"#d34052",
                        fillcolor:"#d34052",
                        strokeopacity:"0.5",
                        strokeweight:'2'
                            }}
                    />

                }

                {
                    <drawingmanager
                        drawingmode={google.maps.drawing.overlaytype.polygon}
                        onpolygoncomplete={this.handleoverlay}

                        defaultoptions={{
                      drawingcontrol: true,
                      drawingcontroloptions: {
                        position: google.maps.controlposition.top_center,
                        drawingmodes:['polygon']

                      },
                      polygonoptions: {
                        fillcolor: `#ffffff`,
                        fillopacity: 0.7,
                        strokeweight: 1,
                        clickable: true,
                        editable: true,
                        zindex: 1
                      }
                    }}
                    />
                }
                <marker
                    position={center}
                />
                {

                    area.map((value, index) => {
                        return (
                            <polygon
                                key={index}
                                paths={value.bounds}
                                options={{
                        strokecolor:"#e34052",
                        fillcolor:"#e3352",
                        strokeopacity:"0.5",
                        strokeweight:'2'
                            }}

                            />
                        )

                    })
                }
            </googlemap>
        )
    }
     }

How to update fillColor of polygonOptions with props?

2 Answers2