ForFarmTeam/ForFarm
1
0
Fork 0
mirror of https://github.com/ForFarmTeam/ForFarm.git synced 2025-12-19 14:04:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance drawing completion handler to log detailed shape information

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2025-03-13 18:28:23 +07:00
parent 5117f6399b
commit aab347c582
1 changed files with 68 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/components/google-map-with-drawing.tsx
View File

@ -13,14 +13,76 @@ const center = { lat: 13.7563, lng: 100.5018 }; // Example: Bangkok, Thailand
const GoogleMapWithDrawing = () => {
const [map, setMap] = useState<google.maps.Map | null>(null);
// Handles drawing complete
const onDrawingComplete = useCallback((overlay: google.maps.drawing.OverlayCompleteEvent) => {
// handles drawing complete
const onDrawingComplete = useCallback(
(overlay: google.maps.drawing.OverlayCompleteEvent) => {
console.log("Drawing complete:", overlay);
}, []);
const shape = overlay.overlay;
// check the shape of the drawing
if (shape instanceof google.maps.Polygon) {
console.log("Polygon detected:", shape);
const path = shape.getPath();
const coordinates = path.getArray().map((latLng) => ({
lat: latLng.lat(),
lng: latLng.lng(),
}));
console.log("Polygon coordinates:", coordinates);
} else if (shape instanceof google.maps.Rectangle) {
console.log("Rectangle detected:", shape);
const bounds = shape.getBounds();
if (bounds) {
const northEast = bounds.getNorthEast();
const southWest = bounds.getSouthWest();
console.log("Rectangle coordinates:", {
northEast: { lat: northEast.lat(), lng: northEast.lng() },
southWest: { lat: southWest.lat(), lng: southWest.lng() },
});
} else {
console.log("Bounds are null, rectangle not fully drawn yet.");
}
} else if (shape instanceof google.maps.Circle) {
console.log("Circle detected:", shape);
const center = shape.getCenter();
const radius = shape.getRadius();
if (center) {
console.log("Circle center:", {
lat: center.lat(),
lng: center.lng(),
radius: radius, // circle's radius in meters
});
} else {
console.log("Circle center is null.");
}
} else if (shape instanceof google.maps.Polyline) {
console.log("Polyline detected:", shape);
const path = shape.getPath();
const coordinates = path.getArray().map((latLng) => ({
lat: latLng.lat(),
lng: latLng.lng(),
}));
console.log("Polyline coordinates:", coordinates);
}
// in case of unrecognized shape types
else {
console.log("Unknown shape detected:", shape);
}
},
[]
);
return (
<LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!} libraries={["drawing"]}>
<GoogleMap mapContainerStyle={containerStyle} center={center} zoom={10} onLoad={(map) => setMap(map)}>
<LoadScript
googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
libraries={["drawing"]}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={(map) => setMap(map)}
>
{map && (
<DrawingManager
onOverlayComplete={onDrawingComplete}