BETA version of WHS map application

src/main/webapp/public/nordic_septoria_whs/nordic_septoria_whs.css

+/*
+Copyright (c) 2018 NIBIO <http://www.nibio.no/>. 
+
+This file is part of VIPSLogic.
+VIPSLogic is free software: you can redistribute it and/or modify
+it under the terms of the NIBIO Open Source License as published by 
+NIBIO, either version 1 of the License, or (at your option) any
+later version.
+
+VIPSLogic is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+NIBIO Open Source License for more details.
+
+You should have received a copy of the NIBIO Open Source License
+along with VIPSLogic.  If not, see <http://www.nibio.no/licenses/>.
+
+*/
+/* 
+    Created on : Mar 15, 2018, 3:50:00 PM
+    Author     : treinar
+*/
+#mainMap { grid-area: mainMap; height: 450px;}
+#subMap1 { grid-area: subMap1; height: 250px;}
+#subMap2 { grid-area: subMap2; height: 250px;}
+#subMap3 { grid-area: subMap3; height: 250px;}
+#subMap4 { grid-area: subMap4; height: 250px;}
+
+#zymoGridMapContainer {
+    display: grid;
+    grid-template-areas: 
+        'mainMap mainMap mainMap mainMap'
+        'subMap1 subMap2 subMap3 subMap4';
+    grid-gap: 10px;
+    background-color: white;
+    padding: 0px;
+    border: 10px solid white;
+}
+
+#zymoGridMapContainer > div {
+    position: relative;
+    padding: 0px 0;
+}
+
+#VIPSAttribution, .dateField {
+    position: absolute;
+    z-index: 1000;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: small;
+}
+
+#VIPSAttribution {
+    bottom: 10px;
+    left: 10px;
+}
+
+.dateField {
+    border-radius: 5px;
+    padding: 5px;
+    top: 10px;
+    right: 10px;
+    background-color: white;
+}
+
+#subMap1 .ol-attribution, #subMap2 .ol-attribution, #subMap3 .ol-attribution, #subMap4 .ol-attribution  ,
+#subMap1 .ol-zoom, #subMap2 .ol-zoom, #subMap3 .ol-zoom, #subMap4 .ol-zoom  
+{
+    display: none;
+}
+
+#VIPSLogo {
+    position: relative;
+    bottom: -5px;
+    width: 50px;
+}
\ No newline at end of file

src/main/webapp/public/nordic_septoria_whs/nordic_septoria_whs.js

+/* 
+ * Copyright (c) 2018 NIBIO <http://www.nibio.no/>. 
+ * 
+ * This file is part of VIPSLogic.
+ * VIPSLogic is free software: you can redistribute it and/or modify
+ * it under the terms of the NIBIO Open Source License as published by 
+ * NIBIO, either version 1 of the License, or (at your option) any
+ * later version.
+ * 
+ * VIPSLogic is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * NIBIO Open Source License for more details.
+ * 
+ * You should have received a copy of the NIBIO Open Source License
+ * along with VIPSLogic.  If not, see <http://www.nibio.no/licenses/>.
+ * 
+ */
+
+var hostName;
+var results;
+//var localTimeZoneOffset = 120;
+var todayAtMidnight = getTodayAtMidnight();
+var featureOverlays = {mainMap:null, subMap1: null, subMap2: null, subMap3: null, subMap4: null}; 
+var maps = {mainMap:null, subMap1: null, subMap2: null, subMap3: null, subMap4: null};
+
+var initMap = function ()
+{
+    var zymoGridMapContainer = document.getElementById("zymoGridMapContainer");
+    zymoGridMapContainer.innerHTML = "<div id='mainMap'><div id='mainMapDateField' class='dateField'></div><div id='VIPSAttribution'>Powered by <a href='https://www.vips-landbruk.no/' target='new'><img id='VIPSLogo' src='" + hostName + "/public/nordic_septoria_whs/logo_vips.png'/></a></div></div>"
+                                    + "<div id='subMap1'><div id='subMap1DateField' class='dateField'></div></div>"
+                                    + "<div id='subMap2'><div id='subMap2DateField' class='dateField'></div></div>"
+                                    + "<div id='subMap3'><div id='subMap3DateField' class='dateField'></div></div>"
+                                    + "<div id='subMap4'><div id='subMap4DateField' class='dateField'></div></div>";
+    
+    for(var mapName in featureOverlays)
+    {
+        featureOverlays[mapName] = new ol.layer.Vector({
+            source: new ol.source.Vector({
+              features: new ol.Collection()
+            }),
+            style: getFeatureStyle
+          });
+    }
+    
+    for(var mapName in maps)
+    {
+        maps[mapName] = new ol.Map({
+            target: mapName,
+            layers: [
+              new ol.layer.Tile({
+                source: new ol.source.OSM()
+              }),
+              featureOverlays[mapName]
+            ],
+            view: new ol.View({
+              center: ol.proj.fromLonLat([15.41, 64.0]),
+              zoom: mapName == "mainMap" ? 4 : 3
+            })
+          });
+    }
+    //ajax(hostName + "/rest/forecastresults/-1000", function(e){
+    ajax("http://vipslogic-local.no/rest/forecastresults/-1000", function(e){
+        results = JSON.parse(e.target.responseText);
+        var currentDay = todayAtMidnight;
+        for(var mapName in maps)
+        {
+            displayResults(mapName, currentDay);
+            currentDay.setDate(currentDay.getDate()+1);
+        }
+        // This is here to fix an apparent bug in having Vector tiles
+        // within the CSS grid system
+        window.dispatchEvent(new Event('resize'));
+    });
+};
+
+var featureZIndex = 10;
+
+var getFeatureStyle = function(feature)
+{
+    return [
+            new ol.style.Style({
+                image: new ol.style.Circle({
+                    fill: new ol.style.Fill({ color: [parseInt(feature.get("WHS")) * 255/72, 255 - parseInt(feature.get("WHS")) * 255/72,0,1] }),
+                    stroke: new ol.style.Stroke({ color: [0,0,0,1], width: 3, lineDash: [2,2] }),
+                    radius: 20
+                }),
+                text: new ol.style.Text({
+                    text: feature.get("WHS"),
+                    font: 'bold 15px Times New Roman',
+                }),
+                zIndex: featureZIndex++
+            })
+    ];
+}
+
+var displayResults = function(mapName, date){
+    var features = [];
+    for(var i in results)
+    {
+        //console.info(parseJSONDate(results[i].validTimeStart).getTime() + "==" + date.getTime());
+        if(parseJSONDate(results[i].validTimeStart).getTime() == date.getTime()){
+            //console.info(results[i].validGeometry.coordinates);
+            var feature = new ol.Feature({
+                geometry:new ol.geom.Point(ol.proj.fromLonLat(results[i].validGeometry.coordinates)),
+                WHS: results[i].allValues["GRIDZYMOSE.WHS"]
+            });
+            //console.info(feature.getGeometry());
+            features.push(feature);
+        }
+    }
+    //var featureSource = new ol.source.Vector({features:features});
+    //console.info(features);
+    featureOverlays[mapName].getSource().clear();
+    featureOverlays[mapName].getSource().addFeatures(features);
+    //console.info(featureOverlays.mainMap.getSource().getFeatures());
+    // Setting the results date
+    document.getElementById(mapName + "DateField").innerHTML = date.getFullYear() + "-" + ("0" + (date.getMonth()+1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2);
+};
+
+var ajax = function(url, callback)
+{
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", url);
+    xhr.onload = callback;
+    xhr.send();
+};
+
+function parseJSONDate(theDateString)
+{
+    // This actually does the trick pretty well
+    return new Date(theDateString);
+}
+
+function getTodayAtMidnight()
+{
+    var retVal = new Date();
+    retVal.setHours(0);
+    retVal.setMinutes(0);
+    retVal.setSeconds(0);
+    retVal.setMilliseconds(0);
+    
+    //return retVal;
+    // OR RETURN A FIXED DATE FOR TESTING
+     return new Date("2017-09-09T22:00:00.000+0000");
+}
+
+
+// ###########################################################################
+// All the stuff below is for dynamically loading all JavaScript Libs that are
+// needed to run the application
+
+// After the client document has finished loading, we download OpenLayers and subsequently
+// initialize the map.
+document.addEventListener("DOMContentLoaded", function() {
+  // Some introspection here
+  var me = document.getElementById("zymoGridMapScript");
+  if(me == null || me == undefined)
+  {
+      me = document.currentScript;
+      if(me == null || me == undefined)
+      {
+          failGracefully();
+          return;
+      }
+  }
+  hostName = me.src.substring(0,me.src.indexOf("/public"));
+  // Creating a chain here: First we load ol.css, then nordic_septoria_whs.css 
+  // and finally ol.js. Then we initialize the Map
+  loadHeadElement("link", 
+    {
+        href: hostName + "/public/nordic_septoria_whs/ol.css",
+        rel: "stylesheet",
+        media: "screen"
+    }, 
+    function() {
+        loadHeadElement("link", 
+            {
+                href: hostName + "/public/nordic_septoria_whs/nordic_septoria_whs.css",
+                rel: "stylesheet",
+                media: "screen"
+            },
+            function(){ loadHeadElement("script", { src: hostName + "/public/nordic_septoria_whs/ol.js" }, initMap); }
+        );
+    }
+    );
+});
+/**
+ * Adds a script to the HTML, performs an action AFTER it's been confirmed
+ * loaded (which normally happens asynchronously) and ready
+ * @param {String} url
+ * @param {function} callback
+ */
+var loadScript = function(url, callback)
+{
+    var script = document.createElement("script"); // Make a script DOM node
+    script.src = url; // Set it's src to the provided URL
+    
+    script.onreadystatechange = callback;
+    script.onload = callback;
+    console.info(script);
+    
+    document.head.appendChild(script);
+};
+
+var loadHeadElement = function(type, attributes, callback)
+{
+    var elm = document.createElement(type);
+    
+    for(var attribute in attributes)
+    {
+        if(attributes.hasOwnProperty(attribute))
+        {
+            elm.setAttribute(attribute, attributes[attribute]);
+        }
+    }
+    
+    elm.onreadystatechange = callback;
+    elm.onload = callback;
+    
+    document.head.appendChild(elm);
+};
+
+
+var failGracefully = function() {
+    alert("ERROR: Your current browser does not support the map application.");
+};
+

src/main/webapp/public/nordic_septoria_whs/ol.css

+.ol-box{box-sizing:border-box;border-radius:2px;border:2px solid #00f}.ol-mouse-position{top:8px;right:8px;position:absolute}.ol-scale-line{background:rgba(0,60,136,.3);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.ol-scale-line-inner{border:1px solid #eee;border-top:none;color:#eee;font-size:10px;text-align:center;margin:1px;will-change:contents,width}.ol-overlay-container{will-change:left,right,top,bottom}.ol-unsupported{display:none}.ol-unselectable,.ol-viewport{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ol-selectable{-webkit-touch-callout:default;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ol-grabbing{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.ol-grab{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.ol-control{position:absolute;background-color:rgba(255,255,255,.4);border-radius:4px;padding:2px}.ol-control:hover{background-color:rgba(255,255,255,.6)}.ol-zoom{top:.5em;left:.5em}.ol-rotate{top:.5em;right:.5em;transition:opacity .25s linear,visibility 0s linear}.ol-rotate.ol-hidden{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}.ol-zoom-extent{top:4.643em;left:.5em}.ol-full-screen{right:.5em;top:.5em}@media print{.ol-control{display:none}}.ol-control button{display:block;margin:1px;padding:0;color:#fff;font-size:1.14em;font-weight:700;text-decoration:none;text-align:center;height:1.375em;width:1.375em;line-height:.4em;background-color:rgba(0,60,136,.5);border:none;border-radius:2px}.ol-control button::-moz-focus-inner{border:none;padding:0}.ol-zoom-extent button{line-height:1.4em}.ol-compass{display:block;font-weight:400;font-size:1.2em;will-change:transform}.ol-touch .ol-control button{font-size:1.5em}.ol-touch .ol-zoom-extent{top:5.5em}.ol-control button:focus,.ol-control button:hover{text-decoration:none;background-color:rgba(0,60,136,.7)}.ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.ol-attribution{text-align:right;bottom:.5em;right:.5em;max-width:calc(100% - 1.3em)}.ol-attribution ul{margin:0;padding:0 .5em;font-size:.7rem;line-height:1.375em;color:#000;text-shadow:0 0 2px #fff}.ol-attribution li{display:inline;list-style:none;line-height:inherit}.ol-attribution li:not(:last-child):after{content:" "}.ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.ol-attribution button,.ol-attribution ul{display:inline-block}.ol-attribution.ol-collapsed ul{display:none}.ol-attribution.ol-logo-only ul{display:block}.ol-attribution:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-attribution.ol-uncollapsible{bottom:0;right:0;border-radius:4px 0 0;height:1.1em;line-height:1em}.ol-attribution.ol-logo-only{background:0 0;bottom:.4em;height:1.1em;line-height:1em}.ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.ol-attribution.ol-logo-only button,.ol-attribution.ol-uncollapsible button{display:none}.ol-zoomslider{top:4.5em;left:.5em;height:200px}.ol-zoomslider button{position:relative;height:10px}.ol-touch .ol-zoomslider{top:5.5em}.ol-overviewmap{left:.5em;bottom:.5em}.ol-overviewmap.ol-uncollapsible{bottom:0;left:0;border-radius:0 4px 0 0}.ol-overviewmap .ol-overviewmap-map,.ol-overviewmap button{display:inline-block}.ol-overviewmap .ol-overviewmap-map{border:1px solid #7b98bc;height:150px;margin:2px;width:150px}.ol-overviewmap:not(.ol-collapsed) button{bottom:1px;left:2px;position:absolute}.ol-overviewmap.ol-collapsed .ol-overviewmap-map,.ol-overviewmap.ol-uncollapsible button{display:none}.ol-overviewmap:not(.ol-collapsed){background:rgba(255,255,255,.8)}.ol-overviewmap-box{border:2px dotted rgba(0,60,136,.7)}.ol-overviewmap .ol-overviewmap-box:hover{cursor:move}
\ No newline at end of file