1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import React, { useState, useEffect } from 'react';
import ReactMapboxGl, { Layer, Source } from 'react-mapbox-gl';
import { IMAGES_BASE_URL, MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES } from './config';
import 'mapbox-gl/dist/mapbox-gl.css';
const Mapbox = ReactMapboxGl({
accessToken: MAPBOX_ACCESS_TOKEN,
minZoom: 5,
maxZoom: 10,
hash: false,
});
function Map() {
const [center, setCenter] = useState([35, 31.9]);
const [zoom, setZoom] = useState([6.3]);
const [images, setImages] = useState([]);
useEffect(() => {
const fetchImages = async() => {
const res = await fetch(`${IMAGES_BASE_URL}/imgs.json`);
const imgs = await res.json();
setImages(imgs["280"]);
};
fetchImages();
}, []);
return (
<Mapbox style="mapbox://styles/mapbox/dark-v9" center={center} zoom={zoom}
containerStyle={{
height: '100vh',
width: '100vw'
}}
>
{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>
);
}
export default Map;
|
