Drawing Manager

[apeTrackunit]

Hi everyone,

I'm currently looking for a way to allow users to draw custom polygons on the map using the library. Is there an existing Drawing Manager component, or are there alternative solutions that I can implement for this purpose?

Any insights or guidance on this matter would be greatly appreciated.

Thank you!

[usefulthink]

Are you thinking about interactive drawings or just adding polygons and such to the map?

[apeTrackunit]

I already managed to add polygons into the map but to fully transition from @react-google-maps/api to @vis.gl/react-google-maps, I need to integrate interactive drawing functionality.

[usefulthink]

If you want to use the DrawingManager, it's probably something like this:

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

const DrawingManager = ({ drawingManagerOptions }) => {
  const map = useMap();
  const drawingLib = useMapsLibrary("drawing");
  const [manager, setManager] = useState(null);

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

    const drawingManager = new drawingLib.DrawingManager(drawingManagerOptions);

    setManager(drawingManager);
    drawingManager.setMap(map);

    return () => {
      // remove from map and reset state
      drawingManager.setMap(null);
      setManager(null);
    };
  }, [map, drawingLib]);

  useEffect(() => {
    if (!drawingManager) return;
    
    // setup event-handlers etc
  }, [drawingManager]);
};

[usefulthink]

the interesting question here is how to best integrate the created items with whatever state-management you're using. I'll have to have a look into this myself, I'm not too familiar with the drawing-manager. That would definitely be worthy to become one of our more prominent examples...

[apeTrackunit]

Thank you, it works almost perfectly. The only thing I needed to change was setting drawingManagerOptions. It complained when it was used as a parameter, but you can use drawingManager.setOptions(drawingManagerOptions);, and that works well.

[usefulthink]

bonus points if you make an extra effect that calls .setOptions() whenever the options prop changes :D

[apeTrackunit]

Of course, I automatically added the drawingManagerOptions into dependencies of the useEffect 👌