Map viewer component - Map render

[wzjoriv]

Component to render map viewer

Useful link:

• https://leafletjs.com/examples/overlays/
• https://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example
• https://github.com/fredj/openlayers-heatmap/blob/master/lib/OpenLayers/Renderer/Heatmap.js
• https://geoadmin.github.io/ol3/apidoc/ol.layer.Heatmap.html
• meter to pixel conversion: https://wiki.openstreetmap.org/wiki/Zoom_levels
• React map component: https://stackoverflow.com/questions/68305833/how-to-overlay-a-div-on-a-react-leaflet-map
• Canvas image to url: https://stackoverflow.com/questions/934012/get-image-data-url-in-javascript

[wzjoriv]

Maximum search radius will be set to 50,000 from longitude and latitude of center in the backend

[wzjoriv]

Ideas to execute redraw:

1. Have a global state for center longitude and latitude. Use a hook effects in map viewer component to redraw when they change. Search bar component and potentially mouse movement will set the states