✨ wo #43: improved the alpha release of the heavy rain map (incl. ani…

…mation)
cismet · Jul 2, 2020 · 6cd9d8b · 6cd9d8b
1 parent 299f5a6
commit 6cd9d8b
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 89 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
     "@mapbox/polylabel": "^1.0.2",
+    "@turf/area": "^6.0.1",
     "@turf/bbox": "^5.1.5",
     "@turf/bbox-polygon": "^5.0.4",
     "@turf/boolean-disjoint": "^6.0.2",

diff --git a/src/components/starkregen/VectorFieldAnimation.js b/src/components/starkregen/VectorFieldAnimation.js
@@ -3,20 +3,23 @@ import L from 'leaflet';
 import chroma from 'chroma-js';
 import 'leaflet-canvaslayer-field/dist/leaflet.canvaslayer.field';
 import * as d3 from 'd3';
+import bboxPolygon from '@turf/bbox-polygon';
 
 async function produceVectorfield(uGrid, vGrid, scaleFactor) {
 	return L.VectorField.fromASCIIGrids(uGrid, vGrid, scaleFactor);
 }
+
+const getBBoxForBounds = (bounds) => {
+	return [
+		bounds._southWest.lng,
+		bounds._northEast.lat,
+		bounds._northEast.lng,
+		bounds._southWest.lat
+	];
+};
 // const service="http://127.0.0.1:8881";
 const service = 'https://rasterfari.cismet.de';
-const settingsForZoom = {
-	13: { paths: 3000, velocityScale: 1 / 200, fade: 80 / 100, age: 50 },
-	14: { paths: 2560, velocityScale: 1 / 400, fade: 83 / 100, age: 80 },
-	15: { paths: 2120, velocityScale: 1 / 800, fade: 86 / 100, age: 110 },
-	16: { paths: 1680, velocityScale: 1 / 1600, fade: 89 / 100, age: 140 },
-	17: { paths: 1240, velocityScale: 1 / 3200, fade: 92 / 100, age: 170 },
-	18: { paths: 800, velocityScale: 1 / 4000, fade: 95 / 100, age: 200 }
-};
+
 class VectorFieldAnimation extends MapLayer {
 	constructor(props, context) {
 		super(props, context);
@@ -31,18 +34,15 @@ class VectorFieldAnimation extends MapLayer {
 	loadAndVis(didMount = false) {}
 
 	componentDidMount() {
-		console.log('xxx context', this.context.map.getBounds());
-		const bounds = this.context.map.getBounds();
+		// const bounds = this.context.map.getBounds();
+		// const bbox = getBBoxForBounds(bounds);
 
+		const bbox = this.props.bbox;
 		//BBOX=7.1954778,51.2743996,7.2046701,51.2703213
-		// let url_u = `http://127.0.0.1:8881/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-		// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds._southWest
-		// 	.lat}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
-		// let url_v = `http://127.0.0.1:8881/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-		// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds._southWest
-		// 	.lat}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
-
-		var urls = [ this.props.url_u, this.props.url_v ];
+		let url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
+		let url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
+
+		var urls = [ url_u, url_v ];
 		console.log('VFA: ', urls);
 
 		var promises = urls.map((url) => fetch(url).then((r) => r.text()));
@@ -54,21 +54,8 @@ class VectorFieldAnimation extends MapLayer {
 			let vf = L.VectorField.fromASCIIGrids(arrays[0], arrays[1], scaleFactor);
 			var range = vf.range;
 			var scale = chroma.scale('OrRd').domain(range);
-			let paths = settingsForZoom[that.props.zoomlevel].paths;
-			let velocityScale = settingsForZoom[that.props.zoomlevel].velocityScale;
-			let fade = settingsForZoom[that.props.zoomlevel].fade;
-			let age = settingsForZoom[that.props.zoomlevel].age;
-			console.log('xxx velocityScale', velocityScale);
-
-			let layer = L.canvasLayer.vectorFieldAnim(vf, {
-				paths, //-- default 800
-				width: 1.0, // number | function widthFor(value)  -- default 1.0
-				fade, // 0 to 1 -- default 0.96
-				duration: 20, // milliseconds per 'frame'  -- default 20
-				maxAge: age, // number of maximum frames per path  -- default 200
-				velocityScale, // -- default 1/ 5000
-				color: '#326C88' // html-color | function colorFor(value) [e.g. chromajs.scale]   -- default white
-			});
+
+			let layer = L.canvasLayer.vectorFieldAnim(vf, that.props.settings);
 
 			that.leafletElement = layer;
 			that.superComponentDidMount();
@@ -89,14 +76,11 @@ class VectorFieldAnimation extends MapLayer {
 			//this.componentDidMount();
 
 			const bounds = this.context.map.getBounds();
+			const bbox = getBBoxForBounds(bounds);
 
 			//BBOX=7.1954778,51.2743996,7.2046701,51.2703213
-			let url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-				._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-				._southWest.lat}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
-			let url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-				._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-				._southWest.lat}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
+			let url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
+			let url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bbox[0]},${bbox[1]},${bbox[2]},${bbox[3]}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
 
 			var urls = [ url_u, url_v ];
 			if (this.leafletElement.url_u === url_u && this.leafletElement.url_v === url_v) {

diff --git a/src/containers/Starkregen.js b/src/containers/Starkregen.js
@@ -18,7 +18,8 @@ import { actions as StarkregenActions } from '../redux/modules/starkregen';
 import { actions as UIStateActions } from '../redux/modules/uiState';
 import { modifyQueryPart } from '../utils/routingHelper';
 import VectorFieldAnimation from '../components/starkregen/VectorFieldAnimation';
-
+import bboxPolygon from '@turf/bbox-polygon';
+import area from '@turf/area';
 /* eslint-disable jsx-a11y/anchor-is-valid */
 // const service="http://127.0.0.1:8881";
 const service = 'https://rasterfari.cismet.de';
@@ -179,19 +180,46 @@ export class Starkregen_ extends React.Component {
 		}
 
 		const mapRef = this.getMapRef();
-		let url_u, url_v;
+		let url_u, url_v, vectorFieldAnimationSettings, currentBBox, currentMapArea;
 		console.log('mapRef', mapRef);
-
+		const settingsForZoom = {
+			13: { paths: 3000, velocityScale: 1 / 200, fade: 80 / 100, age: 50 },
+			14: { paths: 2560, velocityScale: 1 / 400, fade: 83 / 100, age: 80 },
+			15: { paths: 2120, velocityScale: 1 / 800, fade: 86 / 100, age: 110 },
+			16: { paths: 1680, velocityScale: 1 / 1600, fade: 89 / 100, age: 140 },
+			17: { paths: 1240, velocityScale: 1 / 3200, fade: 92 / 100, age: 170 },
+			18: { paths: 800, velocityScale: 1 / 4000, fade: 95 / 100, age: 200 }
+		};
 		if (mapRef !== undefined) {
 			const bounds = mapRef.getBounds();
-			url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-				._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-				._southWest.lat}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
-			url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
-				._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
-				._southWest.lat}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
+			// url_u = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
+			// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
+			// 	._southWest.lat}&LAYERS=docs/regen/u84.tif&FORMAT=text/raster.asc`;
+			// url_v = `${service}/gdalProcessor?REQUEST=translate&SRS=EPSG:4326&BBOX=${bounds
+			// 	._southWest.lng},${bounds._northEast.lat},${bounds._northEast.lng},${bounds
+			// 	._southWest.lat}&LAYERS=docs/regen/v84.tif&FORMAT=text/raster.asc`;
+			currentBBox = [
+				bounds._southWest.lng,
+				bounds._northEast.lat,
+				bounds._northEast.lng,
+				bounds._southWest.lat
+			];
+			const bboxpoly = bboxPolygon(currentBBox);
+			currentMapArea = area(bboxpoly);
+			console.log('currentMapArea', currentMapArea);
+
+			const paths = Math.sqrt(currentMapArea) * 8;
+			console.log('paths', paths);
+			vectorFieldAnimationSettings = {
+				paths, // settingsForZoom[currentZoom].paths, //-- default 800
+				fade: settingsForZoom[currentZoom].fade, // 0 to 1 -- default 0.96
+				velocityScale: settingsForZoom[currentZoom].velocityScale, // -- default 1/ 5000
+				maxAge: settingsForZoom[currentZoom].age, // number of maximum frames per path  -- default 200
+				width: 1.0, // number | function widthFor(value)  -- default 1.0
+				duration: 20, // milliseconds per 'frame'  -- default 20,
+				color: '#326C88' // html-color | function colorFor(value) [e.g. chromajs.scale]   -- default white
+			};
 		}
-		console.log('url_u', url_u);
 
 		let info = (
 			<InfoBox
@@ -390,14 +418,11 @@ export class Starkregen_ extends React.Component {
 					caching={this.state.caching}
 				/>
 				{featureInfoLayer}
-				{currentZoom >= 13 &&
-				url_u !== undefined &&
-				url_v !== undefined && (
+				{currentZoom >= 13 && (
 					<VectorFieldAnimation
-						key={'VFA:' + currentZoom}
-						url_u={url_u}
-						url_v={url_v}
-						zoomlevel={currentZoom}
+						key={'VFA:' + currentZoom + JSON.stringify(currentBBox)}
+						bbox={currentBBox}
+						settings={vectorFieldAnimationSettings}
 					/>
 				)}
 

diff --git a/yarn.lock b/yarn.lock
@@ -1322,6 +1322,14 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@turf/area@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@turf/area/-/area-6.0.1.tgz#50ed63c70ef2bdb72952384f1594319d94f3b051"
+  integrity sha512-Zv+3N1ep9P5JvR0YOYagLANyapGWQBh8atdeR3bKpWcigVXFsEKNUw03U/5xnh+cKzm7yozHD6MFJkqQv55y0g==
+  dependencies:
+    "@turf/helpers" "6.x"
+    "@turf/meta" "6.x"
+
 "@turf/bbox-polygon@^5.0.4":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@turf/bbox-polygon/-/bbox-polygon-5.1.5.tgz#6aeba4ed51d85d296e0f7c38b88c339f01eee024"
@@ -2078,11 +2086,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
   integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
-ansi-regex@*, ansi-regex@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
-  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -2098,6 +2101,11 @@ ansi-regex@^4.0.0, ansi-regex@^4.1.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -4934,7 +4942,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -7371,7 +7379,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -9035,11 +9043,6 @@ lodash-es@^4.0.0, lodash-es@^4.2.1:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseisequal@^3.0.0:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz#d8025f76339d29342767dcc887ce5cb95a5b51f1"
@@ -9057,29 +9060,17 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
+lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
   integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
 
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
+lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
   integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
@@ -9161,11 +9152,6 @@ lodash.once@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
   integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -12518,7 +12504,7 @@ readable-stream@~2.1.5:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
   integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==
@@ -14621,7 +14607,7 @@ v8flags@~3.1.1:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-validate-npm-package-license@*, validate-npm-package-license@^3.0.1:
+validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
   integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==