diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx index 82849d24..ffbbe101 100644 --- a/src/app/[locale]/incident/add/components/MapDialog.tsx +++ b/src/app/[locale]/incident/add/components/MapDialog.tsx @@ -104,13 +104,13 @@ const MapDialog = ({ singular: field?.meta.language.objectTypeSingular || t('object'), plural: field?.meta.language.objectTypePlural || t('objects'), }), - [field?.meta.language] + [field?.meta.language, t] ) const [viewState, setViewState] = useState({ latitude: 0, longitude: 0, - zoom: 15, + zoom: 18, bearing: 0, padding: { top: 0, @@ -124,8 +124,8 @@ const MapDialog = ({ // Set viewState coordinates to configured ones useEffect(() => { if (!loading && config) { - setViewState({ - ...viewState, + setViewState((currentState) => ({ + ...currentState, latitude: formState.coordinates[0] === 0 ? config.base.map.center[0] @@ -134,7 +134,7 @@ const MapDialog = ({ formState.coordinates[1] === 0 ? config.base.map.center[1] : formState.coordinates[1], - }) + })) } }, [loading, config, formState.coordinates]) @@ -169,7 +169,7 @@ const MapDialog = ({ setMapFeatures({ ...features, features: featuresWithId }) } - }, [features]) + }, [features, field]) // memoize list of features to show in left sidebar const featureList = useMemo(() => { @@ -185,7 +185,7 @@ const MapDialog = ({ } return [] - }, [formState.selectedFeatures, mapFeatures?.features, dialogMap?.getZoom()]) + }, [config, dialogMap, formState.selectedFeatures, mapFeatures]) // Update position, flyTo position, after this set the marker position const updatePosition = (lat: number, lng: number) => { @@ -391,7 +391,7 @@ const MapDialog = ({ // @ts-ignore canvas?.removeEventListener('keydown', eventHandler) } - }, [dialogMap, onMapReady]) + }, [dialogMap, keyDownHandler, onMapReady]) const assetSelectFeatureLabel = isAssetSelect && field ? field.meta.language.title || field.meta.label : '' @@ -434,7 +434,10 @@ const MapDialog = ({ -
+
{field?.meta.language.title @@ -513,6 +516,7 @@ const MapDialog = ({ -
+
{config && (
{ } if (dialogMap) { - dialogMap.on('moveend', setNewFeatures) + dialogMap.on('load', setNewFeatures) + + dialogMap.on('move', setNewFeatures) } return () => { if (dialogMap) { - dialogMap.off('moveend', setNewFeatures) + dialogMap.off('load', setNewFeatures) + dialogMap.off('move', setNewFeatures) } } - }, [dialogMap]) + }, [config, dialogMap, field]) // If formStoreState.selectedFeatures changes, populate form with selected assets useEffect(() => { @@ -124,7 +127,7 @@ export const AssetSelect = ({ field }: AssetSelectProps) => { } populateFormValueWithAssets() - }, [formStoreState.selectedFeatures]) + }, [config, field, formStoreState.selectedFeatures, setValue]) return (
diff --git a/src/components/ui/AddressCombobox.tsx b/src/components/ui/AddressCombobox.tsx index b0e37670..77d22f12 100644 --- a/src/components/ui/AddressCombobox.tsx +++ b/src/components/ui/AddressCombobox.tsx @@ -85,18 +85,23 @@ export const AddressCombobox = ({ updateForm({ ...formState, address: selectedAddress, - coordinates: [ + coordinates: selectedAddress && [ selectedAddress.coordinates[1], selectedAddress.coordinates[0], ], }) + } else { + updateForm({ + ...formState, + address: selectedAddress, + }) + } - if (updatePosition) { - updatePosition( - selectedAddress.coordinates[1], - selectedAddress.coordinates[0] - ) - } + if (selectedAddress && updatePosition) { + updatePosition( + selectedAddress.coordinates[1], + selectedAddress.coordinates[0] + ) } if (setIsMapSelected) {