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 (
+    <Mapbox
+      style="mapbox://styles/mapbox/dark-v9"
+      center={center}
+      zoom={zoom}
+      containerStyle={{
+        height: "100vh",
+        width: "100vw"
+      }}
+    >
+      {props.images.map((img, i) => {
+        const id = `radar-280-${i}`;
+        return (
+          <Fragment key={`image-${id}`}>
+            <Source
+              id={id}
+              key={`source-${id}`}
+              tileJsonSource={{
+                type: "image",
+                url: `${IMAGES_BASE_URL}/${img}`,
+                coordinates: IMAGE_COORDINATES
+              }}
+            />
+            <Layer
+              id={id}
+              key={`layer-${id}`}
+              sourceId={id}
+              type="raster"
+              paint={{
+                "raster-opacity": i === props.slider ? 0.85 : 0,
+                "raster-opacity-transition": {
+                  duration: 0
+                }
+              }}
+            />
+          </Fragment>
+        );
+      })}
+    </Mapbox>
+  );
+}
+
+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<LngLatLike>([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 (
-    <Mapbox
-      style="mapbox://styles/mapbox/dark-v9"
-      center={center}
-      zoom={zoom}
-      containerStyle={{
-        height: "100vh",
-        width: "100vw"
-      }}
-    >
-      {props.images.map((img, i) => {
-        const id = `radar-280-${i}`;
-        return (
-          <Fragment key={`image-${id}`}>
-            <Source
-              id={id}
-              key={`source-${id}`}
-              tileJsonSource={{
-                type: "image",
-                url: `${IMAGES_BASE_URL}/${img}`,
-                coordinates: IMAGE_COORDINATES
-              }}
-            />
-            <Layer
-              id={id}
-              key={`layer-${id}`}
-              sourceId={id}
-              type="raster"
-              paint={{
-                "raster-opacity": i === props.slider ? 0.85 : 0,
-                "raster-opacity-transition": {
-                  duration: 0
-                }
-              }}
-            />
-          </Fragment>
-        );
-      })}
-    </Mapbox>
+    <div>
+      <div ref={mapContainer} className="map-container" />
+    </div>
   );
+
+  // return (
+  //   <Mapbox
+  //     style="mapbox://styles/mapbox/dark-v9"
+  //     center={center}
+  //     zoom={zoom}
+  //     containerStyle={{
+  //       height: "100vh",
+  //       width: "100vw"
+  //     }}
+  //   >
+  //     {images.map((img, i) => {
+  //       const id = `radar-280-${i}`;
+  //       return (
+  //         <Fragment key={`image-${id}`}>
+  //           {/* <Source
+  //             id={id}
+  //             key={`source-${id}`}
+  //             tileJsonSource={{
+  //               type: "image",
+  //               url: `${IMAGES_BASE_URL}/${img}`,
+  //               coordinates: IMAGE_COORDINATES
+  //             }}
+  //           />
+  //           <Layer
+  //             id={id}
+  //             key={`layer-${id}`}
+  //             sourceId={id}
+  //             type="raster"
+  //             paint={{
+  //               "raster-opacity": i === slider ? 0.85 : 0,
+  //               "raster-opacity-transition": {
+  //                 duration: 0
+  //               }
+  //             }}
+  //           /> */}
+  //         </Fragment>
+  //       );
+  //     })}
+  //   </Mapbox>
+  // );
 }
 
 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<LngLatLike>([35, 31.9]);
+  const [center] = useState<mapboxgl.LngLatLike>([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 (
     <div>
-      <div ref={mapContainer} className="map-container" />
+      <div ref={mapContainer} className="map-container" style={{
+        height: "100vh",
+        width: "100vw"
+      }} />
     </div>
   );
 
   // return (
-  //   <Mapbox
-  //     style="mapbox://styles/mapbox/dark-v9"
-  //     center={center}
-  //     zoom={zoom}
-  //     containerStyle={{
-  //       height: "100vh",
-  //       width: "100vw"
-  //     }}
-  //   >
+  //   <Mapbox >
   //     {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<mapboxgl.LngLatLike>([35, 31.9]);
-  const [zoom] = useState([6.3]);
+  const map = useRef<mapboxgl.Map>(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 (
     <div>
       <div ref={mapContainer} className="map-container" style={{
-- 
cgit v1.3.1


From c5af7e2ee2fd84badb60cf2bab8b9fc341e9bdad Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
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 (
     <div>
       <div ref={mapContainer} className="map-container" style={{
-- 
cgit v1.3.1


From 43fff9d6f8e1b7ba38078804217bb98f6740af99 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
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) {
     </div>
   );
 }
-
-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 (
     <BrowserRouter>
       <Routes>
@@ -25,7 +25,7 @@ interface GeshemProps {
   date?: string
 }
 
-function Geshem({ date }: GeshemProps) {
+export function Geshem({ date }: GeshemProps) {
   const [images, setImages] = useState<string[]>([]);
   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<mapboxgl.Map>(null);
   const [lng, setLng] = useState(35);
@@ -60,7 +60,7 @@ function Map({ slider, images }: MapProps) {
       }} />
     </div>
   );
-
+}
   // return (
   //   <Mapbox >
   //     {images.map((img, i) => {
@@ -93,6 +93,3 @@ function Map({ slider, images }: MapProps) {
   //     })}
   //   </Mapbox>
   // );
-}
-
-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<React.SetStateAction<number>>
 }
 
-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) {
     </div>
   );
 }
-
-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 (
     <div>
@@ -61,35 +88,3 @@ export function Map({ slider, images }: MapProps) {
     </div>
   );
 }
-  // return (
-  //   <Mapbox >
-  //     {images.map((img, i) => {
-  //       const id = `radar-280-${i}`;
-  //       return (
-  //         <Fragment key={`image-${id}`}>
-  //           {/* <Source
-  //             id={id}
-  //             key={`source-${id}`}
-  //             tileJsonSource={{
-  //               type: "image",
-  //               url: `${IMAGES_BASE_URL}/${img}`,
-  //               coordinates: IMAGE_COORDINATES
-  //             }}
-  //           />
-  //           <Layer
-  //             id={id}
-  //             key={`layer-${id}`}
-  //             sourceId={id}
-  //             type="raster"
-  //             paint={{
-  //               "raster-opacity": i === slider ? 0.85 : 0,
-  //               "raster-opacity-transition": {
-  //                 duration: 0
-  //               }
-  //             }}
-  //           /> */}
-  //         </Fragment>
-  //       );
-  //     })}
-  //   </Mapbox>
-  // );
-- 
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 (
     <div>
       <div ref={mapContainer} className="map-container" style={{
-- 
cgit v1.3.1


From 9b13f0d40dd10880ea2040abb662b578b52049b6 Mon Sep 17 00:00:00 2001
From: Yuval Adam <_@yuv.al>
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<mapboxgl.Map>(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 (
     <div>
-- 
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 (
     <div>
-- 
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<mapboxgl.Map>(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

