Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
Showing
with 18 additions and 20 deletions
+18 -20
public/leaflet-stoeckach-heatdemand/index.html
+ 18
- 20
View file @ 77deaf6c
<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">
...@@ -10,11 +8,11 @@ ...@@ -10,11 +8,11 @@
crossorigin=""> crossorigin="">
<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;
...@@ -33,12 +31,17 @@ ...@@ -33,12 +31,17 @@
justify-content: center; justify-content: center;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="mapid"></div> <div id="map-container">
<script> <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 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,
...@@ -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';
} }
...@@ -87,8 +90,10 @@ ...@@ -87,8 +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;
}); });
...@@ -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

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