[CQ Award] Added legend on map

application/views/awards/cq/index.php

@@ -3,6 +3,32 @@
 	height: calc(100vh - 430px) !important;
 	max-height: 900px !important;
 }
+/*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">

assets/js/sections/cqmap.js

@@ -153,6 +153,21 @@ function load_cq_map2(data) {
             }
           ).addTo(map).on('click', onClick);
     }
+
+    /*Legend specific*/
+    var legend = L.control({ position: "topright" });
+
+    legend.onAdd = function(map) {
+        var div = L.DomUtil.create("div", "legend");
+        div.innerHTML += "<h4>Colors</h4>";
+        div.innerHTML += '<i style="background: green"></i><span>Confirmed</span><br>';
+        div.innerHTML += '<i style="background: orange"></i><span>Worked not confirmed</span><br>';
+        div.innerHTML += '<i style="background: red"></i><span>Not worked</span><br>';
+        return div;
+    };
+
+    legend.addTo(map);
+
     map.setView([20, 0], 2);
 }