Commit 901e2e31 authored by Myriam Guedey's avatar Myriam Guedey
Browse files
parents ad2b386a 05c3fcd3
Pipeline #8604 passed with stage
in 16 seconds
......@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>UGL Website</title>
<title>FGDI Website</title> <!--- FGDI TODO: website name to change-->
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<link rel="stylesheet" href="./css/bootstrap.min.css">
......@@ -42,7 +42,7 @@
<ul class="list-unstyled">
<!-- <li><a href="#" class="text-white">Follow on Twitter</a></li> -->
<!-- <li><a href="#" class="text-white">Like on Facebook</a></li> -->
<li><a href="mailto:sven.schneider[at]hft-stuttgart.de">Email me</a></li>
<li><a href="mailto:myriam.guedey[at]hft-stuttgart.de">Email me</a></li>
</ul>
</div>
</div>
......@@ -66,8 +66,8 @@
<section class="jumbotron text-center hftBackground">
<div class="container">
<img src="imgs/ugl.svg" class="windSVG" width="100px" alt="wind">
<h1 class="display-5 fw-bold" >Urban Geoinformatics Lab</h1>
<img src="imgs/ugl.svg" class="windSVG" width="100px" alt="wind"> <!--- FGDI TODO: to change-->
<h1 class="display-5 fw-bold" >Research Group Digitalisation and Information Management</h1> <!--- FGDI TODO: to change-->
<h3 style="color:#cc3125"> @HFT Stuttgart </h3>
</div>
</section>
......@@ -267,14 +267,14 @@
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
<div class="avatar mx-auto">
<img src="./imgs/avatar/volker.Coors.jpg" class="rounded-circle z-depth-1" width="150px">
<img src="./imgs/avatar/DieterUckelmann.png" class="rounded-circle z-depth-1" width="150px">
</div>
<h5 class="font-weight-bold mt-4 mb-3">Prof. Dr. Volker Coors</h5>
<h5 class="font-weight-bold mt-4 mb-3">Prof. Dr. Dieter Uckelmann</h5>
<p class="text-uppercase blue-text"><strong>Lab Leader</strong></p>
<a href="https://www.hft-stuttgart.de/p/volker-coors" target="_blank">
<a href="https://www.hft-stuttgart.de/p/dieter-uckelmann" target="_blank">
<button class="btn btn-primary btn-sm profile">See full profile</button>
</a>
<p class="grey-text">Research topic: Smart Cities | OGC Standards | Sensors & IoT | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data</p>
<p class="grey-text">Research topic: Smart Cities | Sensors & IoT | Industrie 4.0 | Lab-based Education | Digitalisation | Smart Buildings | RFID | RTLS | BM | AI</p>
<ul class="list-unstyled mb-0">
<a class="p-2 fa-lg" href="#" target="_blank">
......@@ -291,25 +291,22 @@
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5">
<div class="col-lg-3 col-md-6 mb-lg-0 mb-5"> <!--- FGDI TODO: to change-->
<div class="avatar mx-auto">
<img src="./imgs/avatar/JoeSquare.jpg" class="rounded-circle z-depth-1" width="150px">
<img src="./imgs/avatar/MyriamGuedey.png" class="rounded-circle z-depth-1" width="150px">
</div>
<h5 class="font-weight-bold mt-4 mb-3">Joe T. Santhanavanich</h5>
<h5 class="font-weight-bold mt-4 mb-3">Myriam Guedey</h5>
<p class="text-uppercase blue-text"><strong>Researcher</strong></p>
<a href="https://www.hft-stuttgart.de/p/thunyathep-santhanavanich" target="_blank">
<a href="https://www.hft-stuttgart.de/p/myriam-guedey" target="_blank">
<button class="btn btn-primary btn-sm profile">See full profile</button>
</a>
<p class="grey-text">Research topic: Smart Cities | OGC Standards | Sensors & IoT | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data</p>
<p class="grey-text">Research topic: Smart Cities | Sensors & IoT | Smart Buildings | Open Source and Open Networks | Sustainable Digitalisation</p>
<ul class="list-unstyled mb-0">
<a class="p-2 fa-lg" href="https://www.researchgate.net/profile/Thunyathep-Santhanavanich" target="_blank">
<a class="p-2 fa-lg" href="https://www.researchgate.net/profile/Myriam-Guedey" target="_blank">
<i class="fab fa-researchgate"></i>
</a>
<a class="p-2 fa-lg" href="https://scholar.google.com/citations?user=RKNY04EAAAAJ&hl=en" target="_blank">
<i class="fab fa-google"></i>
</a>
<a class="p-2 fa-lg" href="https://www.linkedin.com/in/thunyatheps/" target="_blank">
<a class="p-2 fa-lg" href="https://de.linkedin.com/in/myriamguedey" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</ul>
......@@ -319,17 +316,17 @@
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column --> <!--- FGDI TODO: to change-->
<div class="col-lg-3 col-md-6">
<div class="avatar mx-auto">
<img src="./imgs/avatar/rosanny.jpg" class="rounded-circle z-depth-1" width="150px">
<img src="./imgs/avatar/sarah.png" class="rounded-circle z-depth-1" width="150px">
</div>
<h5 class="font-weight-bold mt-4 mb-3">Rosanny S.</h5>
<p class="text-uppercase blue-text"><strong>Researcher</strong></p>
<a href="https://www.hft-stuttgart.de/p/rosanny-sihombing" target="_blank">
<h5 class="font-weight-bold mt-4 mb-3">Dr. Sarah Larsen-Vefring</h5>
<p class="text-uppercase blue-text"><strong>Managing director research thrust 2</strong></p>
<a href="https://www.hft-stuttgart.de/p/sarah-larsen-vefring" target="_blank">
<button class="btn btn-primary btn-sm profile">See full profile</button>
</a>
<p class="grey-text">Research topic: Smart Cities | 3D City Models | 3D Web Visualization | AR/VR</p>
<p class="grey-text">Research topic: Smart Technologies | Processes and Methods | Research Coordination IoT </p>
<ul class="list-unstyled mb-0">
<a class="p-2 fa-lg" href="#" target="_blank">
......@@ -345,16 +342,16 @@
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-3 col-md-6 mb-md-0 mb-5">
<div class="col-lg-3 col-md-6 mb-md-0 mb-5"> <!--- FGDI TODO: to change-->
<div class="avatar mx-auto">
<img src="./imgs/avatar/PatrickSquare.jpg" class="rounded-circle z-depth-1" width="150px">
<img src="./imgs/avatar/sergej.png" class="rounded-circle z-depth-1" width="150px">
</div>
<h5 class="font-weight-bold mt-4 mb-3">Patrick Wuerstle</h5>
<h5 class="font-weight-bold mt-4 mb-3">Sergej Kreber</h5>
<p class="text-uppercase blue-text"><strong>Researcher</strong></p>
<a href="https://www.hft-stuttgart.de/p/patrick-wuerstle" target="_blank">
<a href="https://www.hft-stuttgart.de/p/sergej-kreber" target="_blank">
<button class="btn btn-primary btn-sm profile">See full profile</button>
</a>
<p class="grey-text">Research topic: Smart Cities | OGC Standards | Participation Platform | 3D City Models | 3D Web Visualization | 3D Simulation | Big Data </p>
<p class="grey-text">Research topic: Smart Cities | Sensors & IoT | Smart Buildings</p>
<ul class="list-unstyled mb-0">
<a class="p-2 fa-lg" href="#" target="_blank">
......@@ -385,8 +382,8 @@
<a id="rgc_backtotop" href="#">Back to top</a>
</p>
<p>
<img src="imgs/ugl.svg" alt="" width="32px">
Urban Geoinformatics Lab @HFT Stuttgart, 2020 - <span id="current-year"></span>.</p>
<img src="imgs/grey_dot.svg" alt="" width="32px"> <!--- FGDI TODO: to change ugl -->
Research Group Digitalisation and Information Management @HFT Stuttgart, 2020 - <span id="current-year"></span>.</p> <!--- FGDI TODO: to change the name of the group or to find aanother abbreviation-->
<a href="https://www.hft-stuttgart.de/impressum" target="_blank">Impressum</a>
<a href="https://www.hft-stuttgart.de/datenschutz" target="_blank">Datenschutz</a>
</div>
......
This diff is collapsed.
This diff is collapsed.
#mapid {
height: 100%;
}
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;
}
<html>
<head>
<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"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
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>
<link rel="stylesheet" href="index.css">
</head>
<body>
<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,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
CartoDB_Positron.addTo(mymap);
function onEachFeature(feature, layer) {
layer.bindPopup(
'<h4>' +
feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
.Specific_s +
'[kWh/m².year] </p>');
}
function getColor(d) {
return d > 250 ? '#F22E22' :
d > 200 ? '#F56D1F' :
d > 150 ? '#F9A717' :
d > 125 ? '#FECE02' :
d > 100 ? '#F6EC00' :
d > 75 ? '#D1E023' :
d > 50 ? '#B2D531' :
d > 25 ? '#A4C711' :
d > 0 ? '#61B949' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.Specific_s),
weight: 1,
opacity: 1,
color: 'white',
// dashArray: '3',
fillOpacity: 0.95
};
}
L.geoJSON(building_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(mymap);
// 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 = {};
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 yocData = Object.values(yocCounts);
// Create the building year of construction distribution chart using Chart.js
var ctx = document.getElementById('yocChart').getContext('2d');
var yocChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yocLabels,
datasets: [{
label: 'No. of buildings',
data: yocData,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Building Distribution According to its Year of Construction'
}
},
scales: {
y: {
beginAtZero: true,
stepSize: 15
}
}
}
});
</script>
</body>
</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