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

Using multiple map interactions #751

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

robinmolen
Copy link
Contributor

Part of open-formulieren/open-forms#2177

This allows users to interact with the map using multiple tools: markers (the interaction that is already being used), circles, polygons and polylines. With the aim to give users more accurately control. Using the new interactions property every tool can be included or excluded separately. By default, only the marker will be available to users (conform the current functionality)

The different tools result in different data. To accommodate this the data of the component has been changed from an array of numbers, to a geoJson object.

All previously existing functionality has been updated to work with this new data format. This includes:

  • The marker being placed using the search input
  • Centering the map onto the placed marker
    To accommodate the polyline and polygon, the center point of a shape is used as the centering point. This changes nothing for the marker and circle shapes
  • Searching the address near to the marker
    This currently also works for the polyline and polygon. Because these shapes consist of multiple points/coordinates, the center point of these shapes is used as the search nearby address coordinates

Copy link

codecov bot commented Dec 11, 2024

Codecov Report

Attention: Patch coverage is 6.66667% with 28 lines in your changes missing coverage. Please review.

Project coverage is 57.83%. Comparing base (e33ecee) to head (2690059).

Files with missing lines Patch % Lines
src/components/Map/index.jsx 3.84% 25 Missing ⚠️
src/formio/components/Map.jsx 0.00% 2 Missing ⚠️
...mponents/FormStepSummary/ComponentValueDisplay.jsx 0.00% 1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (e33ecee) and HEAD (2690059). Click for more details.

HEAD has 1 upload less than BASE
Flag BASE (e33ecee) HEAD (2690059)
2 1
Additional details and impacted files
@@             Coverage Diff             @@
##             main     #751       +/-   ##
===========================================
- Coverage   79.51%   57.83%   -21.68%     
===========================================
  Files         239      233        -6     
  Lines        4979     4352      -627     
  Branches     1351      798      -553     
===========================================
- Hits         3959     2517     -1442     
- Misses        989     1615      +626     
- Partials       31      220      +189     

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

@robinmolen robinmolen marked this pull request as draft December 16, 2024 10:58
@robinmolen
Copy link
Contributor Author

Because this feature will be added after 3.0, this PR is moved to draft.

This PR is still ready to be reviewed, it just shouldn't be merged just yet

Added leaflet-draw and react-leaflet-draw as dependencies. These allow easy user interactions with the leaflet map
…ead of coordinates

The map component now uses and stores geoJson data, instead of coordinates. This means we can display and work with multiple shapes.

One important change is that geoJson saves coordinates as lng-lat, instead of lat-lng
…ponent property

With the new property `interactions` the component can defined the possible map interactions. Currently supporting 'marker', 'polygon', 'polyline' and 'circle'
geoJson doesn't differentiate circles from markers, geoJson sees them both as a Point type. To make sure that circles are saved and drawn properly, we have to manually detect and assign the right Leaflet Marker type.
To make sure that the circle keeps its size, we save its radius as geoJson property
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from 95cf149 to 2690059 Compare December 19, 2024 08:39
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 - Verschillende types kaart-interactie (Point, Polygon en Line)
1 participant