react-google-maps-api
react-google-maps-api copied to clipboard
Can not obtain the paths from the <Polygon> component.
Hey there, I am trying to obtain the paths of the Polygon component provided by this library upon essentially updating the component. Here is my code:
import { PolygonProps, Polygon } from '@react-google-maps/api'
import { createPolygon } from './GeoMapFunctions.ts'
import { useReduxSelector } from '../../store/ReduxHooks.ts'
import { useCallback, useRef } from 'react'
const CustomPolygon = () => {
const { shapeCharacteristics } = useReduxSelector(
state => state.geoMapSlice
)
const polygonRef = useRef<Polygon>()
const basePath = createPolygon(
shapeCharacteristics!.center,
shapeCharacteristics!.sides ?? 4,
shapeCharacteristics!.radius > 0.1 ? 0.01 : shapeCharacteristics!.radius
)
const handleEditPolygon = () => {
// AT.1
const { paths } = polygonRef.current as PolygonProps
console.log('the paths: ', paths)
// AT.2
let aa = polygonRef.current as PolygonProps | null
console.log('A: ', aa)
console.log('A-type: ', typeof aa)
// AT.3
const polygon: PolygonProps = polygonRef.current as PolygonProps
if (polygon) {
console.log('the polygon: ', polygon)
if ('paths' in polygon) {
const polygonProps = polygon as PolygonProps
console.log('PolygonProps:', polygonProps)
// Access polygon properties here
} else {
console.log('Not a PolygonProps object.')
}
} else {
console.log('Polygon not available.')
}
}
const onLoad = useCallback((ref: any) => (polygonRef.current = ref), [])
return (
<Polygon
onLoad={onLoad}
onMouseUp={handleEditPolygon}
onDragEnd={handleEditPolygon}
draggable={true}
editable={true}
paths={basePath}
options={{
strokeColor: 'black',
fillColor: 'black',
fillOpacity: 0.5
}}
/>
)
}
export default CustomPolygon
I had this issue previously with the <Circle> component however, there I`ve managed to solve this issue with an identical approach
let circleRef = useRef<Circle>()
const draggedCircle = (circleEventObject: google.maps.MapMouseEvent) => {
if (circleEventObject.latLng) {
dispatch(setShapeCenter(circleEventObject.latLng.toJSON()))
}
}
const handleRadiusChange = () => {
const circleProps = circleRef.current as CircleProps | null
if (circleProps !== null) {
console.log('CircleProps prop radius !!!!: ', circleProps?.radius)
if (circleProps?.radius) {
dispatch(setShapeRadius(circleProps?.radius))
}
}
}
const onLoad = useCallback((ref: any) => (circleRef.current = ref), [])
return (
<Circle
onLoad={onLoad}
draggable={true}
editable={true}
center={shapeCharacteristics!.center}
radius={shapeCharacteristics!.radius}
onDragEnd={draggedCircle}
onRadiusChanged={handleRadiusChange}
options={{
strokeColor: 'red',
fillColor: 'red',
fillOpacity: 0.05
}}
/>
)
The reference of the Polygon is a very weird object, when expanded recursively it expands to a very large object
I have found a potential solution here: https://codesandbox.io/p/sandbox/reactgooglemapsapi-editing-a-polygon-popr2?file=%2Fsrc%2Findex.js%3A86%2C31, however, this is a JS solution and I was not able to "convert" it to Type Script, I quickly run into the same issue.
I would very much appreciate if someone could help me understand how to solve this issue, thank you in advance.