Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

➕ [#2176] added gesture handling for leaflet #519

Merged
merged 2 commits into from
Aug 4, 2023

Conversation

bart-maykin
Copy link
Contributor

Fixes open-formulieren/open-forms#2176

  • Added leaflet-gesture-handling
  • Implemented leaflet-gesture-handling
  • removed zoomlevel as a argument from the setView in the MapView component

@bart-maykin bart-maykin force-pushed the feature/2176-navigate-within-map branch from 1c12426 to 022d2f5 Compare July 28, 2023 17:27
@bart-maykin bart-maykin marked this pull request as ready for review July 28, 2023 17:28
@bart-maykin
Copy link
Contributor Author

Jest tests seem to be failing because Leaflet (L) is not defined in the index.js file.

Screenshot from 2023-07-28 19-29-03

@bart-maykin bart-maykin force-pushed the feature/2176-navigate-within-map branch from 022d2f5 to a25bfd2 Compare August 1, 2023 15:31
Copy link
Member

@sergei-maertens sergei-maertens left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some more general remarks:

src/components/Map/index.js Outdated Show resolved Hide resolved
src/components/Map/index.js Outdated Show resolved Hide resolved
src/scss/components/_leaflet-map.scss Outdated Show resolved Hide resolved
@bart-maykin bart-maykin force-pushed the feature/2176-navigate-within-map branch 2 times, most recently from 5a5970e to 22eec73 Compare August 4, 2023 07:38
@bart-maykin
Copy link
Contributor Author

Some more general remarks:

* [Wrong default language - WCAG 3.1.2 failure elmarquis/Leaflet.GestureHandling#86](https://github.com/elmarquis/Leaflet.GestureHandling/issues/86) -> when switching the language in storybook, I'm only seeing English messages and never Dutch, that's wrong behaviour

* There's not a lot of activity in the library/repository, so this is a bit of a risk thinking if it works well, we can accept the risk

* [two finger drag / page scroll prevention and glitchy panning elmarquis/Leaflet.GestureHandling#65](https://github.com/elmarquis/Leaflet.GestureHandling/issues/65) is concerning, have you seen similar behaviour?
  • I added react-intel translations which seem to fix the translation problem.
  • I looked at the video capture that he provided and from what I can see we are not running into the same problems. But maybe it would be good if you double check for me with the storybook build in this pr.

@bart-maykin bart-maykin force-pushed the feature/2176-navigate-within-map branch from 22eec73 to a2a2220 Compare August 4, 2023 07:45
@bart-maykin bart-maykin force-pushed the feature/2176-navigate-within-map branch from a2a2220 to 3add74e Compare August 4, 2023 07:50
@codecov
Copy link

codecov bot commented Aug 4, 2023

Codecov Report

Patch coverage: 100.00% and project coverage change: +0.03% 🎉

Comparison is base (ab5537c) 46.56% compared to head (9fdbe18) 46.59%.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #519      +/-   ##
==========================================
+ Coverage   46.56%   46.59%   +0.03%     
==========================================
  Files         198      198              
  Lines        3518     3520       +2     
  Branches      632      632              
==========================================
+ Hits         1638     1640       +2     
  Misses       1716     1716              
  Partials      164      164              
Files Changed Coverage Δ
src/components/Map/index.js 17.33% <100.00%> (+1.11%) ⬆️
src/map/index.js 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

If we were to use the Map outside of React, then the gesture
handling is available and easily enabled.

This also refactors enabling the handling directly in the map container
rather than relying on a useEffect call.
@sergei-maertens
Copy link
Member

Cleaned up a little bit to register the handler globally and enable it via option so we don't need the component with side-effect. Tested on mobile with storybook and the panning/dragging is smooth for me too.

@sergei-maertens sergei-maertens merged commit d3bafc7 into main Aug 4, 2023
@sergei-maertens sergei-maertens deleted the feature/2176-navigate-within-map branch August 4, 2023 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Kaartmateriaal - Navigeren binnen het kaartmateriaal
2 participants