Map

CodeTheCity · Mar 17, 2024 · 26e6149 · 26e6149
1 parent bb307e9
commit 26e6149
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 11 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,9 +5,16 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="utf-8">
         <title>{{ page.title }} - {{ site.title }}</title>
+        <!-- Bootstrap -->
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"/>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+        <!-- 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>
+        <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">
+
     </head>
     <body class="d-flex flex-column h-100">
 

diff --git a/index.html b/index.html
@@ -2,40 +2,44 @@
 title: "Home"
 ---
 
-<h1>Overview</h1>
+<h2>Overview</h2>
 <div class="row row-cols-1 row-cols-md-3 g-4">
     <div class="col">
-        <div class="card">
+        <div class="card h-100">
             <div class="card-body">
                 <p class="card-title h4">No. of outstanding defects</p>
                 <p class="card-text text-center fs-1 fw-bold" id="defectTotal">
-                    ##
+
                 </p>
             </div>
         </div>
     </div>
     <div class="col">
-        <div class="card">
+        <div class="card h-100">
             <div class="card-body">
                 <p class="card-title h4">Oldest outstanding defect</p>
                 <p class="card-text text-center fs-1 fw-bold" id="oldestDefect">
-                    ##
+
                 </p>
             </div>
         </div>
     </div>
     <div class="col">
-        <div class="card">
-            <div class="card-body h4">
-                <p class="card-title">Most common defect</p>
+        <div class="card h-100">
+            <div class="card-body">
+                <p class="card-title h4">Most common defect</p>
                 <p class="card-text text-center fs-1 fw-bold" id="mostCommonDefect">
-                    ##
+
                 </p>
             </div>
         </div>
     </div>
 </div>
 
+<h2>Map</h2>
+
+<div id="map" style="height:400px;"></div>
+
 <script id="roadsData" type="application/json">
     {{ site.data.roads | jsonify }}
 </script>
@@ -68,6 +72,23 @@ <h1>Overview</h1>
 
     mostCommonDefectElement.innerHTML = `${mostCommonDefect}<br>${defectTypes[mostCommonDefect].length.toLocaleString()} reports`;
 
-    debugger;
+    var map = L.map('map').setView([57.148690, -2.099241], 11);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    var mapLayer = L.markerClusterGroup();
+
+    roadsData.forEach(defect => {
+
+        var marker = L.marker([parseFloat(defect.Lat),parseFloat(defect.Lng)]);
+        mapLayer.addLayer(marker);
+
+
+    });
+
+    mapLayer.addTo(map);
+
 
 </script>