Updated exercise 1 html

8720af4c · Rushikesh Padsala · 77deaf6c · 8720af4c
Commit 8720af4c authored May 30, 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>
+<title>Building - Heat Demand</title>
 	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
@@ -12,25 +12,6 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>   
    <script src="building_data.js"></script>
    <link rel="stylesheet" href="index.css">
-	    <style>
-        body {
-            display: flex;
-            flex-direction: row;
-            margin: 0;
-            padding: 0;
-        }
-        #map-container {
-            flex: 1;
-            height: 100vh;
-        }
-        #chart-container {
-            flex: 1;
-            padding: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    </style>
 </head>
 <body>
    <div id="map-container">
@@ -39,9 +20,7 @@
    <div id="chart-container">
        <canvas id="yocChart"></canvas>
    </div>
+<script>
-	    <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,
@@ -91,30 +70,28 @@
        style: style,
        }).addTo(mymap);
+// Retrieve the building year of construction data from the GeoJSON
+	var buildingYoc = building_data.features.map(function(feature) {
-		// Retrieve the building year of construction data from the GeoJSON
-var buildingYoc = building_data.features.map(function(feature) {
 		return feature.properties.Year_of_co;
-});
+		});
 // Count the occurrences of each building age
-var yocCounts = {};
+	var yocCounts = {};
-buildingYoc.forEach(function(Year_of_co) {
+		buildingYoc.forEach(function(Year_of_co) {
 		if (yocCounts[Year_of_co]) {
 			yocCounts[Year_of_co]++;
 			} else {
 			yocCounts[Year_of_co] = 1;
 			}
-});
+		});
 // Prepare the chart data
-var yocLabels = Object.keys(yocCounts);
+	var yocLabels = Object.keys(yocCounts);
-var yocData = Object.values(yocCounts);
+	var yocData = Object.values(yocCounts);
 // Create the building year of construction distribution chart using Chart.js
-var ctx = document.getElementById('yocChart').getContext('2d');
+	var ctx = document.getElementById('yocChart').getContext('2d');
-var yocChart = new Chart(ctx, {
+	var yocChart = new Chart(ctx, {
 		type: 'bar',
 		data: {
 		labels: yocLabels,
@@ -123,7 +100,6 @@ var yocChart = new Chart(ctx, {
 		data: yocData,
 		backgroundColor: 'rgba(75, 192, 192, 0.5)',
 		borderColor: 'rgba(75, 192, 192, 1)',
 		borderWidth: 1
 		}]
 	},
@@ -144,9 +120,7 @@ var yocChart = new Chart(ctx, {
        stepSize: 15
      }
    }
  }
 });
 </script>
 </body>