Leaflet now uses a dual band image by default. Fixed the upper right Leaflet...

Leaflet now uses a dual band image by default. Fixed the upper right Leaflet control. Added a function to add multiple data layers to the map.

src/Components/SideDrawer/SideDrawer.js

@@ -410,7 +410,7 @@ class sideDrawer extends React.PureComponent {
 
     return (
       <div>
-        <Toolbar>
+        <Toolbar style={{position: 'absolute'}}>
           <ToggleButton toggleDrawer={this.toggleDrawer} />
         </Toolbar>
 

src/Map/map.js

@@ -14,6 +14,7 @@ import "./dependencies/leaflet.css";
 import "./dependencies/leaflet.canvaslayer.field.js";
 import "./dependencies/chroma.min.js";
 import "./dependencies/geotiff.js";
+import { string } from "prop-types";
 
 const style = {
   position: "absolute",
@@ -43,6 +44,7 @@ class Map extends React.Component {
   constructor(props) {
     super(props);
     this.map = null;
+    this.layerControls = null
     this.popup = L.popup()
     this.state = {
       lng: 15.62,
@@ -98,14 +100,15 @@ class Map extends React.Component {
     this.map = L.map("map", {
       center: [lat, lng],
       layers: [osmTiles],
+      zoomControl: false,
       zoom: 13
     });
 
-
-
     L.control.layers(tileTypes).addTo(this.map);
 
-
+    L.control.zoom({
+      position:'topright'
+    }).addTo(this.map);
 
 
     this.map.on("click", this.onMapClick);
@@ -167,12 +170,13 @@ class Map extends React.Component {
     }
   }
 
-  addVectorField(u_tif, v_tif) {
+  addDataToMap(tif, type) {
     // Use this for two single band images
-    const vf = L.VectorField.fromGeoTIFFs(u_tif, v_tif);
+    //const vf = L.VectorField.fromGeoTIFFs(u_tif, v_tif);
+    console.log(type);
 
     // Use this for a two band image
-    //const vf = L.VectorField.fromMultibandGeoTIFF(u_tif);
+    const vf = L.VectorField.fromMultibandGeoTIFF(tif);
 
     // a) First derived field: Magnitude (m/s)
     const s = vf.getScalarField("magnitude"); // << derived ScalarField
@@ -221,20 +225,10 @@ class Map extends React.Component {
       velocityScale: 1 / 100000,
       color: msColorScale
     });
-
-    L.control
-      .layers({}, {
-        Vectormap: animation,
-        Heatmap: magnitude,
-        Direction: direction
-      }, {
-        position: "bottomleft",
-        collapsed: false
-      })
-      .addTo(this.map);
-
     
-      L.control
+    // This should be handled better.
+    if (this.layerControls === null) {
+      this.layerControls = L.control
       .colorBar(kmhColorScale, [kmhRange[0], kmhRange[kmhRange.length -1]], {
         title: "Fart [km/h]",
         units: "km/h",
@@ -250,6 +244,25 @@ class Map extends React.Component {
         labelFontSize: 14
       })
       .addTo(this.map);
+    }
+
+    var animationName = type + " Vector"; 
+    var heatmapName = type + " Heatmap"; 
+    var directionName = type + " Direction"; 
+
+    var overlays = {};
+    overlays[animationName] = animation;
+    overlays[heatmapName] = magnitude;
+    overlays[directionName] = direction;
+
+
+
+    L.control
+    .layers({}, overlays, {
+      position: "bottomright",
+      collapsed: false
+    })
+    .addTo(this.map);
 
     this.map.fitBounds(animation.getBounds());
 
@@ -307,13 +320,54 @@ class Map extends React.Component {
     return v_tif;
   }
 
+  async getData(dataType) {
+    var tif;
+
+    var url = new URL('http://localhost:5000/data/')
+    var params = {data: dataType}
+
+    url.search = new URLSearchParams(params)
+
+    //console.log(url.search);
+    await fetch(url, {
+        method: "GET"
+      })
+      .then(function (response) {
+        return response.arrayBuffer();
+      })
+      .then(function (myBlob) {
+        tif = myBlob;
+      });
+
+    return tif;
+  }
+
   async getVectorField(ev) {
     ev.preventDefault();
-    var u_tif = await this.getUField();
-    var v_tif = await this.getVField();
-    console.log(u_tif, v_tif);
+    //var u_tif = await this.getUField();
+    //var v_tif = await this.getVField();
+    //console.log(u_tif, v_tif);
+    var tif = await this.getData('min');
+    console.log(tif);
     //addScalarField(u_tif);
-    this.addVectorField(u_tif, v_tif);
+    this.addData(tif);
+  }
+
+  async getAndAdd(type) {
+    var tif = await this.getData(type);
+    console.log(type);
+    this.addDataToMap(tif, type);
+  }
+
+  async addMultipleData(ev) {
+    ev.preventDefault();
+
+    let dataTypes = ['min', 'median'];
+
+    for (let type of dataTypes) {
+      console.log(type);
+      await this.getAndAdd(type);
+    }
   }
 
   showStat = e => {
@@ -370,7 +424,7 @@ document.getElementById("heatmap").addEventListener("submit", this.getHeatmap);
       script src = "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js" / > , <
       form id = "vectorField"
       onSubmit = {
-        ev => this.getVectorField(ev)
+        ev => this.addMultipleData(ev)
       } >
       <
       label > Heatmap: < /label> <