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

Open
wants to merge 14 commits into
base: main
Choose a base branch
from

Conversation

robinmolen
Copy link
Contributor

@robinmolen robinmolen commented Dec 11, 2024

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), 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 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 93.10345% with 4 lines in your changes missing coverage. Please review.

Project coverage is 81.87%. Comparing base (d4bceb8) to head (c206b88).
Report is 17 commits behind head on main.

Files with missing lines Patch % Lines
src/formio/components/Map.jsx 57.14% 3 Missing ⚠️
src/components/Map/index.jsx 97.36% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #751      +/-   ##
==========================================
- Coverage   81.92%   81.87%   -0.06%     
==========================================
  Files         238      239       +1     
  Lines        4853     4872      +19     
  Branches     1310     1318       +8     
==========================================
+ Hits         3976     3989      +13     
- Misses        841      847       +6     
  Partials       36       36              
Flag Coverage Δ
storybook 74.64% <93.10%> (-0.05%) ⬇️
vitest 60.12% <19.14%> (-0.17%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ 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

@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from 95cf149 to 2690059 Compare December 19, 2024 08:39
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from 2690059 to 56151ac Compare January 6, 2025 16:15
@robinmolen robinmolen marked this pull request as ready for review January 6, 2025 16:21
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch 4 times, most recently from bb93058 to 6a5999f Compare January 13, 2025 14:49
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' and 'polyline'
Due to some formio magic, the `resetValue` flag is needed when performing the `setValue` call. Without this flag it isn't allowed to set a field value to `null` or `undefined`.We also need to use the value `null`, instead of `undefined`. This because setting the value to `undefined` isn't reflected as a value change (what we need, to re-render the component).
This is described in node_modules/formiojs/components/_classes/component/Component.js:2524
…eoJson geometry

Because we won't support circle shapes (due to geoJson and the backend registrations not supporting this type), we no longer need the geoJson feature `properties`.

Because we don't use `properties` for anything else, it doesn't make sense to save it
@robinmolen robinmolen force-pushed the feature/2177-map-interactions branch from 6a5999f to c206b88 Compare January 14, 2025 15:39
Copy link

codecov bot commented Jan 14, 2025

Bundle Report

Changes will increase total bundle size by 77.39kB (1.65%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
@open-formulieren/sdk-OpenForms-umd 4.78MB 77.39kB (1.65%) ⬆️

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