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
57
58
59
60
61
62
63
64
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;
|
