From 062c3826e75f67f3a3eea11ae10d61d40217a4ef Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Wed, 11 Dec 2024 12:50:26 +0100 Subject: [PATCH] :sparkles: [open-formulieren/open-forms#2177] Creating and drawing circles 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 --- src/components/Map/index.jsx | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx index 7134ff53d..63930bf5e 100644 --- a/src/components/Map/index.jsx +++ b/src/components/Map/index.jsx @@ -97,7 +97,13 @@ const LeaftletMap = ({ const className = getBEMClassName('leaflet-map', modifiers); const onFeatureCreate = event => { - onGeoJsonFeatureSet(event.layer.toGeoJSON()); + const json = event.layer.toGeoJSON(); + // GeoJson doesn't differentiate circles from markers. + // So when we create a circle, we have to add its features manually + if (event.layer instanceof Leaflet.Circle) { + json.properties.radius = event.layer.getRadius(); + } + onGeoJsonFeatureSet(json); }; const onSearchMarkerSet = event => { @@ -111,7 +117,20 @@ const LeaftletMap = ({ // Remove the old layers and add the new one. // This limits the amount of features to 1 featureGroupRef.current?.clearLayers(); - featureGroupRef.current?.addLayer(Leaflet.geoJSON(geoJsonFeature)); + featureGroupRef.current?.addLayer( + Leaflet.geoJSON(geoJsonFeature, { + pointToLayer: (feature, latlng) => { + // GeoJson isn't known with circles. So when draw a Point type, + // we need to manually create a marker or a circle. + // Otherwise, it would always be a marker. + if (feature.properties.radius) { + return new Leaflet.Circle(latlng, feature.properties.radius); + } else { + return new Leaflet.Marker(latlng); + } + }, + }) + ); }); return ( @@ -183,7 +202,10 @@ const LeaftletMap = ({ LeaftletMap.propTypes = { geoJsonFeature: PropTypes.shape({ type: PropTypes.oneOf(['Feature']).isRequired, - properties: PropTypes.object, + properties: PropTypes.shape({ + // This should only be used for Point geometry that represents a circle + radius: PropTypes.number, + }), geometry: PropTypes.oneOfType([ PropTypes.shape({ type: PropTypes.oneOf(['Point']).isRequired,