Render legend from JSON

spatial/static/spatial/js/gridmap.js

@@ -56,7 +56,7 @@ async function switchLayer(dayIndex)
             // See if there is a language specific legend available
             if(currentLayer.Abstract != undefined)
             {
-                document.getElementById("layerLegend").innerHTML=currentLayer.Abstract;
+                document.getElementById("layerLegend").innerHTML= getLegendHTML(JSON.parse(currentLayer.Abstract));
             }
             else // Fallback to auto generated legend
             {
@@ -67,6 +67,54 @@ async function switchLayer(dayIndex)
     setCurrentDate(dayIndex);
 }
 
+let legend_tpl = `<ul style="list-style: none; padding: 0;">$(legendItems)</ul>`
+
+let legendItem_tpl = `<li style="margin-bottom: 5px;"><span style="background-color: #707070;">&nbsp;&nbsp;&nbsp;</span> {{language.no_forecast}}</li>`;
+
+
+/**
+ * Build Legend HTML from Json data, for example:
+ {
+  "isWarningStatus": true,
+  "legendItems": [
+    {
+      "classification": 0,
+      "legendLabel": "Flight period ended",
+      "legendIconCSS": "display: inline-block; background-color: #707070;"
+    },
+    {
+      "classification": 2,
+      "legendLabel": "Flight period not started",
+      "legendIconCSS": "display: inline-block; background-color: #00B457;"
+    },
+    {
+      "classification": 3,
+      "legendLabel": "Flight period starting",
+      "legendIconCSS": "display: inline-block; background-color: #FFCC00;"
+    },
+    {
+      "classification": 4,
+      "legendLabel": "Peak flight activity",
+      "legendIconCSS": "display: inline-block; background-color: #FF0000;"
+    }
+  ]
+}
+ * @param {JSON} jsonData 
+ * @returns {String} HTML to render as a legend
+ */
+function getLegendHTML(jsonData)
+{
+    console.info(jsonData);
+    // Using Template literals (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+    let legendHTML = `<ul style="list-style: none; padding: 0;">`;
+    for(var i=0;i<jsonData.legendItems.length; i++)
+    {
+        legendHTML += `<li style="margin-bottom: 5px;"><span style="width: 25px; ${jsonData.legendItems[i].legendIconCSS}">&nbsp;&nbsp;&nbsp;</span> ${jsonData.legendItems[i].legendLabel}</li>`;
+    }
+    legendHTML += `<ul>`;
+    return legendHTML;    
+}
+
 /**
  * Given the timeseries index, figure out which date it is and display in the time slider
  * @param {Integer} layerIndex