Commit 77deaf6c authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Added Chart.js to Leaflet.js

parent c1e9b3d2
Pipeline #7517 passed with stage
in 15 seconds
Showing with 18 additions and 20 deletions
+18 -20
<html> <html>
<head> <head>
<title>Building - Heat Demand</title> <title>Building - Heat Demand</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
...@@ -12,7 +10,7 @@ ...@@ -12,7 +10,7 @@
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script> crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="building_data.js"></script> <script src="building_data.js"></script>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<style> <style>
body { body {
...@@ -33,11 +31,16 @@ ...@@ -33,11 +31,16 @@
justify-content: center; justify-content: center;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="map-container">
<div id="mapid"></div> <div id="mapid"></div>
</div>
<div id="chart-container">
<canvas id="yocChart"></canvas>
</div>
<script> <script>
var mymap = L.map('mapid').setView([48.79205, 9.20758], 16); 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', { var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
...@@ -68,7 +71,7 @@ ...@@ -68,7 +71,7 @@
d > 100 ? '#F6EC00' : d > 100 ? '#F6EC00' :
d > 75 ? '#D1E023' : d > 75 ? '#D1E023' :
d > 50 ? '#B2D531' : d > 50 ? '#B2D531' :
d > 50 ? '#A4C711' : d > 25 ? '#A4C711' :
d > 0 ? '#61B949' : d > 0 ? '#61B949' :
'#FFEDA0'; '#FFEDA0';
} }
...@@ -88,6 +91,8 @@ ...@@ -88,6 +91,8 @@
style: style, style: style,
}).addTo(mymap); }).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) { var buildingYoc = building_data.features.map(function(feature) {
return feature.properties.Year_of_co; return feature.properties.Year_of_co;
...@@ -143,13 +148,6 @@ var yocChart = new Chart(ctx, { ...@@ -143,13 +148,6 @@ var yocChart = new Chart(ctx, {
} }
}); });
</script>
</script>
</body> </body>
</html> </html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment