Polygons

[kumarharsh88]

There is an AdvancedMarker component, <AdvancedMarker position={{lat: 29.5, lng: -81.2}}> <Pin background={'#0f9d58'} borderColor={'#006425'} glyphColor={'#60d98f'} /> . Similar to this, does a Polygon component exist in @vis.gl/react-google-maps to display and edit polygons on the map, like in the previous Google Maps API?"

[mrMetalWood]

We don't provide exports for those geometries from the library at the moment. However, we do have an example which does implement components like Polygon, Polyline and Circle using this library.

Take a look here:

• Example: https://visgl.github.io/react-google-maps/examples/geometry
• Code: https://github.com/visgl/react-google-maps/blob/main/examples/geometry/src/app.tsx

You can copy & paste the Polygon component to your own code and work with it that way. Hope that helps :)

[kumarharsh88]

Can I provide coordinates like the following example, instead of encoded coordinates, for the Polyline path?
const flightPlanCoordinates = [
// Straight path (initial vertical movement)
{ lng: 77.04392435449219, lat: 28.403890365401665 },
{ lng: 77.04892435449218, lat: 28.405890365401666 },
{ lng: 77.05392435449218, lat: 28.407890365401667 },
{ lng: 77.05892435449217, lat: 28.409890365401668 },

// Begin 90° right turn
{ lng: 77.06, lat: 28.409890365401668 },
{ lng: 77.065, lat: 28.409890365401668 },
{ lng: 77.07, lat: 28.409890365401668 },

// Straight path (horizontal movement after the turn)
{ lng: 77.075, lat: 28.409890365401668 },
{ lng: 77.08, lat: 28.409890365401668 },
{ lng: 77.085, lat: 28.409890365401668 },
];

Can I provide coordinates like the following example, instead of encoded coordinates, for the Polyline path?

javascript
Copy code
const flightPlanCoordinates = [

{ lng: 77.04392435449219, lat: 28.403890365401665 },
{ lng: 77.04892435449218, lat: 28.405890365401666 },
{ lng: 77.05392435449218, lat: 28.407890365401667 },
{ lng: 77.05892435449217, lat: 28.409890365401668 },

];
This should work as long as the library supports passing coordinates as an array of objects with lat and lng properties instead of encoded coordinates.

[mrMetalWood]

Yes, that works. The Google Maps Polyline also supports {lat: 77, lng: 28} format for coordinates. https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions.path

So it should "just" work when you try something like this:

 <Polyline
     path: <Your Coordinates array>
     strokeWeight={10}
     strokeColor={'#ff22cc88'}
 />

[kumarharsh88]

Yes, it works. Tell me one more thing: is there a Drawing Manager component similar to the one in the previous version of React Google Maps?

[mrMetalWood]

I'm not sure which previous version of "React Google Maps" you are referring to but we do have an example of how to utilize the Drawing Manager with this library.

https://visgl.github.io/react-google-maps/examples/drawing
https://github.com/visgl/react-google-maps/tree/main/examples/drawing

[kumarharsh88]

How do I get the coordinates of a drawn polygon and update them when the polygon is edited?

[mrMetalWood]

This could be a way to do it:

• store the polygon on the overlaycomplete event
• add listener to the polygon to get notified when anything changes
• re-read the current status of the polygon

   let polygon = null;

    google.maps.event.addListener(
      drawingManager,
      'overlaycomplete',
      drawResult => {
        if (drawResult.type === google.maps.drawing.OverlayType.POLYGON) {
          polygon = drawResult.overlay;
          google.maps.event.addListener(polygon, 'mouseup', () => {
            console.log('polygon edit finished', polygon.getPath().getArray());
          });
        }
      }
    );

Note that this code is not fully tested by me, but that would be my approach.

[harshkumar88]

import { forwardRef, useEffect, useState } from "react";
import { useMap, useMapsLibrary } from "@vis.gl/react-google-maps";

export type DrawingManagerProps = {
onPolygonComplete?: (
polygon: google.maps.Polygon,
coordinates?: google.maps.LatLngLiteral[]
) => void;
drawableMode?: boolean; // New prop for toggling drawing mode
};

export const CustomDrawingManager = forwardRef<
google.maps.drawing.DrawingManager | null,
DrawingManagerProps

(({ onPolygonComplete, drawableMode = false }) => {
const map = useMap();
const drawingLibrary = useMapsLibrary("drawing");

const [drawingManager, setDrawingManager] =
useState<google.maps.drawing.DrawingManager | null>(null);
const [createdPolygons, setCreatedPolygons] = useState<google.maps.Polygon[]>(
[]
);

// Expose the drawingManager to the parent through the ref
// useImperativeHandle(ref, () => drawingManager, [drawingManager]);

useEffect(() => {
if (!map || !drawingLibrary) return;

// Initialize the DrawingManager
const manager = new drawingLibrary.DrawingManager({
  map,
  drawingMode: null, // Start without drawing mode
  drawingControl: true, // Always show drawing controls
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [google.maps.drawing.OverlayType.POLYGON],
  },
  polygonOptions: {
    editable: true,
    draggable: true,
  },
});

setDrawingManager(manager);

// Add listener for polygon completion
google.maps.event.addListener(manager, "overlaycomplete", (event: any) => {
  if (event.type === google.maps.drawing.OverlayType.POLYGON) {
    const polygon = event.overlay as google.maps.Polygon;
    setCreatedPolygons((prev) => [...prev, polygon]);
    const coordinates = polygon
      .getPath()
      .getArray()
      .map((latLng) => ({
        lat: latLng.lat(),
        lng: latLng.lng(),
      }));
    onPolygonComplete?.(polygon, coordinates); // Return coordinates on completion
  }
});

// Add listeners for editing existing polygons
const updatePolygonCoordinates = (polygon: google.maps.Polygon) => {
  const coordinates = polygon
    .getPath()
    .getArray()
    .map((latLng) => ({
      lat: latLng.lat(),
      lng: latLng.lng(),
    }));
  onPolygonComplete?.(polygon, coordinates); // Return new coordinates on edit
};

createdPolygons.forEach((polygon) => {
  google.maps.event.addListener(polygon.getPath(), "set_at", () =>
    updatePolygonCoordinates(polygon)
  );
  google.maps.event.addListener(polygon.getPath(), "insert_at", () =>
    updatePolygonCoordinates(polygon)
  );
});

return () => {
  manager.setMap(null);
};

}, [drawingLibrary, map, createdPolygons]);

useEffect(() => {
if (!drawingManager) return;

// Toggle drawing mode and control visibility based on drawableMode
if (drawableMode) {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
  drawingManager.setDrawingMode(null);
} else {
  drawingManager.setDrawingMode(null);
  // Hide drawing control options when drawableMode is false
  drawingManager.setOptions({ drawingControl: false });
}

// Ensure created polygons are editable or not based on drawableMode
createdPolygons.forEach((polygon) =>
  polygon.setOptions({ editable: !drawableMode, draggable: !drawableMode })
);

}, [drawableMode, drawingManager, createdPolygons]);

return null;
});

export default CustomDrawingManager;

This code provides the coordinates of a polygon whenever the polygonComplete function is triggered, typically after a user completes drawing a polygon on a map interface.

Would you like me to refine or expand on this?

[kumarharsh88]

/* eslint-disable complexity */
import {
  forwardRef,
  useContext,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef
} from 'react';

import {GoogleMapsContext, useMapsLibrary} from '@vis.gl/react-google-maps';

import type {Ref} from 'react';

type PolygonEventProps = {
  onClick?: (e: google.maps.MapMouseEvent) => void;
  onDrag?: (e: google.maps.MapMouseEvent) => void;
  onDragStart?: (e: google.maps.MapMouseEvent) => void;
  onDragEnd?: (e: google.maps.MapMouseEvent) => void;
  onMouseOver?: (e: google.maps.MapMouseEvent) => void;
  onMouseOut?: (e: google.maps.MapMouseEvent) => void;
};

type PolygonCustomProps = {
  /**
   * this is an encoded string for the path, will be decoded and used as a path
   */
  encodedPaths?: string[];
};

export type PolygonProps = google.maps.PolygonOptions &
  PolygonEventProps &
  PolygonCustomProps;

export type PolygonRef = Ref<google.maps.Polygon | null>;

function usePolygon(props: PolygonProps) {
  const {
    onClick,
    onDrag,
    onDragStart,
    onDragEnd,
    onMouseOver,
    onMouseOut,
    encodedPaths,
    ...polygonOptions
  } = props;
  // This is here to avoid triggering the useEffect below when the callbacks change (which happen if the user didn't memoize them)
  const callbacks = useRef<Record<string, (e: unknown) => void>>({});
  Object.assign(callbacks.current, {
    onClick,
    onDrag,
    onDragStart,
    onDragEnd,
    onMouseOver,
    onMouseOut
  });

  const geometryLibrary = useMapsLibrary('geometry');

  const polygon = useRef(new google.maps.Polygon()).current;
  // update PolygonOptions (note the dependencies aren't properly checked
  // here, we just assume that setOptions is smart enough to not waste a
  // lot of time updating values that didn't change)
  useMemo(() => {
    polygon.setOptions(polygonOptions);
  }, [polygon, polygonOptions]);

  const map = useContext(GoogleMapsContext)?.map;

  // update the path with the encodedPath
  useMemo(() => {
    if (!encodedPaths || !geometryLibrary) return;
    const paths = encodedPaths.map(path =>
      geometryLibrary.encoding.decodePath(path)
    );
    polygon.setPaths(paths);
  }, [polygon, encodedPaths, geometryLibrary]);

  // create polygon instance and add to the map once the map is available
  useEffect(() => {
    if (!map) {
      if (map === undefined)
        console.error('<Polygon> has to be inside a Map component.');

      return;
    }

    polygon.setMap(map);

    return () => {
      polygon.setMap(null);
    };
  }, [map]);

  // attach and re-attach event-handlers when any of the properties change
  useEffect(() => {
    if (!polygon) return;

    // Add event listeners
    const gme = google.maps.event;
    [
      ['click', 'onClick'],
      ['drag', 'onDrag'],
      ['dragstart', 'onDragStart'],
      ['dragend', 'onDragEnd'],
      ['mouseover', 'onMouseOver'],
      ['mouseout', 'onMouseOut']
    ].forEach(([eventName, eventCallback]) => {
      gme.addListener(polygon, eventName, (e: google.maps.MapMouseEvent) => {
        const callback = callbacks.current[eventCallback];
        if (callback) callback(e);
      });
    });

    return () => {
      gme.clearInstanceListeners(polygon);
    };
  }, [polygon]);

  return polygon;
}

/**
 * Component to render a polygon on a map
 */
export const Polygon = forwardRef((props: PolygonProps, ref: PolygonRef) => {
  const polygon = usePolygon(props);

  useImperativeHandle(ref, () => polygon, []);

  return null;
}); 

Can the created polygon be editable, and can I retrieve the edited coordinates?

[NitayMG]

When Polygon object and Polyline will be in this library:
'@vis.gl/react-google-maps'

[usefulthink]

Given the amount of questions we get about this, we're going to prioritize adding it :)