WAB - changed colours to match the standard in Cloudlog

application/views/awards/wab/index.php

@@ -1,3 +1,33 @@
+<style>
+    /*Legend specific*/
+.legend {
+  padding: 6px 8px;
+  font: 14px Arial, Helvetica, sans-serif;
+  background: white;
+  background: rgba(255, 255, 255, 0.8);
+  line-height: 24px;
+  color: #555;
+}
+.legend h4 {
+  text-align: center;
+  font-size: 16px;
+  margin: 2px 12px 8px;
+  color: #555;
+}
+.legend span {
+  position: relative;
+  bottom: 3px;
+  color: #555;
+}
+.legend i {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin: 0 8px 0 0;
+  opacity: 0.7;
+  color: #555;
+}
+</style>
 <div class="container">
     <!-- Award Info Box --> 
     <br>

application/views/interface_assets/footer.php

@@ -1627,6 +1627,19 @@ if ($this->session->userdata('user_id') != null) {
             hideControlContainer: true
         }).addTo(map);
 
+          /*Legend specific*/
+  var legend = L.control({ position: "topright" });
+
+legend.onAdd = function(map) {
+    var div = L.DomUtil.create("div", "legend");
+    div.innerHTML += "<h4>" + lang_general_word_colors + "</h4>";
+    div.innerHTML += "<i style='background: green'></i><span> Confirmed Square</span><br>";
+    div.innerHTML += "<i style='background: orange'></i><span> Unconfirmed Square</span><br>";
+    return div;
+};
+
+legend.addTo(map);
+
             //console.log(wab_squares.responseJSON);
             // Add requested external GeoJSON to map
             var kywab_squares = L.geoJSON(wab_squares.responseJSON, {
@@ -1634,13 +1647,13 @@ if ($this->session->userdata('user_id') != null) {
                     if (WorkedSquaresArray.indexOf(feature.properties.name) !== -1) {
                         if (ConfirmedSquaresArray.indexOf(feature.properties.name) !== -1) {
                             return {
-                                fillColor: 'red',
+                                fillColor: 'green',
                                 fill: true,
                                 fillOpacity: 1,
                             };
                         } else {
                             return {
-                                fillColor: '#5cb85c',
+                                fillColor: 'orange',
                                 fill: true,
                                 fillOpacity: 1,
                             };