diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Geshem.js | 97 | ||||
| -rw-r--r-- | src/Map.js | 10 | ||||
| -rw-r--r-- | src/Slider.js | 36 |
3 files changed, 56 insertions, 87 deletions
diff --git a/src/Geshem.js b/src/Geshem.js index f9c0aee..c419605 100644 --- a/src/Geshem.js +++ b/src/Geshem.js @@ -1,10 +1,10 @@ import React, { useState, useEffect, Component } from "react"; import { BrowserRouter as Router, Route } from "react-router-dom"; -import Slider from "rc-slider"; import { DateTime } from "luxon"; import axios from "axios"; import Map from "./Map"; +import Slider from "./Slider"; import { IMAGES_BASE_URL } from "./config"; import "./Geshem.css"; @@ -19,8 +19,12 @@ function App() { ); } -function Geshem() { +function Geshem(props) { const [images, setImages] = useState([]); + const [playback, setPlayback] = useState( + props.match.params.date || window.location.search.slice(-8) || false + ); + const [slider, setSlider] = useState(playback ? 143 : 9); useEffect(() => { const fetchImages = async () => { @@ -31,34 +35,17 @@ function Geshem() { fetchImages(); }, []); - return <Map images={images} />; + return ( + <> + <Map images={images} slider={slider} /> + <div id="slider"> + <Slider slider={slider} playback={playback} setSlider={setSlider} /> + </div> + </> + ); } class OldGeshem extends Component { - constructor(props) { - super(props); - const playback = - props.match.params.date || window.location.search.slice(-8) || false; - this.state = { - mapLoaded: false, - imgs: null, - playback: playback, - res: 280, - slider: playback ? 143 : 9, - lng: 35, - lat: 31.9, - zoom: 6.3, - rasterCoords: { - 280: [ - [31.7503896894, 34.4878044232], - [37.8574239563, 34.5078463729], - [37.7157066403, 29.4538271687], - [31.9347389087, 29.4373462909] - ] - } - }; - } - getGeolocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(pos => { @@ -78,16 +65,6 @@ class OldGeshem extends Component { } } - loadSources() { - const { imgs } = this.state; - let i = 0; - while (i < imgs["280"].length) { - this.addRadarSource("280", i, imgs["280"][i]); - this.addRadarLayer("280", i++); - } - this.showRadarLayer("280", 9); - } - loadPlaybackData() { const date = this.state.playback; const hours = [...Array(24).keys()].map( @@ -108,23 +85,6 @@ class OldGeshem extends Component { } } - loadRadarData() { - axios({ - method: "get" - }) - .then(res => { - this.setState({ - imgs: res.data - }); - if (this.state.mapLoaded) { - this.loadSources(); - } - }) - .catch(function(error) { - console.log(error); - }); - } - showRadarLayer(res, i) { this.map.setPaintProperty(`radar-${res}-${i}`, "raster-opacity", 0.85); } @@ -180,24 +140,6 @@ class OldGeshem extends Component { } render() { - const handleStyle = { - height: 40, - width: 40, - border: 0, - marginTop: -10, - marginLeft: -20, - boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)" - }; - - const railStyle = { - height: 20, - backgroundColor: "#3498db" - }; - - const trackStyle = { - display: "none" - }; - const datetime = this.getDateTime(); const date = datetime ? datetime.toFormat("dd-MM-y") : ""; const time = datetime ? datetime.toFormat("HH:mm") : ""; @@ -213,17 +155,6 @@ class OldGeshem extends Component { <div id="date">{date}</div> <div id="time">{time}</div> </div> - <div id="slider"> - <Slider - mix={0} - max={this.state.playback ? 143 : 9} - defaultValue={this.state.slider} - handleStyle={handleStyle} - railStyle={railStyle} - trackStyle={trackStyle} - onChange={val => this.onChangeSlider(val)} - /> - </div> </div> ); } @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { Fragment, useState, useEffect } from "react"; import ReactMapboxGl, { Layer, Source } from "react-mapbox-gl"; import { MAPBOX_ACCESS_TOKEN, IMAGE_COORDINATES } from "./config"; @@ -29,9 +29,10 @@ function Map(props) { {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: img, @@ -40,16 +41,17 @@ function Map(props) { /> <Layer id={id} + key={`layer-${id}`} sourceId={id} type="raster" paint={{ - "raster-opacity": i == 0 ? 1 : 0, + "raster-opacity": i == props.slider ? 1 : 0, "raster-opacity-transition": { duration: 0 } }} /> - </> + </Fragment> ); })} </Mapbox> diff --git a/src/Slider.js b/src/Slider.js new file mode 100644 index 0000000..b7267e1 --- /dev/null +++ b/src/Slider.js @@ -0,0 +1,36 @@ +import React, { useState, useEffect, Component } from "react"; +import RcSlider from "rc-slider"; + +function Slider(props) { + const handleStyle = { + height: 40, + width: 40, + border: 0, + marginTop: -10, + marginLeft: -20, + boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)" + }; + + const railStyle = { + height: 20, + backgroundColor: "#3498db" + }; + + const trackStyle = { + display: "none" + }; + + return ( + <RcSlider + mix={0} + max={props.playback ? 143 : 9} + defaultValue={props.slider} + handleStyle={handleStyle} + railStyle={railStyle} + trackStyle={trackStyle} + onChange={val => props.setSlider(val)} + /> + ); +} + +export default Slider; |