Added Chart.js to Leaflet.js

77deaf6c · Rushikesh Padsala · c1e9b3d2 · 77deaf6c
Commit 77deaf6c authored May 29, 2023 by Rushikesh Padsala
--- a/public/leaflet-stoeckach-heatdemand/index.html
+++ b/public/leaflet-stoeckach-heatdemand/index.html
 <html>
-
 <head>
-
    <title>Building - Heat Demand</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,11 +8,11 @@
        crossorigin="">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
-        crossorigin=""></script>      
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 
-<script src="building_data.js"></script>
+        crossorigin=""></script>
+     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>   
+    <script src="building_data.js"></script>
    <link rel="stylesheet" href="index.css">
-        	    <style>
+	    <style>
        body {
            display: flex;
            flex-direction: row;
@@ -33,12 +31,17 @@
            justify-content: center;
        }
    </style>
-
 </head>
-
 <body>
-    <div id="mapid"></div>
-    <script>
+    <div id="map-container">
+        <div id="mapid"></div>
+    </div>
+    <div id="chart-container">
+        <canvas id="yocChart"></canvas>
+    </div>
+	
+
+	    <script>
        var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
        var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
            maxZoom: 18,
@@ -68,7 +71,7 @@
                d > 100 ? '#F6EC00' :
                d > 75 ? '#D1E023' :
                d > 50 ? '#B2D531' :
-                d > 50 ? '#A4C711' :
+                d > 25 ? '#A4C711' :
                d > 0 ? '#61B949' :
                '#FFEDA0';
        }
@@ -87,8 +90,10 @@
            onEachFeature: onEachFeature,
            style: style,
        }).addTo(mymap);
+	

-                // Retrieve the building year of construction data from the GeoJSON
+		
+		// Retrieve the building year of construction data from the GeoJSON
 var buildingYoc = building_data.features.map(function(feature) {
  return feature.properties.Year_of_co;
 });
@@ -143,13 +148,6 @@ var yocChart = new Chart(ctx, {
  }

 });
-
-    </script>
-
-
-
-
-
+</script>
 </body>
-
 </html>