search

ARGA-Genomes / arga-web

Monorepo for ARGA web components and API wrappers
Mozilla Public License 2.0
1 stars 0 forks source link

Add leaflet.draw tool to map - allow user to select and filter on artibary area #19

Closed nickdos closed 2 years ago

nickdos commented 2 years ago

https://www.npmjs.com/package/react-leaflet-draw

Similar to how biocache allows this on both https://biocache.ala.org.au/search#tab_spatialSearch and on map tab or results page.

nickdos commented 2 years ago

Branch created for issue: https://github.com/ARGA-Genomes/arga-web/tree/issue-19

nickdos commented 2 years ago

Got a working version on the branch but have run into a blocker, where the leaflet.draw shape is added to the same map.layerContainer (from map context) as the data layer (polygons from SOLR heatmap). This causes a problem when the user pans or zooms, as the heatmap layer is re-rendered and are then drawn ontop of the draw shape layer. This results in onClick events triggering the popups for the grids and not the shape layer, as intended.

This is due to the way the react-leaflet-draw code adds the shape layer to the map, which is via the map context.

Chris G suggests trying the leaflet-geoman plugin instead, which has a react wrapper as well.

Fixed it by attaching the SOLR heatmap data layer into its own pane, which no longer conflicts with the overlay pane used by the draw tool.

nickdos commented 2 years ago

Done. Deployed to test site .