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 :)

[NitayMG]

We are waiting for it :)

[usefulthink]

They're already there if you need them, it is just that you have to copy them to your own code, besides that there isn't really a difference.

Let me know which features are missing from the components provided in the examples.

[NitayMG]

They're already there if you need them, it is just that you have to copy them to your own code, besides that there isn't really a difference.

Let me know which features are missing from the components provided in the examples.

It will easier to just import them from the library and use them as the AdvencedMarker as well
for example, the Polyline needs to get an array of coordinates so that I can show it to user what was the history of his marker

[kumarharsh88]

How do I use AdvancedMarkers to create polygons? Please provide an example of creating a polygon.

[NitayMG]

You can't....I'm still waiting that they will add to this library: '@vis.gl/react-google-maps' the Polyline object instead of making one by myself.