Kaartmateriaal - Verschillende types kaart-interactie (Point, Polygon en Line) #2177
Assignees
Milestone
Comments
joeribekker
added
topic: kaartmateriaal
owner: rotterdam
sprint-14
joeribekker
changed the title
joeribekker
added
owner: haarlemmermeer
sprint-18
|
Besproken met Joeri Diederen. We gaan in het formulier beheer bij het kaartmateriaal veld instellingen toevoegen om de kaart interactie te bepalen. Dit gaat middels radio knoppen, met Point als standaard keuze (hoe het kaartmateriaal veld nu ook werkt). Bij het opslaan van een 'submission' wordt aangegeven wat voor kaart interactie was gebruikt. Hiervoor gebruiken we het geoJson formaat |
7 tasks
robinmolen
added a commit
to open-formulieren/types
that referenced
this issue
Dec 3, 2024
…apComponentSchema
robinmolen
added a commit
to open-formulieren/formio-builder
that referenced
this issue
Dec 3, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 9, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 9, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 9, 2024
robinmolen
added a commit
to open-formulieren/formio-builder
that referenced
this issue
Dec 9, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
Added leaflet-draw and react-leaflet-draw as dependencies. These allow easy user interactions with the leaflet map
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
…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
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
…ponent property With the new property `interactions` the component can defined the possible map interactions. Currently supporting 'marker', 'polygon', 'polyline' and 'circle'
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Dec 10, 2024
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
…tories for map component
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
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
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 21, 2025
…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
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
- moved styling to leaflet specific file - Only apply translations when intl changes - Simplified `updateGeoJsonGeometry` function and removed private API usage
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
- moved styling to leaflet specific file - Only apply translations when intl changes - Simplified `updateGeoJsonGeometry` function and removed private API usage
robinmolen
added a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
Since we persist the leaflet changes in React state, and have to act on state changes, only the shapes from the React state should be shown. Leaflet adds new shapes to its map before calling `onCreated`. If we then save the new shape to state, and show this using `<GeoJSON ... />`, we have two shapes on the exact same spot. This causes weird behavior when you want to remove them using the delete button. Clearing the leaflet map before saving the new shape does ensure only one shape is present. If we then use `<GeoJSON ... />` to show the new shape, the leaflet soft-delete won't work. (Because `<GeoJSON ... />` can't be temporarily hidden, without some extra work) To ensure only one shape is present and to allow soft-deletion, we have two options: - We clear the map every time a new shape is created, and save the new shape to state. Using `<GeoJSON ... />` we show the newly created shape. For the deletion we keep inventory of the soft-delete actions and change the map display accordingly, and persist the changes when confirmed by the user. - We clear the map every time a new shape is created, and save the new shape to state. Using useEffect we add the newly created shape to the leaflet map (this doesn't trigger `onCreated`). With this we can use the complete deletion functionality from leaflet, and only have to persist on `onDeleted`. To keep this component as simple as we can, I've opted for the second option
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
Added leaflet-draw and react-leaflet-draw as dependencies. These allow easy user interactions with the leaflet map
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
…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
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
…ponent property With the new property `interactions` the component can defined the possible map interactions. Currently supporting 'marker', 'polygon' and 'polyline'
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
…tories for map component
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
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
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
…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
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
- moved styling to leaflet specific file - Only apply translations when intl changes - Simplified `updateGeoJsonGeometry` function and removed private API usage
sergei-maertens
pushed a commit
to open-formulieren/open-forms-sdk
that referenced
this issue
Jan 22, 2025
Since we persist the leaflet changes in React state, and have to act on state changes, only the shapes from the React state should be shown. Leaflet adds new shapes to its map before calling `onCreated`. If we then save the new shape to state, and show this using `<GeoJSON ... />`, we have two shapes on the exact same spot. This causes weird behavior when you want to remove them using the delete button. Clearing the leaflet map before saving the new shape does ensure only one shape is present. If we then use `<GeoJSON ... />` to show the new shape, the leaflet soft-delete won't work. (Because `<GeoJSON ... />` can't be temporarily hidden, without some extra work) To ensure only one shape is present and to allow soft-deletion, we have two options: - We clear the map every time a new shape is created, and save the new shape to state. Using `<GeoJSON ... />` we show the newly created shape. For the deletion we keep inventory of the soft-delete actions and change the map display accordingly, and persist the changes when confirmed by the user. - We clear the map every time a new shape is created, and save the new shape to state. Using useEffect we add the newly created shape to the leaflet map (this doesn't trigger `onCreated`). With this we can use the complete deletion functionality from leaflet, and only have to persist on `onDeleted`. To keep this component as simple as we can, I've opted for the second option
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ik wil als bouwer dat de klant gebruik kan maken van de types point, polygon en line voor kaart-interactie, zodat dat de klant verschillende opties voor het aangeven van een locatie tot zijn beschikking heeft.
Oorsprong: Dimpact-Samenwerking/Open-Formulieren#44 RTM: 7.4 Story points: 20 Business value: 3
The text was updated successfully, but these errors were encountered: