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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import React, { useState, useEffect, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Map from "./Map";
import Slider from "./Slider";
import DateTime from "./Datetime";
import { IMAGES_BASE_URL } from "./config";
import "./Geshem.css";
import "rc-slider/assets/index.css";
function App() {
return (
<Router>
<Route exact path="/" component={Geshem} />
<Route path="/history/:date" component={Geshem} />
</Router>
);
}
function Geshem(props) {
const [images, setImages] = useState([]);
const [playback] = useState(
props.match.params.date || window.location.search.slice(-8) || false
);
const [slider, setSlider] = useState(playback ? 143 : 9);
useEffect(() => {
const fetchImages = async () => {
const res = await fetch(`${IMAGES_BASE_URL}/imgs.json`);
const imgs = await res.json();
setImages(imgs["280"]);
};
fetchImages();
}, []);
return (
<>
<Map images={images} slider={slider} />
<DateTime images={images} slider={slider} />
<Slider slider={slider} playback={playback} setSlider={setSlider} />
</>
);
}
class OldGeshem extends Component {
getGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {
const { longitude, latitude } = pos.coords;
this.setState({
lng: longitude,
lat: latitude,
zoom: 11
});
if (this.state.mapLoaded) {
this.map.jumpTo({
center: [longitude, latitude],
zoom: 11
});
}
});
}
}
loadPlaybackData() {
const date = this.state.playback;
const hours = [...Array(24).keys()].map(
h => `${String(h).padStart(2, "0")}`
);
const minutes = [...Array(6).keys()].map(
m => `${String(m * 10).padStart(2, "0")}`
);
const paths = hours.reduce(
(acc, h) => acc.concat(minutes.map(m => `imgs/${date}/${h}${m}/280.png`)),
[]
);
this.setState({
imgs: { "280": paths }
});
if (this.state.mapLoaded) {
this.loadSources();
}
}
render() {
return (
<div id="geshem">
<div
id="map"
ref={el => (this.mapContainer = el)}
className="absolute top right left bottom"
/>
</div>
);
}
}
export default App;
|
