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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
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,
IMAGE_COORDINATES,
IMAGES_BASE_URL
} from "./config";
import "mapbox-gl/dist/mapbox-gl.css";
interface MapProps {
slider: number,
images: string[],
}
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 (
<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;
|
