Cleanup

Author: EliasBorngaesser

.gitignore

@@ -0,0 +1,20 @@
+# netcdf-leaflet-backend
+Frontend for Displaying NetCDF Data in Leaflet
+
+## Current Features:
+- displaying Heightlevels dynamically
+- dynamic Legends
+- Timedimension Control
+- GetFeatureInfo by Click Event
+
+
+## Used Technology
+- Librarys
+    - JQuery
+    - Leaflet
+        - TimeDimension
+            - iso8601
+        - groupedLayerControl
+- Source
+    - CSS
+        - custom Controls 

Pipfile

@@ -28,15 +28,17 @@
 	<script type="text/javascript" src="lib/js/Leaflet.TimeDimension.WmsTimeInterval.js"></script>
 
 	<script src="lib/js/leaflet.groupedlayercontrol.js"></script>
-	<script src="lib/js/L.TileLayer.BetterWMS.js"></script>
-
 
+	<script src="src/js/L.TileLayer.BetterWMS.js"></script>
 	<script src="src/js/baselayers.js"></script>
+	<script src="src/js/overlays.js"></script>
+	<script src="src/js/legend.js"></script>
 
 
 
 	<!-- Main Handling -->
-	<script src="src/js/netcdf-vis.js"></script>
+	<!-- <!-- <script src="src/js/netcdf-vis.js"></script> --> -->
+	<script src="src/js/main.js"></script>
 
 </body>
 

Pipfile.lock

@@ -20,6 +20,27 @@ a {
     background-color: #333;
 }
 
-.leaflet-canvas-layer {
-    opacity: 0.55;
+.legend {
+    line-height: 18px;
+    color: #555;
+}
+.legend i {
+    width: 18px;
+    height: 18px;
+    float: left;
+    margin-right: 8px;
+    opacity: 0.7;
+}
+
+.info {
+    padding: 6px 8px;
+    font: 14px/16px Arial, Helvetica, sans-serif;
+    background: white;
+    background: rgba(255,255,255,0.8);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    border-radius: 5px;
+}
+.info h4 {
+    margin: 0 0 5px;
+    color: #777;
 }

README.md

@@ -48,7 +48,8 @@ L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
             width: size.x,
             layers: this.wmsParams.layers,
             query_layers: this.wmsParams.layers,
-            info_format: 'text/html'
+            info_format: 'text/html',
+            time: this.options.time
           };
 
       params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;

app/index.html

@@ -0,0 +1,90 @@
+
+
+    var TSurfLegend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "13.63", "26.34", "51.77",],
+        "unit": "degree Celsius",
+    };
+
+    var AlbedoLegend = { 
+        "colors": [ "#000000", "#ffffff",],
+        "values": [ "0", "1",],
+        "unit": "",
+    };
+
+    var WindSpd_0_3Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "0.0", "0.73", "2.2",],
+        "unit": "m s-1",
+    };
+
+    var WindSpd_10_5Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "0.0", "0.83", "2.49",],
+        "unit": "m s-1",
+    };
+
+    var WindSpd_40_5Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "0.88", "1.71", "3.39",],
+        "unit": "m s-1",
+    };
+
+    var T_0_3Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "-273.15", "-170.63", "34.42",],
+        "unit": "degree Celsius",
+    };
+
+    var T_10_5Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "-273.15", "-170.96", "33.41",],
+        "unit": "degree Celsius",
+    };
+
+    var T_40_5Legend = { 
+        "colors": [ "#0000ff", "#ffff00", "#ff0000",],
+        "values": [ "16.74", "21.79", "31.9",],
+        "unit": "degree Celsius",
+    };
+
+
+let legendMapping = new Map();
+ legendMapping.set('Surface Temperature',TSurfLegend);
+ legendMapping.set('Surface Albedo',AlbedoLegend);
+ legendMapping.set('Wind Speed-0.3 Meter',WindSpd_0_3Legend);
+ legendMapping.set('Wind Speed-10.5 Meter',WindSpd_10_5Legend);
+ legendMapping.set('Wind Speed-40.5 Meter',WindSpd_40_5Legend);
+ legendMapping.set('Potential Air Temperature-0.3 Meter',T_0_3Legend);
+ legendMapping.set('Potential Air Temperature-10.5 Meter',T_10_5Legend);
+ legendMapping.set('Potential Air Temperature-40.5 Meter',T_40_5Legend);
+
+
+var legend = L.control({position: 'bottomright'});
+
+var legendName=null
+
+function addLegend (map,legendName){
+    this.legendName=legendName;
+    legend.addTo(map);
+    };
+function removeLegend (){
+    legend.remove();
+    };
+
+legend.onAdd = function (map) {
+    legendObject=legendMapping.get(legendName)
+
+    var div = L.DomUtil.create('div', 'info legend'),
+        grades = legendObject.values,
+        colors = legendObject.colors;
+
+    // loop through our density intervals and generate a label with a colored square for each interval
+    div.innerHTML='<h4>'+legendName+'</h4>'
+    for (var i = 0; i < grades.length; i++) {
+        div.innerHTML +=
+            '<i style="background:' + colors[i] + '"></i> ' + grades[i] +' '+legendObject.unit+'<br></br>' ;
+    }
+
+    return div;
+};