Skip to content

GitLab

Commit 891ee8fb authored by Rushikesh Padsala's avatar Rushikesh Padsala
Browse files

Added Chart.js to Leaflet.js

parent d8909462
Pipeline #7518 passed with stages
in 8 seconds
Hide whitespace changes
Inline Side-by-side
Exercise 1/index.html
View file @ 891ee8fb
<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">
...@@ -11,10 +9,10 @@ ...@@ -11,10 +9,10 @@
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
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 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -34,15 +32,16 @@ ...@@ -34,15 +32,16 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="map-container"> <div id="map-container">
<div id="mapid"></div> <div id="mapid"></div>
</div> </div>
<div id="chart-container"> <div id="chart-container">
<canvas id="yocChart"></canvas> <canvas id="yocChart"></canvas>
</div> </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', {
maxZoom: 18, maxZoom: 18,
...@@ -91,7 +90,10 @@ ...@@ -91,7 +90,10 @@
onEachFeature: onEachFeature, onEachFeature: onEachFeature,
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;
}); });
...@@ -146,12 +148,6 @@ var yocChart = new Chart(ctx, { ...@@ -146,12 +148,6 @@ var yocChart = new Chart(ctx, {
} }
}); });
</script> </script>
</body> </body>
</html> </html>
Markdown is supported
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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal