diff --git a/public/leaflet-stoeckach-heatdemand/index.html b/public/leaflet-stoeckach-heatdemand/index.html
index dbbb4feb109ee75edea21827eecbfb5896d0903a..ad492cd097b304a5223f81e2f62487a246acdb49 100644
--- a/public/leaflet-stoeckach-heatdemand/index.html
+++ b/public/leaflet-stoeckach-heatdemand/index.html
@@ -1,7 +1,5 @@
<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>