How to update fillColor of polygonOptions with props?

user_3845038 0
Viewed 706

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>
  )
}
google-map-react reactjs
2 Answers

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.

user_37919010 
 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>
        )
    }
     }
user_130743500
Related