[Gridmap] Added legend for totals

application/views/gridmap/index.php

@@ -1,3 +1,31 @@
+<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: #777;
+}
+.legend span {
+  position: relative;
+  bottom: 3px;
+}
+.legend i {
+  width: 18px;
+  height: 18px;
+  float: left;
+  margin: 0 8px 0 0;
+  opacity: 0.7;
+}
+</style>
 <div class="container">
 
 	<br>

assets/js/sections/gridmap.js

@@ -59,6 +59,21 @@ function gridPlot(form) {
                 exportOnly: true,
                 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>Gridsquares</h4>";
+                div.innerHTML += '<i style="background: green"></i><span>Gridsquares confirmed ('+grid_four_confirmed.length+')</span><br>';
+                div.innerHTML += '<i style="background: red"></i><span>Gridsquares not confirmed ('+(grid_four.length - grid_four_confirmed.length)+')</span><br>';
+                div.innerHTML += '<i></i><span>Total gridsquares worked ('+grid_four.length+')</span><br>';
+                return div;
+            };
+
+            legend.addTo(map);
+
             var maidenhead = L.maidenhead().addTo(map);
 		},
 		error: function (data) {