fix map zoom hook
This commit is contained in:
parent
53ae5eeb5b
commit
d9f195a74b
4 changed files with 18 additions and 10 deletions
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import { fire } from '@utils';
|
||||
import type { FeatureCollection } from 'geojson';
|
||||
|
||||
import ComboAdresseSearch from '../../ComboAdresseSearch';
|
||||
import { ComboSearchProps } from '~/components/ComboSearch';
|
||||
|
@ -8,7 +9,7 @@ export function AddressInput(
|
|||
comboProps: Pick<
|
||||
ComboSearchProps,
|
||||
'screenReaderInstructions' | 'announceTemplateId'
|
||||
>
|
||||
> & { featureCollection: FeatureCollection }
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
|
@ -21,7 +22,10 @@ export function AddressInput(
|
|||
placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
|
||||
allowInputValues={false}
|
||||
onChange={(_, feature) => {
|
||||
fire(document, 'map:zoom', { feature });
|
||||
fire(document, 'map:zoom', {
|
||||
featureCollection: comboProps.featureCollection,
|
||||
feature
|
||||
});
|
||||
}}
|
||||
{...comboProps}
|
||||
/>
|
||||
|
|
|
@ -138,12 +138,11 @@ function useExternalEvents(
|
|||
|
||||
const onZoomFocus = useCallback(
|
||||
({ detail }) => {
|
||||
const { feature } = detail;
|
||||
if (feature) {
|
||||
flyTo(17, feature.geometry.coordinates);
|
||||
if (detail.feature && detail.featureCollection == featureCollection) {
|
||||
flyTo(17, detail.feature.geometry.coordinates);
|
||||
}
|
||||
},
|
||||
[flyTo]
|
||||
[flyTo, featureCollection]
|
||||
);
|
||||
|
||||
const onFeatureCreate = useCallback(
|
||||
|
|
|
@ -1,9 +1,13 @@
|
|||
import React, { useState, useId } from 'react';
|
||||
import { fire } from '@utils';
|
||||
import type { Feature } from 'geojson';
|
||||
import type { Feature, FeatureCollection } from 'geojson';
|
||||
import CoordinateInput from 'react-coordinate-input';
|
||||
|
||||
export function PointInput() {
|
||||
export function PointInput({
|
||||
featureCollection
|
||||
}: {
|
||||
featureCollection: FeatureCollection;
|
||||
}) {
|
||||
const inputId = useId();
|
||||
const [value, setValue] = useState('');
|
||||
const [feature, setFeature] = useState<Feature | null>(null);
|
||||
|
@ -60,7 +64,7 @@ export function PointInput() {
|
|||
properties: {}
|
||||
};
|
||||
setFeature(feature);
|
||||
fire(document, 'map:zoom', { feature });
|
||||
fire(document, 'map:zoom', { featureCollection, feature });
|
||||
} else {
|
||||
setFeature(null);
|
||||
}
|
||||
|
|
|
@ -50,6 +50,7 @@ export default function MapEditor({
|
|||
|
||||
<ImportFileInput featureCollection={featureCollection} {...actions} />
|
||||
<AddressInput
|
||||
featureCollection={featureCollection}
|
||||
screenReaderInstructions={autocompleteScreenReaderInstructions}
|
||||
announceTemplateId={autocompleteAnnounceTemplateId}
|
||||
/>
|
||||
|
@ -82,7 +83,7 @@ export default function MapEditor({
|
|||
</>
|
||||
) : null}
|
||||
</MapLibre>
|
||||
<PointInput />
|
||||
<PointInput featureCollection={featureCollection} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue