Investigate Draw Polygon filter library

[HollyJoyPhillips]

Summary: We will be using a 'Draw your area' map feature for the SMB app so the initial task is to investigate possible libraries that we could use and that meet the following criteria:

• Should be in current development
• Should be well supported
• Should be lightweight
• The code quality should be of a good standard
• Should support LAT/LONG

If you cannot find a library that meets the above criteria, then the task is to POC creating a Draw Polygon filter component

This is the type of behaviour we are looking for: https://www.npmjs.com/package/react-google-map-draw-filter
However, this library is not suitable as it has not been in development for 3 years.

[nphivu414]

Hi @willmcvay , @HollyJoyPhillips , @tanphamhaiduong
This is the demo for Google Map Draw Polygon Filter:
https://codesandbox.io/s/github/nphivu414/react-google-map-polygon-filter

I used google-map-react to render the map and Google Map's internal APIs to draw the polygon then filter all markers inside. I also customized the functions to make it looks like the library that Holly mentioned above: https://www.npmjs.com/package/react-google-map-draw-filter

This demo still has some issues about updating filtered markers after resizing the polygon but I think its ok for you to review and check if this approach is good or not. I can improve and fix those issues later.

google-map-react: https://www.npmjs.com/package/google-map-react
Google Map Drawing APIs: https://developers.google.com/maps/documentation/javascript/drawinglayer

[nphivu414]

Hi @willmcvay , @HollyJoyPhillips
After discussing with @tanphamhaiduong about the above solution, I confirm that we can use the existing Map component from Elements package to draw polygons and filter markers. We won't need to install any new 3rd lib to do this task.