We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
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
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.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
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:
I had this issue previously with the component however, there I`ve managed to solve this issue with an identical approach
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.
The text was updated successfully, but these errors were encountered: