From a439e9d2798d0f150d0d62ecb2e3cc0aea4cca24 Mon Sep 17 00:00:00 2001
From: Jack Gilmore <46202639+JackGilmore@users.noreply.github.com>
Date: Sun, 17 Mar 2024 12:05:21 +0000
Subject: [PATCH] Map with key

---
 _layouts/default.html |  6 +++---
 index.html            | 43 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 5 deletions(-)
diff --git a/_layouts/default.html b/_layouts/default.html
index dddf0f9..02b872f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -11,14 +11,14 @@
         <!-- Leaflet -->
         <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
         <script src=" https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.min.js "></script>
+        <!-- <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/js/fontawesome.min.js"></script> -->
         <script src="https://cdn.jsdelivr.net/npm/leaflet.awesome-markers@2.0.5/dist/leaflet.awesome-markers.min.js"></script>
 
         <link href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" rel="stylesheet">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.min.css">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.awesome-markers@2.0.5/dist/leaflet.awesome-markers.min.css">
-
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
     </head>
     <body class="d-flex flex-column h-100">
 
@@ -49,7 +49,7 @@
         </nav>
 
         <!-- Begin page content -->
-        <main class="container flex-shrink-0">
+        <main class="container flex-shrink-0 mb-3">
             {{ content }}
         </main>
 
diff --git a/index.html b/index.html
index c03c87b..ac45f31 100644
--- a/index.html
+++ b/index.html
@@ -40,9 +40,37 @@ <h2>Map</h2>
 
 <div id="map" style="height:500px;"></div>
 
+<h3>Key</h3>
+<ul id="mapKey">
+
+</ul>
+
 <script id="roadsData" type="application/json">
     {{ site.data.roads | jsonify }}
 </script>
+
+<script id="iconMap" type="application/json">
+    {
+        "Bollard - damaged or missing": "road-barrier",
+        "Cobbles - damaged, missing or uneven": "road-circle-xmark",
+        "Crash barrier - damaged or broken": "road-barrier",
+        "Dangerous overhead wires": "bolt",
+        "Guard rail - damaged or broken": "road-barrier",
+        "Lit bollard - damaged or missing": "road-barrier",
+        "Markings - defective": "xmarks-lines",
+        "Oil or Fuel spill": "fill-drip",
+        "Other - pavement or path related": "shoe-prints",
+        "Other - road related": "road",
+        "Other - road sign related": "signs-post",
+        "Overhanging vegetation": "tree",
+        "Pothole": "road-circle-xmark",
+        "Subsidence": "house-crack",
+        "Uneven surface or cracking": "road-circle-exclamation",
+        "Utility cover - broken, high/low or missing": "road-circle-exclamation",
+        "Zebra or pelican crossing": "person-walking"
+      }    
+</script>
+
 <script type="text/javascript">
     var jsonElement = document.getElementById("roadsData");
     var roadsData = JSON.parse(jsonElement.innerHTML);
@@ -72,6 +100,15 @@ <h2>Map</h2>
 
     mostCommonDefectElement.innerHTML = `${mostCommonDefect}<br>${defectTypes[mostCommonDefect].length.toLocaleString()} reports`;
 
+    var iconMapElement = document.getElementById("iconMap");
+    var iconMap = JSON.parse(iconMapElement.innerHTML);
+
+    var keyHtml = Object.keys(iconMap).map(defectType => {
+        return `<li><i class="fa-solid fa-${iconMap[defectType]}"></i>&nbsp; ${defectType}</li>`;
+    }).join("");
+
+    document.getElementById("mapKey").innerHTML = keyHtml;
+
     var map = L.map('map').setView([57.148690, -2.099241], 12);
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -81,13 +118,15 @@ <h2>Map</h2>
     var mapLayer = L.markerClusterGroup();
 
     roadsData.forEach(defect => {
+        var iconClass = iconMap[defect["Problem type"]];
+
         var icon = L.AwesomeMarkers.icon({
-            icon: "exclamation",
+            icon: iconClass,
             prefix: "fa",
             markerColor: "red",
             extraClasses: "fa-solid"
         });
-        var marker = L.marker([parseFloat(defect.Lat), parseFloat(defect.Lng)], {icon: icon});
+        var marker = L.marker([parseFloat(defect.Lat), parseFloat(defect.Lng)], { icon: icon });
         mapLayer.addLayer(marker);
 
 
