Add image Source and Layer components

2 files changed, 29 insertions, 6 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>
   );
 }
 
diff --git a/src/config.js b/src/config.js
index bf8a508..ecb8f88 100644
--- a/src/config.js
+++ b/src/config.js
@@ -4,4 +4,11 @@ const IMAGES_BASE_URL = DEVELOPMENT ? '' : 'https://imgs.geshem.space';
 
 const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw';
 
-module.exports = { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN };
+const IMAGE_COORDINATES = [
+  [31.7503896894, 34.4878044232],
+  [37.8574239563, 34.5078463729],
+  [37.7157066403, 29.4538271687],
+  [31.9347389087, 29.4373462909]
+];
+
+module.exports = { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES };