From 44a1c5b7e62e83af4d670e011f5998b9b8aedfef Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 10:24:51 +0300 Subject: Update all .tsx files and remove unused --- src/Map.tsx | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/Map.tsx (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx new file mode 100644 index 0000000..c39e1ac --- /dev/null +++ b/src/Map.tsx @@ -0,0 +1,65 @@ +import React, { Fragment, useState } from "react"; +import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl"; + +import { + MAPBOX_ACCESS_TOKEN, + IMAGE_COORDINATES, + IMAGES_BASE_URL +} from "./config"; + +import "mapbox-gl/dist/mapbox-gl.css"; + +const Mapbox = ReactMapboxGl({ + accessToken: MAPBOX_ACCESS_TOKEN, + minZoom: 5, + maxZoom: 10, + hash: false +}); + +function Map(props) { + const [center] = useState([35, 31.9]); + const [zoom] = useState([6.3]); + + return ( + + {props.images.map((img, i) => { + const id = `radar-280-${i}`; + return ( + + + + + ); + })} + + ); +} + +export default Map; -- cgit v1.3.1 From f5f164fbc0fc6e1670ee853db55c6622a1a86efb Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 17:31:26 +0300 Subject: Initial Map conversion --- src/Map.tsx | 117 +++++++++++++++++++++++++++++++++++------------------------- 1 file changed, 69 insertions(+), 48 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index c39e1ac..011d5c8 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -1,5 +1,6 @@ -import React, { Fragment, useState } from "react"; -import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl"; +import React, { Fragment, useState, useEffect, useRef } from "react"; +// @ts-ignore +import { mapboxgl, LngLatLike } from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax import { MAPBOX_ACCESS_TOKEN, @@ -9,57 +10,77 @@ import { import "mapbox-gl/dist/mapbox-gl.css"; -const Mapbox = ReactMapboxGl({ - accessToken: MAPBOX_ACCESS_TOKEN, - minZoom: 5, - maxZoom: 10, - hash: false -}); +interface MapProps { + slider: number, + images: string[], +} -function Map(props) { - const [center] = useState([35, 31.9]); +function Map({ slider, images }: MapProps) { + const mapContainer = useRef(null); + const map = useRef(null); + const [center] = useState([35, 31.9]); const [zoom] = useState([6.3]); + useEffect(() => { + if (map.current) return; // initialize map only once + map.current = new mapboxgl({ + accessToken: MAPBOX_ACCESS_TOKEN, + container: mapContainer.current, + style: 'mapbox://styles/mapbox/streets-v11', + center, + zoom, + minZoom: 5, + maxZoom: 10, + hash: false, + }); + }); + return ( - - {props.images.map((img, i) => { - const id = `radar-280-${i}`; - return ( - - - - - ); - })} - +
+
+
); + + // return ( + // + // {images.map((img, i) => { + // const id = `radar-280-${i}`; + // return ( + // + // {/* + // */} + // + // ); + // })} + // + // ); } export default Map; -- cgit v1.3.1 From 3fc385b31671d5f84c066c2c6a567bb68a83a8b7 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 17:40:28 +0300 Subject: Mapbox base layer and loading works --- src/Map.tsx | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 011d5c8..76b1f11 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -1,6 +1,6 @@ -import React, { Fragment, useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef } from "react"; // @ts-ignore -import { mapboxgl, LngLatLike } from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax +import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax import { MAPBOX_ACCESS_TOKEN, @@ -18,15 +18,15 @@ interface MapProps { function Map({ slider, images }: MapProps) { const mapContainer = useRef(null); const map = useRef(null); - const [center] = useState([35, 31.9]); + const [center] = useState([35, 31.9]); const [zoom] = useState([6.3]); useEffect(() => { if (map.current) return; // initialize map only once - map.current = new mapboxgl({ + map.current = new mapboxgl.Map({ accessToken: MAPBOX_ACCESS_TOKEN, container: mapContainer.current, - style: 'mapbox://styles/mapbox/streets-v11', + style: "mapbox://styles/mapbox/dark-v9", center, zoom, minZoom: 5, @@ -37,20 +37,15 @@ function Map({ slider, images }: MapProps) { return (
-
+
); // return ( - // + // // {images.map((img, i) => { // const id = `radar-280-${i}`; // return ( -- cgit v1.3.1 From a93324379ae49cfb1a6e53dc6ce5ff77c41e908d Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Mon, 29 Aug 2022 17:45:00 +0300 Subject: Store lng, lat and zoom state, fix ref type --- src/Map.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 76b1f11..032b6dd 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -17,9 +17,10 @@ interface MapProps { function Map({ slider, images }: MapProps) { const mapContainer = useRef(null); - const map = useRef(null); - const [center] = useState([35, 31.9]); - const [zoom] = useState([6.3]); + const map = useRef(null); + const [lng, setLng] = useState(35); + const [lat, setLat] = useState(31.9); + const [zoom, setZoom] = useState(6.3); useEffect(() => { if (map.current) return; // initialize map only once @@ -27,14 +28,23 @@ function Map({ slider, images }: MapProps) { accessToken: MAPBOX_ACCESS_TOKEN, container: mapContainer.current, style: "mapbox://styles/mapbox/dark-v9", - center, - zoom, + center: [lng, lat], + zoom: zoom, minZoom: 5, maxZoom: 10, hash: false, }); }); + useEffect(() => { + if (!map.current) return; // wait for map to initialize + map.current.on('move', () => { + setLng(map.current.getCenter().lng.toFixed(4)); + setLat(map.current.getCenter().lat.toFixed(4)); + setZoom(map.current.getZoom().toFixed(2)); + }); + }); + return (
Date: Tue, 30 Aug 2022 09:13:37 +0300 Subject: WIP --- src/Map.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 032b6dd..62bebb2 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -22,6 +22,8 @@ function Map({ slider, images }: MapProps) { const [lat, setLat] = useState(31.9); const [zoom, setZoom] = useState(6.3); + const prevImages = useRef({ images }).current; + useEffect(() => { if (map.current) return; // initialize map only once map.current = new mapboxgl.Map({ @@ -45,6 +47,11 @@ function Map({ slider, images }: MapProps) { }); }); + useEffect(() => { + // handle layer updates + console.log(images) + }, [images]); + return (
Date: Thu, 1 Sep 2022 09:31:33 +0300 Subject: Fix default exports --- src/Datetime.tsx | 4 +--- src/Geshem.test.tsx | 2 +- src/Geshem.tsx | 12 +++++------- src/Map.tsx | 7 ++----- src/Slider.tsx | 4 +--- src/index.tsx | 2 +- 6 files changed, 11 insertions(+), 20 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Datetime.tsx b/src/Datetime.tsx index 84009a7..0a8fbcf 100644 --- a/src/Datetime.tsx +++ b/src/Datetime.tsx @@ -6,7 +6,7 @@ interface DateTimeProps { slider: number } -function DateTime({ images, slider }: DateTimeProps) { +export function DateTime({ images, slider }: DateTimeProps) { let datetime = null; if (images.length > 0) { @@ -26,5 +26,3 @@ function DateTime({ images, slider }: DateTimeProps) {
); } - -export default DateTime; diff --git a/src/Geshem.test.tsx b/src/Geshem.test.tsx index 185b1f4..8e4652d 100644 --- a/src/Geshem.test.tsx +++ b/src/Geshem.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import Geshem from './Geshem'; +import { Geshem } from './Geshem'; it('renders without crashing', () => { const div = document.createElement('div'); diff --git a/src/Geshem.tsx b/src/Geshem.tsx index a0750d4..5210622 100644 --- a/src/Geshem.tsx +++ b/src/Geshem.tsx @@ -1,16 +1,16 @@ import React, { useState, useEffect } from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; -import Map from "./Map"; -import Slider from "./Slider"; -import DateTime from "./Datetime"; +import { Map } from "./Map"; +import { Slider } from "./Slider"; +import { DateTime } from "./Datetime"; import { IMAGES_BASE_URL } from "./config"; import "./Geshem.css"; import "rc-slider/assets/index.css"; -function App() { +export function App() { return ( @@ -25,7 +25,7 @@ interface GeshemProps { date?: string } -function Geshem({ date }: GeshemProps) { +export function Geshem({ date }: GeshemProps) { const [images, setImages] = useState([]); const [playback] = useState( date || @@ -77,5 +77,3 @@ function Geshem({ date }: GeshemProps) { ); } - -export default App; diff --git a/src/Map.tsx b/src/Map.tsx index 62bebb2..7a49416 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -15,7 +15,7 @@ interface MapProps { images: string[], } -function Map({ slider, images }: MapProps) { +export function Map({ slider, images }: MapProps) { const mapContainer = useRef(null); const map = useRef(null); const [lng, setLng] = useState(35); @@ -60,7 +60,7 @@ function Map({ slider, images }: MapProps) { }} />
); - +} // return ( // // {images.map((img, i) => { @@ -93,6 +93,3 @@ function Map({ slider, images }: MapProps) { // })} // // ); -} - -export default Map; diff --git a/src/Slider.tsx b/src/Slider.tsx index 64edb99..4d287a2 100644 --- a/src/Slider.tsx +++ b/src/Slider.tsx @@ -10,7 +10,7 @@ interface GeshemSliderProps { setSlider: React.Dispatch> } -function Slider({ playback, slider, setSlider }: GeshemSliderProps) { +export function Slider({ playback, slider, setSlider }: GeshemSliderProps) { const handleStyle = { height: 40, width: 40, @@ -42,5 +42,3 @@ function Slider({ playback, slider, setSlider }: GeshemSliderProps) {
); } - -export default Slider; diff --git a/src/index.tsx b/src/index.tsx index 8d5df82..353cebb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import App from './Geshem'; +import { App } from './Geshem'; console.log() -- cgit v1.3.1 From f1684bf5f0e9eb898df52278a498e5e353e3774e Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 09:34:37 +0300 Subject: Handle source and layer updates --- src/Map.tsx | 67 ++++++++++++++++++++++++++++--------------------------------- 1 file changed, 31 insertions(+), 36 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 7a49416..a39b472 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -22,7 +22,7 @@ export function Map({ slider, images }: MapProps) { const [lat, setLat] = useState(31.9); const [zoom, setZoom] = useState(6.3); - const prevImages = useRef({ images }).current; + const prevImages = useRef(images).current; useEffect(() => { if (map.current) return; // initialize map only once @@ -48,9 +48,36 @@ export function Map({ slider, images }: MapProps) { }); useEffect(() => { - // handle layer updates - console.log(images) - }, [images]); + // remove old layers + prevImages.map((img) => { + if (!images.includes(img)) { + map.current.removeLayer(`layer-${img}`); + map.current.removeSource(`source-${img}`); + } + }); + + // add new layers + images.map((img) => { + if (!images.includes(img)) { + map.current.addSource(`source-${img}`, { + type: "image", + url: `${IMAGES_BASE_URL}/${img}`, + coordinates: IMAGE_COORDINATES + }); + map.current.addLayer({ + id: `layer-${img}`, + source: `source-${img}`, + type: "raster", + paint: { + "raster-opacity": 0, + "raster-opacity-transition": { + duration: 0 + } + } + }); + } + }); + }, [prevImages, images]); return (
@@ -61,35 +88,3 @@ export function Map({ slider, images }: MapProps) {
); } - // return ( - // - // {images.map((img, i) => { - // const id = `radar-280-${i}`; - // return ( - // - // {/* - // */} - // - // ); - // })} - // - // ); -- cgit v1.3.1 From 5166667c759eea942ecdf7e36c4a0b0eb14dc357 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 10:49:41 +0300 Subject: Basic map structure, almost there --- src/Map.tsx | 70 ++++++++++++++++++++++++++++++++++++------------------------- 1 file changed, 42 insertions(+), 28 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index a39b472..46ebd3d 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef } from "react"; +import React, { useState, useEffect, useRef, useCallback } from "react"; // @ts-ignore import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax @@ -23,33 +23,13 @@ export function Map({ slider, images }: MapProps) { const [zoom, setZoom] = useState(6.3); const prevImages = useRef(images).current; + const prevSlider = useRef(slider).current; - useEffect(() => { - if (map.current) return; // initialize map only once - map.current = new mapboxgl.Map({ - accessToken: MAPBOX_ACCESS_TOKEN, - container: mapContainer.current, - style: "mapbox://styles/mapbox/dark-v9", - center: [lng, lat], - zoom: zoom, - minZoom: 5, - maxZoom: 10, - hash: false, - }); - }); + const updateLayers = useCallback(() => { + if (!map.current || !map.current.isStyleLoaded()) return; - useEffect(() => { - if (!map.current) return; // wait for map to initialize - map.current.on('move', () => { - setLng(map.current.getCenter().lng.toFixed(4)); - setLat(map.current.getCenter().lat.toFixed(4)); - setZoom(map.current.getZoom().toFixed(2)); - }); - }); - - useEffect(() => { // remove old layers - prevImages.map((img) => { + prevImages.forEach((img) => { if (!images.includes(img)) { map.current.removeLayer(`layer-${img}`); map.current.removeSource(`source-${img}`); @@ -57,8 +37,8 @@ export function Map({ slider, images }: MapProps) { }); // add new layers - images.map((img) => { - if (!images.includes(img)) { + images.forEach((img, i) => { + if (!prevImages.includes(img)) { map.current.addSource(`source-${img}`, { type: "image", url: `${IMAGES_BASE_URL}/${img}`, @@ -69,7 +49,7 @@ export function Map({ slider, images }: MapProps) { source: `source-${img}`, type: "raster", paint: { - "raster-opacity": 0, + "raster-opacity": 0.5, "raster-opacity-transition": { duration: 0 } @@ -79,6 +59,40 @@ export function Map({ slider, images }: MapProps) { }); }, [prevImages, images]); + useEffect(() => { + if (map.current) return; + map.current = new mapboxgl.Map({ + accessToken: MAPBOX_ACCESS_TOKEN, + container: mapContainer.current, + style: "mapbox://styles/mapbox/dark-v9", + center: [lng, lat], + zoom: zoom, + minZoom: 5, + maxZoom: 10, + hash: false, + }); + map.current.on("style.load", () => { updateLayers(); }); + }); + + useEffect(() => { + if (!map.current || !map.current.isStyleLoaded()) return; + map.current.on('move', () => { + setLng(map.current.getCenter().lng.toFixed(4)); + setLat(map.current.getCenter().lat.toFixed(4)); + setZoom(map.current.getZoom().toFixed(2)); + }); + }); + + useEffect(() => { + updateLayers(); + }, [updateLayers, prevImages, images]); + + useEffect(() => { + if (!map.current || !map.current.isStyleLoaded()) return; + map.current.setPaintProperty(`layer-${images[prevSlider]}`, "raster-opacity", 0); + map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); + }, [prevSlider, slider, images]); + return (
Date: Thu, 1 Sep 2022 10:52:38 +0300 Subject: Change map loaded to state --- src/Map.tsx | 57 +++++++++++++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 30 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 46ebd3d..087dd68 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -21,12 +21,37 @@ export function Map({ slider, images }: MapProps) { const [lng, setLng] = useState(35); const [lat, setLat] = useState(31.9); const [zoom, setZoom] = useState(6.3); + const [loaded, setLoaded] = useState(false); const prevImages = useRef(images).current; const prevSlider = useRef(slider).current; - const updateLayers = useCallback(() => { + useEffect(() => { + if (map.current) return; + map.current = new mapboxgl.Map({ + accessToken: MAPBOX_ACCESS_TOKEN, + container: mapContainer.current, + style: "mapbox://styles/mapbox/dark-v9", + center: [lng, lat], + zoom: zoom, + minZoom: 5, + maxZoom: 10, + hash: false, + }); + map.current.on("style.load", () => { setLoaded(true); }); + }); + + useEffect(() => { if (!map.current || !map.current.isStyleLoaded()) return; + map.current.on('move', () => { + setLng(map.current.getCenter().lng.toFixed(4)); + setLat(map.current.getCenter().lat.toFixed(4)); + setZoom(map.current.getZoom().toFixed(2)); + }); + }); + + useEffect(() => { + if (!loaded) return; // remove old layers prevImages.forEach((img) => { @@ -57,35 +82,7 @@ export function Map({ slider, images }: MapProps) { }); } }); - }, [prevImages, images]); - - useEffect(() => { - if (map.current) return; - map.current = new mapboxgl.Map({ - accessToken: MAPBOX_ACCESS_TOKEN, - container: mapContainer.current, - style: "mapbox://styles/mapbox/dark-v9", - center: [lng, lat], - zoom: zoom, - minZoom: 5, - maxZoom: 10, - hash: false, - }); - map.current.on("style.load", () => { updateLayers(); }); - }); - - useEffect(() => { - if (!map.current || !map.current.isStyleLoaded()) return; - map.current.on('move', () => { - setLng(map.current.getCenter().lng.toFixed(4)); - setLat(map.current.getCenter().lat.toFixed(4)); - setZoom(map.current.getZoom().toFixed(2)); - }); - }); - - useEffect(() => { - updateLayers(); - }, [updateLayers, prevImages, images]); + }, [loaded, prevImages, images]); useEffect(() => { if (!map.current || !map.current.isStyleLoaded()) return; -- cgit v1.3.1 From 9b31c8c4314e3bc78205791d76723c8f3da5b022 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 11:01:25 +0300 Subject: Map loading works, slider still not --- src/Map.tsx | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 087dd68..ddac01d 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useRef, useCallback } from "react"; +import React, { useState, useEffect, useRef } from "react"; // @ts-ignore import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax @@ -18,6 +18,7 @@ interface MapProps { export function Map({ slider, images }: MapProps) { const mapContainer = useRef(null); const map = useRef(null); + const [lng, setLng] = useState(35); const [lat, setLat] = useState(31.9); const [zoom, setZoom] = useState(6.3); @@ -28,6 +29,7 @@ export function Map({ slider, images }: MapProps) { useEffect(() => { if (map.current) return; + map.current = new mapboxgl.Map({ accessToken: MAPBOX_ACCESS_TOKEN, container: mapContainer.current, @@ -38,16 +40,16 @@ export function Map({ slider, images }: MapProps) { maxZoom: 10, hash: false, }); - map.current.on("style.load", () => { setLoaded(true); }); - }); - useEffect(() => { - if (!map.current || !map.current.isStyleLoaded()) return; - map.current.on('move', () => { + map.current.on("style.load", () => { + setLoaded(true); + }); + + map.current.on("move", () => { setLng(map.current.getCenter().lng.toFixed(4)); setLat(map.current.getCenter().lat.toFixed(4)); setZoom(map.current.getZoom().toFixed(2)); - }); + }) }); useEffect(() => { @@ -63,7 +65,7 @@ export function Map({ slider, images }: MapProps) { // add new layers images.forEach((img, i) => { - if (!prevImages.includes(img)) { + if (!prevImages.includes(img) && !map.current.getSource(`source-${img}`)) { map.current.addSource(`source-${img}`, { type: "image", url: `${IMAGES_BASE_URL}/${img}`, @@ -74,7 +76,7 @@ export function Map({ slider, images }: MapProps) { source: `source-${img}`, type: "raster", paint: { - "raster-opacity": 0.5, + "raster-opacity": 0, "raster-opacity-transition": { duration: 0 } @@ -85,10 +87,10 @@ export function Map({ slider, images }: MapProps) { }, [loaded, prevImages, images]); useEffect(() => { - if (!map.current || !map.current.isStyleLoaded()) return; - map.current.setPaintProperty(`layer-${images[prevSlider]}`, "raster-opacity", 0); - map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); - }, [prevSlider, slider, images]); + if (!loaded) return; + images[prevSlider] && map.current.setPaintProperty(`layer-${images[prevSlider]}`, "raster-opacity", 0); + images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); + }, [loaded, prevSlider, slider, images]); return (
-- cgit v1.3.1 From e268ee7078e259590ccfc9e79d88bac71d7f29ca Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 11:14:37 +0300 Subject: Fix slider prev value callback --- src/Map.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index ddac01d..588f5c4 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -25,7 +25,6 @@ export function Map({ slider, images }: MapProps) { const [loaded, setLoaded] = useState(false); const prevImages = useRef(images).current; - const prevSlider = useRef(slider).current; useEffect(() => { if (map.current) return; @@ -88,9 +87,12 @@ export function Map({ slider, images }: MapProps) { useEffect(() => { if (!loaded) return; - images[prevSlider] && map.current.setPaintProperty(`layer-${images[prevSlider]}`, "raster-opacity", 0); images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); - }, [loaded, prevSlider, slider, images]); + return () => { + // callback will hide the previous layer with the previous slider value + map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0); + } + }, [loaded, slider, images]); return (
-- cgit v1.3.1 From e588e0f41e26353dd5425150225817cc52fab4bf Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 17:09:54 +0300 Subject: No need to save map state --- src/Map.tsx | 6 ------ 1 file changed, 6 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 588f5c4..590f80d 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -43,12 +43,6 @@ export function Map({ slider, images }: MapProps) { map.current.on("style.load", () => { setLoaded(true); }); - - map.current.on("move", () => { - setLng(map.current.getCenter().lng.toFixed(4)); - setLat(map.current.getCenter().lat.toFixed(4)); - setZoom(map.current.getZoom().toFixed(2)); - }) }); useEffect(() => { -- cgit v1.3.1 From 741602dff59d54b084180a16728d9995b6768ef8 Mon Sep 17 00:00:00 2001 From: Yuval Adam <_@yuv.al> Date: Thu, 1 Sep 2022 17:35:06 +0300 Subject: Skip slider renders on empty images, and cleanup unused vars --- src/Map.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/Map.tsx') diff --git a/src/Map.tsx b/src/Map.tsx index 590f80d..39f28fa 100644 --- a/src/Map.tsx +++ b/src/Map.tsx @@ -19,9 +19,9 @@ export function Map({ slider, images }: MapProps) { const mapContainer = useRef(null); const map = useRef(null); - const [lng, setLng] = useState(35); - const [lat, setLat] = useState(31.9); - const [zoom, setZoom] = useState(6.3); + const [lng] = useState(35); + const [lat] = useState(31.9); + const [zoom] = useState(6.3); const [loaded, setLoaded] = useState(false); const prevImages = useRef(images).current; @@ -80,7 +80,7 @@ export function Map({ slider, images }: MapProps) { }, [loaded, prevImages, images]); useEffect(() => { - if (!loaded) return; + if (!loaded || !images.length) return; images[slider] && map.current.setPaintProperty(`layer-${images[slider]}`, "raster-opacity", 0.85); return () => { // callback will hide the previous layer with the previous slider value -- cgit v1.3.1