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 source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
#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