From 2a426903889f939aee0fcd67a12a99774f4f9b7f Mon Sep 17 00:00:00 2001 From: Paul Chavard Date: Thu, 24 Feb 2022 16:20:17 +0000 Subject: [PATCH] fix(carto): show map UI before loading map styles --- .eslintrc.js | 3 ++- .../MapEditor/components/AddressInput.tsx | 10 +++------- .../MapEditor/components/DrawLayer.tsx | 15 ++++++++++++++- .../MapEditor/components/PointInput.tsx | 18 ++++++------------ app/javascript/components/MapEditor/index.tsx | 19 ++++++------------- .../MapReader/components/GeoJSONLayer.tsx | 14 +++++++++++++- .../components/shared/maplibre/MapLibre.tsx | 6 +----- 7 files changed, 45 insertions(+), 40 deletions(-) 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} ); }