diff --git a/.eslintrc.js b/.eslintrc.js
index cc5432980..1dee4619e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -57,7 +57,8 @@ module.exports = {
'prettier/prettier': 'error',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'error',
- '@typescript-eslint/no-explicit-any': 'error'
+ '@typescript-eslint/no-explicit-any': 'error',
+ '@typescript-eslint/no-unused-vars': 'error'
}
}
]
diff --git a/app/javascript/components/MapEditor/components/AddressInput.tsx b/app/javascript/components/MapEditor/components/AddressInput.tsx
index 9becf7034..f1745d97a 100644
--- a/app/javascript/components/MapEditor/components/AddressInput.tsx
+++ b/app/javascript/components/MapEditor/components/AddressInput.tsx
@@ -1,12 +1,9 @@
import React from 'react';
-import type { Point } from 'geojson';
+import { fire } from '@utils';
import ComboAdresseSearch from '../../ComboAdresseSearch';
-import { useFlyTo } from '../../shared/maplibre/hooks';
export function AddressInput() {
- const flyTo = useFlyTo();
-
return (
{
- const geometry = result?.geometry as Point;
- flyTo(17, geometry.coordinates as [number, number]);
+ onChange={(_, feature) => {
+ fire(document, 'map:zoom', { feature });
}}
/>
diff --git a/app/javascript/components/MapEditor/components/DrawLayer.tsx b/app/javascript/components/MapEditor/components/DrawLayer.tsx
index 9bdeb3a2a..ca0f24e53 100644
--- a/app/javascript/components/MapEditor/components/DrawLayer.tsx
+++ b/app/javascript/components/MapEditor/components/DrawLayer.tsx
@@ -7,7 +7,8 @@ import { useMapLibre } from '../../shared/maplibre/MapLibre';
import {
useFitBounds,
useEvent,
- useMapEvent
+ useMapEvent,
+ useFlyTo
} from '../../shared/maplibre/hooks';
import {
filterFeatureCollection,
@@ -116,6 +117,7 @@ function useExternalEvents(
}
) {
const fitBounds = useFitBounds();
+ const flyTo = useFlyTo();
const onFeatureFocus = useCallback(
({ detail }) => {
@@ -132,6 +134,16 @@ function useExternalEvents(
[featureCollection, fitBounds]
);
+ const onZoomFocus = useCallback(
+ ({ detail }) => {
+ const { feature } = detail;
+ if (feature) {
+ flyTo(17, feature.geometry.coordinates);
+ }
+ },
+ [flyTo]
+ );
+
const onFeatureCreate = useCallback(
({ detail }) => {
const { geometry, properties } = detail;
@@ -181,6 +193,7 @@ function useExternalEvents(
useEvent('map:feature:create', onFeatureCreate);
useEvent('map:feature:update', onFeatureUpdate);
useEvent('map:feature:delete', onFeatureDelete);
+ useEvent('map:zoom', onZoomFocus);
}
const translations = [
diff --git a/app/javascript/components/MapEditor/components/PointInput.tsx b/app/javascript/components/MapEditor/components/PointInput.tsx
index 22a4f9ea0..878235f36 100644
--- a/app/javascript/components/MapEditor/components/PointInput.tsx
+++ b/app/javascript/components/MapEditor/components/PointInput.tsx
@@ -5,11 +5,7 @@ import { PlusIcon, LocationMarkerIcon } from '@heroicons/react/outline';
import { useId } from '@reach/auto-id';
import CoordinateInput from 'react-coordinate-input';
-import { useFlyTo } from '../../shared/maplibre/hooks';
-
export function PointInput() {
- const flyTo = useFlyTo();
-
const inputId = useId();
const [value, setValue] = useState('');
const [feature, setFeature] = useState(null);
@@ -60,15 +56,13 @@ export function PointInput() {
setValue(value);
if (dd.length) {
const coordinates: [number, number] = [dd[1], dd[0]];
- setFeature({
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates
- },
+ const feature = {
+ type: 'Feature' as const,
+ geometry: { type: 'Point' as const, coordinates },
properties: {}
- });
- flyTo(17, coordinates);
+ };
+ setFeature(feature);
+ fire(document, 'map:zoom', { feature });
} else {
setFeature(null);
}
diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx
index a84094835..a5d81741e 100644
--- a/app/javascript/components/MapEditor/index.tsx
+++ b/app/javascript/components/MapEditor/index.tsx
@@ -46,19 +46,11 @@ export default function MapEditor({
{error && }
-
-
-
- >
- }
- footer={}
- >
+
+
+
+
+
) : null}
+
>
);
}
diff --git a/app/javascript/components/MapReader/components/GeoJSONLayer.tsx b/app/javascript/components/MapReader/components/GeoJSONLayer.tsx
index f7161d00d..821f709ff 100644
--- a/app/javascript/components/MapReader/components/GeoJSONLayer.tsx
+++ b/app/javascript/components/MapReader/components/GeoJSONLayer.tsx
@@ -7,7 +7,8 @@ import {
useFitBounds,
useEvent,
EventHandler,
- useMapEvent
+ useMapEvent,
+ useFlyTo
} from '../../shared/maplibre/hooks';
import {
filterFeatureCollection,
@@ -99,6 +100,7 @@ export function GeoJSONLayer({
function useExternalEvents(featureCollection: FeatureCollection) {
const fitBounds = useFitBounds();
+ const flyTo = useFlyTo();
const onFeatureFocus = useCallback(
({ detail }) => {
const { id } = detail;
@@ -109,6 +111,15 @@ function useExternalEvents(featureCollection: FeatureCollection) {
},
[featureCollection, fitBounds]
);
+ const onZoomFocus = useCallback(
+ ({ detail }) => {
+ const { feature } = detail;
+ if (feature) {
+ flyTo(17, feature.geometry.coordinates);
+ }
+ },
+ [flyTo]
+ );
useEffect(() => {
fitBounds(featureCollection.bbox as LngLatBoundsLike);
@@ -117,6 +128,7 @@ function useExternalEvents(featureCollection: FeatureCollection) {
}, [fitBounds]);
useEvent('map:feature:focus', onFeatureFocus);
+ useEvent('map:zoom', onZoomFocus);
}
function LineStringLayer({
diff --git a/app/javascript/components/shared/maplibre/MapLibre.tsx b/app/javascript/components/shared/maplibre/MapLibre.tsx
index 2b439abfa..1c29341c3 100644
--- a/app/javascript/components/shared/maplibre/MapLibre.tsx
+++ b/app/javascript/components/shared/maplibre/MapLibre.tsx
@@ -19,8 +19,6 @@ const Context = createContext<{ map?: Map | null }>({});
type MapLibreProps = {
layers: string[];
- header?: ReactNode;
- footer?: ReactNode;
children: ReactNode;
};
@@ -30,7 +28,7 @@ export function useMapLibre() {
return context.map;
}
-export function MapLibre({ children, header, footer, layers }: MapLibreProps) {
+export function MapLibre({ children, layers }: MapLibreProps) {
const isSupported = useMemo(
() => maplibre.supported({ failIfMajorPerformanceCaveat: true }) && !isIE(),
[]
@@ -90,12 +88,10 @@ export function MapLibre({ children, header, footer, layers }: MapLibreProps) {
return (
- {map ? header : null}
{map ? children : null}
- {map ? footer : null}
);
}