diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/Geshem.js | 167 | ||||
| -rw-r--r-- | src/Map.js | 73 | ||||
| -rw-r--r-- | src/config.js | 5 |
3 files changed, 127 insertions, 118 deletions
diff --git a/src/Geshem.js b/src/Geshem.js index c2b6e6e..f9c0aee 100644 --- a/src/Geshem.js +++ b/src/Geshem.js @@ -1,13 +1,14 @@ -import React, { useState, Component } from 'react'; +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 Slider from "rc-slider"; +import { DateTime } from "luxon"; +import axios from "axios"; -import Map from './Map' +import Map from "./Map"; +import { IMAGES_BASE_URL } from "./config"; -import './Geshem.css'; -import 'rc-slider/assets/index.css'; +import "./Geshem.css"; +import "rc-slider/assets/index.css"; function App() { return ( @@ -19,16 +20,25 @@ function App() { } function Geshem() { - return ( - <Map /> - ) + 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 <Map images={images} />; } class OldGeshem extends Component { - constructor(props) { super(props); - const playback = props.match.params.date || window.location.search.slice(-8) || false; + const playback = + props.match.params.date || window.location.search.slice(-8) || false; this.state = { mapLoaded: false, imgs: null, @@ -45,14 +55,14 @@ class OldGeshem extends Component { [37.7157066403, 29.4538271687], [31.9347389087, 29.4373462909] ] - }, + } }; } getGeolocation() { if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition((pos) => { - const {longitude, latitude} = pos.coords; + navigator.geolocation.getCurrentPosition(pos => { + const { longitude, latitude } = pos.coords; this.setState({ lng: longitude, lat: latitude, @@ -64,31 +74,34 @@ class OldGeshem extends Component { zoom: 11 }); } - }) + }); } } loadSources() { const { imgs } = this.state; let i = 0; - while (i < imgs['280'].length) { - this.addRadarSource('280', i, imgs['280'][i]) - this.addRadarLayer('280', i++) + while (i < imgs["280"].length) { + this.addRadarSource("280", i, imgs["280"][i]); + this.addRadarLayer("280", i++); } - this.showRadarLayer('280', 9) + this.showRadarLayer("280", 9); } 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` - ) - ), []); + 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} + imgs: { "280": paths } }); if (this.state.mapLoaded) { this.loadSources(); @@ -97,51 +110,31 @@ 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) - }) - } - - addRadarSource(res, i, url) { - this.map.addSource(`radar-${res}-${i}`, { - type: 'image', - // url: IMGS_BASE_URL + url, - coordinates: this.state.rasterCoords[res] + method: "get" }) - } - - addRadarLayer(res, i) { - this.map.addLayer({ - id: `radar-${res}-${i}`, - source: `radar-${res}-${i}`, - type: 'raster', - paint: { - 'raster-opacity': 0, - 'raster-opacity-transition': { - 'duration': 0 + .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); + this.map.setPaintProperty(`radar-${res}-${i}`, "raster-opacity", 0.85); } hideRadarLayer(res, i) { - this.map.setPaintProperty(`radar-${res}-${i}`, 'raster-opacity', 0); + this.map.setPaintProperty(`radar-${res}-${i}`, "raster-opacity", 0); } removeRadarLayer(res, i) { - this.map.removeLayer(`radar-${res}-${i}`) + this.map.removeLayer(`radar-${res}-${i}`); } onChangeSlider(val) { @@ -153,7 +146,7 @@ class OldGeshem extends Component { initMap() { const { lng, lat, zoom } = this.state; - this.map.on('style.load', () => { + this.map.on("style.load", () => { this.setState({ mapLoaded: true }); @@ -167,22 +160,23 @@ class OldGeshem extends Component { // this.getGeolocation(); if (this.state.playback) { this.loadPlaybackData(); - } - else { + } else { this.loadRadarData(); } this.initMap(); } getDateTime() { - const {imgs, res, slider} = this.state; + const { imgs, res, slider } = this.state; if (imgs === null) { return null; } const ds = imgs[res][slider].substr(5, 13); - return DateTime.fromFormat(ds, 'yyyyMMdd/HHmm', {zone: 'utc'}).setZone('Asia/Jerusalem'); + return DateTime.fromFormat(ds, "yyyyMMdd/HHmm", { zone: "utc" }).setZone( + "Asia/Jerusalem" + ); } render() { @@ -192,32 +186,43 @@ class OldGeshem extends Component { border: 0, marginTop: -10, marginLeft: -20, - boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)' - } + boxShadow: ".5px .5px 2px 1px rgba(0,0,0,.32)" + }; const railStyle = { height: 20, - backgroundColor: '#3498db' - } + backgroundColor: "#3498db" + }; - const trackStyle={ - display: 'none' - } + const trackStyle = { + display: "none" + }; const datetime = this.getDateTime(); - const date = datetime ? datetime.toFormat('dd-MM-y') : ''; - const time = datetime ? datetime.toFormat('HH:mm') : ''; + const date = datetime ? datetime.toFormat("dd-MM-y") : ""; + const time = datetime ? datetime.toFormat("HH:mm") : ""; return ( <div id="geshem"> - <div id="map" ref={el => this.mapContainer = el} className="absolute top right left bottom" /> + <div + id="map" + ref={el => (this.mapContainer = el)} + className="absolute top right left bottom" + /> <div id="datetime"> - <div id="date">{ date }</div> - <div id="time">{ time }</div> + <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)}/> + <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,54 +1,57 @@ -import React, { useState, useEffect } from 'react'; -import ReactMapboxGl, { Layer, Source } from 'react-mapbox-gl'; +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'; +import { 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, + hash: false }); -function Map() { +function Map(props) { 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} + <Mapbox + style="mapbox://styles/mapbox/dark-v9" + center={center} + zoom={zoom} containerStyle={{ - height: '100vh', - width: '100vw' + 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 - } - }}/> - </> - ))} + {props.images.map((img, i) => { + const id = `radar-280-${i}`; + return ( + <> + <Source + id={id} + tileJsonSource={{ + type: "image", + url: img, + coordinates: IMAGE_COORDINATES + }} + /> + <Layer + id={id} + sourceId={id} + type="raster" + paint={{ + "raster-opacity": i == 0 ? 1 : 0, + "raster-opacity-transition": { + duration: 0 + } + }} + /> + </> + ); + })} </Mapbox> ); } diff --git a/src/config.js b/src/config.js index ecb8f88..6218cf8 100644 --- a/src/config.js +++ b/src/config.js @@ -1,8 +1,9 @@ const DEVELOPMENT = process.env.NODE_ENV === "development"; -const IMAGES_BASE_URL = DEVELOPMENT ? '' : 'https://imgs.geshem.space'; +const IMAGES_BASE_URL = DEVELOPMENT ? "" : "https://imgs.geshem.space"; -const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw'; +const MAPBOX_ACCESS_TOKEN = + "pk.eyJ1IjoieXV2YWRtIiwiYSI6ImNpcnMxbzBuaTAwZWdoa25oczlzZmkwbHcifQ.UHtLngbKm9O8945pJm23Nw"; const IMAGE_COORDINATES = [ [31.7503896894, 34.4878044232], |