Initial frontend

kvnyng · Oct 3, 2020 · d5671fe · d5671fe
1 parent 65dcf2e
commit d5671fe
Show file tree

Hide file tree

Showing 18 changed files with 814 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode/
diff --git a/frontend/data/kenyapop/pop.json b/frontend/data/kenyapop/pop.json
diff --git a/frontend/data/kenyapop/pop_data.js b/frontend/data/kenyapop/pop_data.js
diff --git a/frontend/data/kenyapop/popdata_geojson.js b/frontend/data/kenyapop/popdata_geojson.js
diff --git a/frontend/data/kenyapop/popdata_geojson.json b/frontend/data/kenyapop/popdata_geojson.json
diff --git a/frontend/data/kenyapop/population_ken_2018-10-01.tif b/frontend/data/kenyapop/population_ken_2018-10-01.tif
diff --git a/frontend/data/kenyapop_process.py b/frontend/data/kenyapop_process.py
@@ -0,0 +1,66 @@
+# Convert GeoJSON Polygons to array of centroids and areas
+import json
+with open(path_to_file) as f:
+    gj = json.loads(f)
+
+features = gj['features']
+output = []
+
+for feature in features:
+    coords = feature['geometry']['coordinates']
+    a = area(coords)
+    c = centroid(coords, area)
+
+    output.append(c[0], c[1], a)
+
+def area(coordList):
+    s = 0.0
+    for i in range(0, len(coordList - 1)):
+        s += (coordList[i][0]*coordList[i+1][1]) - (coordList[i+1][0]*coordList[i][1])
+
+    return 0.5 * s
+
+def centroid(coordList, area):
+    c = [0.0, 0.0]
+
+    for i in range(coordList - 1):
+        c[0] += (coordList[i][0] + coordList[i+1][0]) * (coordList[i][0]*coordList[i+1][1] - coordList[i+1][0]*coordList[i][1])
+        c[1] += (coordList[i][1] + coordList[i+1][1]) * (coordList[i][0]*coordList[i+1][1] - coordList[i+1][0]*coordList[i][1])
+
+    c[0] = c[0] // (area*6)
+    c[1] = c[1] // (area*6)
+
+    return c
+
+# Adapted From https://github.com/kpawlik/geojson/issues/3
+# func area(poly geojson.Polygon) float64 {
+#     s := 0.0
+
+#     ring := poly.Coordinates[0]
+#     for i := 0; i < len(ring)-1; i++ {
+#         s += float64(ring[i][0]*ring[i+1][1] - ring[i+1][0]*ring[i][1])
+#     }
+
+#     return 0.5 * s
+# }
+
+# // Centroid calculates the centroid of the exterior ring of a polygon using
+# // the formula at http://en.wikipedia.org/wiki/Centroid#Centroid_of_polygon
+# // but be careful as this applies Euclidean principles to decidedly non-
+# // Euclidean geometry. In other words, it will fail miserably for polygons
+# // near the poles, polygons that straddle the dateline, and for large polygons
+# // where Euclidean approximations break down.
+# func Centroid(poly geojson.Polygon) geojson.Coordinate {
+#     c := geojson.Coordinate{0, 0}
+
+#     ring := poly.Coordinates[0]
+#     for i := 0; i < len(ring)-1; i++ {
+#         c[0] += (ring[i][0] + ring[i+1][0]) * (ring[i][0]*ring[i+1][1] - ring[i+1][0]*ring[i][1])
+#         c[1] += (ring[i][1] + ring[i+1][1]) * (ring[i][0]*ring[i+1][1] - ring[i+1][0]*ring[i][1])
+#     }
+
+#     a := area(poly)
+#     c[0] /= geojson.CoordType(a * 6)
+#     c[1] /= geojson.CoordType(a * 6)
+#     return c
+# }
diff --git a/frontend/data/wind/wind_data.js b/frontend/data/wind/wind_data.js
diff --git a/frontend/data/wind/wind_data.json b/frontend/data/wind/wind_data.json
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Project L.O.C.U.S.T.</title>
+
+    <link rel="stylesheet" href="main.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" crossorigin="anonymous" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" crossorigin="anonymous"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin=""/>
+    <link rel="stylesheet" href="lib/leaflet-velocity.min.css">
+</head>
+<body>
+    <div id="map"></div>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" crossorigin="anonymous"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist-browser/geotiff.min.js"></script>
+    <script src="lib/plotty.min.js"></script>
+    <script src="lib/leaflet-geotiff.js"></script>
+    <script src="lib/leaflet-geotiff-plotty.js"></script>
+    <script src="lib/leaflet-velocity.min.js"></script>
+    <script src="token.js"></script>
+    <script src="data/wind/wind_data.js"></script>
+    <script src="data/kenyapop/popdata_geojson.js"></script>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/frontend/lib/leaflet-geotiff-plotty.js b/frontend/lib/leaflet-geotiff-plotty.js
@@ -0,0 +1,106 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('plotty')) :
+  typeof define === 'function' && define.amd ? define(['plotty'], factory) :
+  (global = global || self, factory(global.plotty));
+}(this, (function (plotty) { 'use strict';
+
+  plotty = plotty && plotty.hasOwnProperty('default') ? plotty['default'] : plotty;
+
+  // Depends on:
+  L.LeafletGeotiff.Plotty = L.LeafletGeotiffRenderer.extend({
+    options: {
+      colorScale: "viridis",
+      clampLow: true,
+      clampHigh: true,
+      displayMin: 0,
+      displayMax: 1,
+      noDataValue: -9999,
+    },
+    initialize: function initialize(options) {
+      if (typeof plotty === "undefined") {
+        throw new Error("plotty not defined");
+      }
+
+      this.name = "Plotty";
+      L.setOptions(this, options);
+
+      this._preLoadColorScale();
+    },
+    setColorScale: function setColorScale(colorScale) {
+      this.options.colorScale = colorScale;
+
+      this.parent._reset();
+    },
+    setDisplayRange: function setDisplayRange(min, max) {
+      this.options.displayMin = min;
+      this.options.displayMax = max;
+
+      this.parent._reset();
+    },
+    setClamps: function setClamps(clampLow, clampHigh) {
+      this.options.clampLow = clampLow;
+      this.options.clampHigh = clampHigh;
+
+      this.parent._reset();
+    },
+    getColorbarOptions: function getColorbarOptions() {
+      return Object.keys(plotty.colorscales);
+    },
+    getColourbarDataUrl: function getColourbarDataUrl(paletteName) {
+      var canvas = document.createElement("canvas");
+      var plot = new plotty.plot({
+        canvas: canvas,
+        data: [0],
+        width: 1,
+        height: 1,
+        domain: [0, 1],
+        colorScale: paletteName,
+        clampLow: true,
+        clampHigh: true
+      });
+      dataUrl = plot.colorScaleCanvas.toDataURL();
+      canvas.remove();
+      return dataUrl;
+    },
+    _preLoadColorScale: function _preLoadColorScale() {
+      var canvas = document.createElement("canvas");
+      var plot = new plotty.plot({
+        canvas: canvas,
+        data: [0],
+        width: 1,
+        height: 1,
+        domain: [this.options.displayMin, this.options.displayMax],
+        colorScale: this.options.colorScale,
+        clampLow: this.options.clampLow,
+        clampHigh: this.options.clampHigh
+      });
+      this.colorScaleData = plot.colorScaleCanvas.toDataURL();
+    },
+    render: function render(raster, canvas, ctx, args) {
+      var plottyCanvas = document.createElement("canvas");
+      var plot = new plotty.plot({
+        data: raster.data[0],
+        // fix for use with rgb conversion (appending alpha channel)
+        width: raster.width,
+        height: raster.height,
+        domain: [this.options.displayMin, this.options.displayMax],
+        colorScale: this.options.colorScale,
+        clampLow: this.options.clampLow,
+        clampHigh: this.options.clampHigh,
+        canvas: plottyCanvas,
+        useWebGL: false
+      });
+      plot.setNoDataValue(this.options.noDataValue);
+      plot.render();
+      this.colorScaleData = plot.colorScaleCanvas.toDataURL();
+      var rasterImageData = plottyCanvas.getContext("2d").getImageData(0, 0, plottyCanvas.width, plottyCanvas.height);
+      var imageData = this.parent.transform(rasterImageData, args);
+      ctx.putImageData(imageData, args.xStart, args.yStart);
+    }
+  });
+
+  L.LeafletGeotiff.plotty = function (options) {
+    return new L.LeafletGeotiff.Plotty(options);
+  };
+
+})));