diff --git a/adhocracy4/maps_react/static/a4maps_react/GeoJsonMarker.js b/adhocracy4/maps_react/static/a4maps_react/GeoJsonMarker.js index f560a537b..be8909682 100644 --- a/adhocracy4/maps_react/static/a4maps_react/GeoJsonMarker.js +++ b/adhocracy4/maps_react/static/a4maps_react/GeoJsonMarker.js @@ -29,6 +29,9 @@ const createGeoJsonMarker = ({ feature, ...props }, context) => { const updateGeoJsonMarker = (instance, { feature, ...props }, prevProps) => { const coords = [...feature.geometry.coordinates].reverse() + if (props.icon !== prevProps.icon) { + instance.setIcon(props.icon) + } instance.setLatLng(coords) } diff --git a/changelog/8447.md b/changelog/8447.md new file mode 100644 index 000000000..d4a96d232 --- /dev/null +++ b/changelog/8447.md @@ -0,0 +1,2 @@ +### Changes +- fixed a bug where the GeoJsonMarker would not update if passing new props for `icon` diff --git a/docs/react_maps.md b/docs/react_maps.md index 58e402b5a..bdca53440 100644 --- a/docs/react_maps.md +++ b/docs/react_maps.md @@ -162,6 +162,13 @@ marker with a custom icon on the map. * **...rest**: [Any other option](https://leafletjs.com/reference.html#marker) that you could pass to L.marker +### Change the icon + +If you find yourself in a situation where you want to change the icon, for example +when you want to highlight a marker that's currently active, you can pass `GeoJsonMarker` +a `icon` prop. You can generate that by using the helper function mentioned below +or call `L.icon` yourself to create an icon instance. + ### makeIcon You can find this utility function in `GeoJsonMarker.js`. It creates and returns