Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can not obtain the paths from the <Polygon> component. #3351

Open
sergiunimat opened this issue Apr 23, 2024 · 1 comment
Open

Can not obtain the paths from the <Polygon> component. #3351

sergiunimat opened this issue Apr 23, 2024 · 1 comment

Comments

@sergiunimat
Copy link

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 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
image

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.

@muneem90
Copy link

@sergiunimat did you find any solution? i am also facing same issue? Mine issue is <Polygon component is not taking paths. even in typing paths is not present

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants