Add image Source and Layer components

1 files changed, 21 insertions, 5 deletions

diff --git a/src/Map.js b/src/Map.js
index 0a8065b..9ab4a20 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
+import ReactMapboxGl, { Layer, Source } from 'react-mapbox-gl';
 
-import { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN } from './config';
+import { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES } from './config';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
 
@@ -16,13 +16,13 @@ const Mapbox = ReactMapboxGl({
 function Map() {
   const [center, setCenter] = useState([35, 31.9]);
   const [zoom, setZoom] = useState([6.3]);
-  const [images, setImages] = useState({});
+  const [images, setImages] = useState([]);
 
   useEffect(() => {
     const fetchImages = async() => {
       const res = await fetch(`${IMAGES_BASE_URL}/imgs.json`);
       const imgs = await res.json();
-      setImages(imgs);
+      setImages(imgs["280"]);
     };
     fetchImages();
   }, []);
@@ -33,7 +33,23 @@ function Map() {
         height: '100vh',
         width: '100vw'
       }}
-    ></Mapbox>
+    >
+      {images.map((img, i) => (
+        <>
+          <Source id={`radar-280-${i}`} tileJsonSource={{
+            "type": "image",
+            "url": img,
+            "coordinates": IMAGE_COORDINATES
+          }}/>
+          <Layer id={`radar-280-${i}`} sourceId={`radar-280-${i}`} type="raster" paint={{
+            'raster-opacity': i==0 ? 1 : 0,
+            'raster-opacity-transition': {
+              'duration': 0
+            }
+          }}/>
+        </>
+      ))}
+    </Mapbox>
   );
 }