I have a problem with using a group of polygons generated by google maps documentation and changing the fillColor for each one individually, using typescript, bootstrap library for showing the form component and other elements, the next code is an example of mapComponent.tsx itself:
import React, {
useEffect,
useRef,
useState
} from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import {
useForm,
SubmitHandler
} from 'react-hook-form';
import {
Modal,
Form,
Button
} from 'react-bootstrap';
that's the type used for react-hook-form:
interface Inputs {
color: string
colorRequired: string
name: string
nameRequired: string
}
const MyComponent = ({
center,
zoom,
onIdle,
handleData,
style,
children
}: {
center: google.maps.LatLngLiteral,
zoom: number,
onIdle: () => void,
handleData: (myColor: string) => string
style: any,
children: MapProps['children'],
}) => {
const [show, setShow] = useState<boolean>(false);
const toggleShow = () => setShow(!show);
const [jsonPolygons, setJsonPolygons] = useState<google.maps.Polygon[]>([]);
const {
register,
handleSubmit,
formState: { errors },
reset
} = useForm();
const onSubmit: SubmitHandler = (data) => {
console.log(data);
console.log(data.color, data.name);
setColor(data.color);
reset({
color: '',
name: ''
})
}
useEffect(() => {
const Map: google.maps.Map | null | undefined = new google.maps.Map(ref.current, {
center,
zoom,
})
console.log('this is data: ', polygonData);
polygonData.map((polygon, index) => {
console.log('polygon data value is: ', polygon);
const newPolygon2 = new google.maps.Polygon({
paths: polygon.paths,
fillColor: polygon.fillColor,
strokeWeight: 2
})
newPolygon2.setMap(Map);
jsonPolygons.push(newPolygon2);
const onJsonPolygonClick = (event: google.maps.MapMouseEvent) => {
console.log('json polygon is clicked: ', event, polygon);
}
newPolygon2.addListener('click', onJsonPolygonClick);
})
console.log('array of json polygons: ', jsonPolygons);
const onMapClick = (e: google.maps.MapMouseEvent) => {
const lat = e.latLng?.lat() || 0;
const lng = e.latLng?.lng() || 0;
console.log('the map is clicked', lat, lng);
}
Map.addListener('click', onMapClick);
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.POLYGON,
]
},
map: Map
})
const onPolygonComplete = (polygon: google.maps.Polygon) => {
console.log('this is the polygon: ', polygon);
toggleShow();
const newDrawerPolygon = new google.maps.Polygon({
paths: polygon.getPaths(),
fillColor: color,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: .8
})
newDrawerPolygon.setMap(Map);
setJsonPolygons([newDrawerPolygon, ...jsonPolygons]);
console.log('the color is: ', color);
newDrawerPolygon.setOptions({
fillColor: color
})
console.log('array of json polygons from inside onPolygonComplete: ', jsonPolygons);
const onPolygonClick = (polygon: google.maps.Polygon) => {
console.log('the polygon is clicked', polygon);
}
google.maps.event.addListener(newDrawerPolygon, 'click', onPolygonClick);
newDrawerPolygon.addListener('click', onPolygonClick)
}
google.maps.event.addListener(drawingManager, 'polygoncomplete', onPolygonComplete);
}, [])
return (
<div ref={ref} id='map' className='map-mapComponent'>
<Modal show={show} onHide={toggleShow}>
<Modal.Header closeButton>
<Modal.Title></Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={handleSubmit(onSubmit)} className='form'>
<label htmlFor='color' className='color-lbl'>Color: </label>
<input
className='color'
id='color'
type='text'
placeholder='Insert Color'
{...register('color', { required: true })} />
{errors.color && <span>color is required</span>}
<label htmlFor='name' className='name-lbl'>name: </label>
<input
className='name'
id='name'
type='text'
placeholder='Insert Name'
{...register('name', { required: true })} />
{errors.name && <span>name is required</span>}
<Button type="submit"
className="sub-btn"
>Change</Button>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={toggleShow}>
Close
</Button>
<Button variant="primary" onClick={toggleShow}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</div >
)
}
the question is, how can I change the color of created polygon by drawing manager, using the result from react-bootstrap form, without losing the previous polygon or the page reloads? Do you have any other ideas about doing that?
