Skip to content

GitLab

Commit 5f55f836 authored by Riehmann's avatar Riehmann
Browse files

first commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
public/AIndex.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html>
<head>
<title>Einleitung</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
background-color: #664caf;
color: rgb(243, 235, 235);
padding: 8px;
font-size: 14px;
border: none;
cursor: pointer;
font-family: Optima, sans-serif;
}
.dropdown-content a {
color: rgba(22, 24, 17, 0.76);
padding: 0px 0px;
text-decoration: none;
display: block;
font-family: Optima, sans-serif;
font-size: 13px;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.header {
background: #50a3a2;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
.header h1, .header h5{
text-align: center;
margin: 0;
}
.small-header {
background-image: url("solar.jpg");
background-size: cover;
background-repeat: no-repeat;
padding-top: 20px;
min-height: 30px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.content {
padding: 16px;
}
.city-buttons {
margin-left: auto;
display: flex;
background-size: cover;
gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Photovoltaikanlage für Baden-Württemberg</h1>
<h5>Hochschule für Technik (Geo-visualisierung) Vorgelegt von: Leilani Riehmann</h5>
</div>
<div class="content">
<div class="small-header">
<p style="margin-right: 10px;"><h4 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#023d04">Baden-Württemberg und ausgewählte Ortsteile</h4</p>
<div class="dropdown">
<button class="dropbtn">Baden-Württemberg</button>
<div class="dropdown-content">
<a href="BW_map.html"><h3>interaktive Karte</h3></a>
<a href="BWPopUp.html"><h3>Karte mit PopUp</h3></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Stuttgart</button>
<div class="dropdown-content">
<a href="Stuttgart_Map.html"><h3>Karte</h3></a>
<a href="Stuggi.html"><h3>Karte mit PopUp</h3></a>
<a href="MapChartStuttgart.html"><h3>Karte & Graph</h3></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Freiburg</button>
<div class="dropdown-content">
<a href="Freiburg_map.html"><h3>Karte</h3></a>
<a href="FreiburgChart.html"><h3>Graph</h3></a>
<a href="MapChartFreiburg.html"><h3>Karte & Graph</h3></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Mannheim</button>
<div class="dropdown-content">
<a href="Mannheim_Map.html"><h3>Karte</h3></a>
<a href="MannheimChart.html"><h3>Graph</h3></a>
<a href="MapChartMannheim.html"><h3>Karte & Graph</h3></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Karlsruhe</button>
<div class="dropdown-content">
<a href="Karlsruhe_Map.html"><h3>Karte</h3></a>
<a href="KarlsruheChart.html"><h3>Graph</h3></a>
<a href="MapChartKarlsruhe.html"><h3>Karte & Graph</h3></a>
</div>
</div>
</div>
<br />
<br />
<h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Choroplethenkarte</h2>
<p>
Dieses Projekt zielt darauf ab, die installierte PV-Leistung für <strong>Baden
Württemberg</strong> <br />pro Postleitzahlregion als Choropletenkarte zu
visualisieren.
</p>
<p>
Eine <strong>Choroplethenkarte</strong> ist eine thematische Karte, bei der die Gebiete
im Verhältnis zur <br />Verteilungsdichte
des thematischen Objektes eingefärbt, schattiert, gepunktet oder
schraffiert sind. <br />In diesem Projekt repräsentiert die Farbe der
Karte die installierte PV-Leistung pro Postleitzahlregion.
</p>
<h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Wie man die Karte verwendet</h2>
<p>
Um die Karte zu verwenden, fahren Sie mit der Maus über die
verschiedenen Regionen. <br />Ein Popup-Fenster wird angezeigt, das
Informationen über die installierte PV-Leistung <br /><strong>(Brutto und Netto)</strong> für die jeweilige
Ortsteil enthält. Sie können auch auf die ausgewählte <br /> Ortsteile klicken, um die Karte
und den Graph anzusehen auf diese Region zu zoomen.
</p>
<h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">kWp: Kilowatt-Peak</h2>
<p>
<strong>kWp</strong> steht für <strong>Kilowatt-Peak</strong> und ist ein Maß für die Spitzenleistung,
die eine Photovoltaikanlage unter<br /> Standard-Testbedingungen erreichen kann.
Es gibt an, welche Höchstleistung in Kilowatt (kW)<br /> eine Photovoltaikanlage
erbringen kann, typischerweise gemessen unter festgelegten Bedingungen<br />
wie einer bestimmten Sonneneinstrahlung und Temperatur. Diese Bedingungen
werden <br />als <strong>Standard-Testbedingungen (STC)</strong> bezeichnet.
</p>
<h2 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:#3e8e41">Die Berechnung</h2>
<p>
Die Berechnung der kWp einer Photovoltaikanlage erfolgt:</br>
Zum Beispiel: 12 Module mit einer Leistung von jeweils 400:
<p>
<strong>Anlagenleistung</strong> = Anzahl der Module * Leistung eines Moduls</br>
<br />
<strong>Anlagenleistung</strong> = 12 * 400 Wp = 4800 Wp oder 4,8 kWp
</p>
</div>
</div>
</body>
</html>
public/BW.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/BWMap.js 0 → 100644
View file @ 5f55f836
var map_data;
document.addEventListener("DOMContentLoaded", function () {
fetch("BW.geojson")
.then((response) => response.json())
.then((data) => {
map_data = data;
var container = L.DomUtil.get("map");
if (container != null) {
container._leaflet_id = null;
}
var map = L.map("map").setView(
[48.726605690296552, 9.211547316465603],
8
);
var tiles = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 12,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
).addTo(map);
function getColor(Bruttoleis) {
return Bruttoleis >= 25000
? "#BD0026" // dark red
: Bruttoleis >= 18000
? "#E31A1C"
: Bruttoleis >= 15000
? "#FC4E2A"
: Bruttoleis >= 1000
? "#FD8D3C"
: Bruttoleis >= 500
? "#FEB24C"
: Bruttoleis === null
? "#FED976"
: "#FFEDA0"; // light red
}
function style(feature) {
console.log(feature.properties.Bruttoleis);
var color = getColor(feature.properties.Bruttoleis);
return {
fillColor: color,
weight: 1,
opacity: 1,
color: "green",
dashArray: "3",
fillOpacity: 0.95,
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7,
});
layer.bringToFront();
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
var bruttoleis = feature.properties.Bruttoleis
? feature.properties.Bruttoleis
: "";
layer.bindPopup(
"<h4>" +
feature.properties.plz_name_lo +
"</h4>" +
bruttoleis + // feature.properties.Bruttoleis +
": Bruttoleistung der Einheit: kWp:</p>"
);
layer.on({
mouseover: function (e) {
highlightFeature(e);
info.update(feature.properties);
},
mouseout: resetHighlight,
click: zoomToFeature,
});
}
// },
L.geoJSON(map_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Baden Württemberg</h4>" +
(props
? "<b>" +
props.plz_name_lo +
"</b><br />" +
props.Bruttoleis +
" kWp "
: "");
};
info.addTo(map);
var legend = L.control({ position: "bottomright" });
legend.onAdd = function (map) {
var div = L.DomUtil.create("div", "info legend");
var ranges = [25000, 18000, 15000, 1000, 500, null];
div.innerHTML = "<h4>Bruttoleistung der Einheit: <br /> kWp > 500</h4>";
for (var i = 0; i < ranges.length; i++) {
div.innerHTML +=
'<i style="background:' +
getColor(ranges[i]) +
'"></i>' +
'<span style="color:' +
getColor(ranges[i]) +
'">' +
"<strong>" +
ranges[i] +
"</strong>" +
(ranges[i + 1] ? "&ndash;" + ranges[i + 1] : "+");
}
return div;
};
legend.addTo(map);
})
.catch((error) => {
console.error("Error loading Geojson data:", error);
});
});
public/BWPopUp.css 0 → 100644
View file @ 5f55f836
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
#chart {
height: 200px;
width: 300px;
}
public/BWPopUp.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="BWPopUp.css" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<title>Baden-Württemberg</title>
</head>
<body>
<div id="map"></div>
<script src="BWPopUp.js"></script>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""
></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"
></script>
</body>
</html>
public/BWPopUp.js 0 → 100644
View file @ 5f55f836
window.addEventListener("load", () => {
$.getJSON("BW.geojson", (data) => {
const map = L.map("map").setView(
[48.726605690296552, 9.211547316465603],
8
);
const solar = data.features;
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 10,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
function getColor(Bruttoleis) {
return Bruttoleis >= 25000
? "#BD0026" // dark red
: Bruttoleis >= 18000
? "#E31A1C"
: Bruttoleis >= 15000
? "#FC4E2A"
: Bruttoleis >= 1000
? "#FD8D3C"
: Bruttoleis >= 500
? "#FEB24C"
: Bruttoleis === null
? "#FED976"
: "#FFEDA0"; // light red
}
const solarLayer = L.geoJSON(solar, {
style: (feature) => {
const bruttoleis = feature.properties.Bruttoleis;
var color = getColor(feature.properties.Bruttoleis);
return {
fillColor: color,
weight: 1,
opacity: 1,
color: "green",
dashArray: "3",
fillOpacity: 0.95,
};
},
onEachFeature: (feature, layer) => {
layer.on("click", (e) => {
var name = feature.properties.name || "Unknown"; // ? feature.properties.name
// : "Unknown";
var plz_name = feature.properties.plz_name || "Unknown";
// ("No postcode available"); // ? feature.properties.plz_name
// : "Unknown";
var bruttoleis = feature.properties.Bruttoleis
? feature.properties.Bruttoleis
: "No data";
var nettonennl = feature.properties.Nettonennl
? feature.properties.Nettonennl
: "No data";
// create and display popup on map
let popupContent = `<div><h2>${name} - ${plz_name}</h2></div>
<div>Bruttoleis: ${bruttoleis}</div>
<div>Nettonennl: ${nettonennl}</div>
<div id="chart"></div>`;
// create and display popup on map
let popup = L.popup()
.setLatLng(e.latlng)
.setContent(popupContent)
.openOn(map);
// apexchart options
const options = {
series: [
{
name: "Bruttoleis",
data: [feature.properties.Bruttoleis],
},
{
name: "Nettonennl",
data: [feature.properties.Nettonennl], // Wrap the value in an array
},
],
chart: {
type: "bar",
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "20%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ["Bruttoleis", "Nettonennl"], // Categories should match your data properties
},
title: {
text: "Brutto und Netto",
},
yaxis: {
title: {
text: "Values kWp",
},
},
fill: {
opacity: 1,
},
};
const chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
// popup close event
popup.on("remove", () => {
chart.destroy();
const chartNode = document.getElementById("chart");
chartNode.parentNode.replaceChildren();
});
});
},
}).addTo(map);
});
});
public/BW_map.html 0 → 100644
View file @ 5f55f836
/* *@version: 01.12.2023 *@author: Leilani Riehmann * */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choropleth Map</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.leaflet-popup-content-wrapper {
background-color: gray;
color: white;
}
#chart {
height: 200px;
width: 300px;
}
.info.legend {
padding: 5px;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.info.legend i {
width: 18px;
height: 18px;
margin-bottom: 4px;
opacity: 0.7;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<div id="map" style="height: 100vh;"></div>
<canvas id="myChart"></canvas>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="BWMap.js"></script>
</body>
</html>
public/Freiburg.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/FreiburgChart.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html>
<head>
<title>Freiburg im Breisgau Chart</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="chart"></div>
<script>
var options = {
title: {
text: "Freiburg in Breisgau: Chart",
align: "left",
style: {
fontSize: "16px",
fontWeight: "bold",
},
},
series: [
{
name: "Bruttoleistung der Einheit",
data: [
319,
1881,
149,
725,
2082,
16098,
1681,
6925,
2723,
794,
3264,
1798,
3839,
450,
97,
65,
],
},
{
name: "Nettonennleistung",
data: [
298,
1606,
129,
667,
1842,
14546,
1486,
6616,
2523,
702,
3045,
1734,
3577,
432,
84,
58,
],
},
{
name: "Anzahl der Module",
data: [
1572,
9312,
1379,
3061,
8383,
70228,
9147,
32295,
13711,
4118,
13531,
8882,
13750,
1516,
608,
239,
],
},
],
chart: {
type: "bar",
height: 650,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 380,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10,
dataLabels: {
total: {
enabled: false,
style: {
fontSize: "13px",
fontWeight: 900,
},
},
},
},
},
xaxis: {
type: "postleitzahl",
categories: [
"79098",
"79100",
"79102",
"79104",
"79106",
"79108",
"79110",
"79111",
"79112",
"79114",
"79115",
"79206",
"79224",
"79227",
"79254",
],
tickPlacement: "on",
title: {
text: "Postleitzahl", // replace with your actual title
offsetX: 0,
offsetY: 0,
style: {
color: "#78909C",
fontSize: "12px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
cssClass: "apexcharts-xaxis-title",
},
},
},
legend: {
position: "right",
offsetY: 40,
},
fill: {
opacity: 1,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
public/FreiburgMap.js 0 → 100644
View file @ 5f55f836
var map_data;
document.addEventListener("DOMContentLoaded", function () {
fetch("Freiburg.geojson")
.then((response) => response.json())
.then((data) => {
map_data = data;
var container = L.DomUtil.get("map");
if (container != null) {
container._leaflet_id = null;
}
var map = L.map("map").setView([47.999008, 7.842104], 12);
var tiles = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 12,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
).addTo(map);
function getColor(Bruttoleis) {
return Bruttoleis >= 17000
? "#800026" // dark red
: Bruttoleis >= 4000
? "#BD0026"
: Bruttoleis >= 2000
? "#E31A1C"
: Bruttoleis >= 1000
? "#FC4E2A"
: Bruttoleis >= 50
? "#FC4E2A"
: Bruttoleis === null
? "yellow"
: "#FFEDA0"; // light red
}
function style(feature) {
console.log(feature.properties.Bruttoleis);
var color = getColor(feature.properties.Bruttoleis);
return {
fillColor: color,
weight: 1,
opacity: 1,
color: "green",
dashArray: "3",
fillOpacity: 0.95,
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7,
});
layer.bringToFront();
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
var bruttoleis = feature.properties.Bruttoleis
? feature.properties.Bruttoleis
: "";
layer.bindPopup(
"<h4>" +
feature.properties.plz_name_lo +
"</h4>" +
bruttoleis + // feature.properties.Bruttoleis +
": Bruttoleistung der Einheit: kWp:</p>"
);
layer.on({
mouseover: function (e) {
highlightFeature(e);
info.update(feature.properties);
},
mouseout: resetHighlight,
click: zoomToFeature,
});
}
// },
L.geoJSON(map_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Baden Württemberg</h4>" +
(props
? "<b>" +
props.plz_name_lo +
"</b><br />" +
props.Bruttoleis +
" kWp "
: "");
};
info.addTo(map);
var legend = L.control({ position: "bottomright" });
legend.onAdd = function (map) {
var div = L.DomUtil.create("div", "info legend");
var ranges = [17000, 4000, 2000, 1000, 50, null];
div.innerHTML = "<h4>Bruttoleistung der Einheit: <br /> kWp </h4>";
for (var i = 0; i < ranges.length; i++) {
div.innerHTML +=
'<i style="background:' +
getColor(ranges[i]) +
'"></i>' +
'<span style="color:' +
getColor(ranges[i]) +
'">' +
"<strong>" +
ranges[i] +
"</strong>" +
(ranges[i + 1] ? "&ndash;" + ranges[i + 1] : "+");
}
return div;
};
legend.addTo(map);
})
.catch((error) => {
console.error("Error loading Geojson data:", error);
});
});
public/Freiburg_map.html 0 → 100644
View file @ 5f55f836
/* *@version: 01.12.2023 *@author: Leilani Riehmann * */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choropleth Map</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.info.legend {
padding: 5px;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.info.legend i {
width: 18px;
height: 18px;
margin-bottom: 4px;
opacity: 0.7;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<div id="map" style="height: 100vh;"></div>
<canvas id="myChart"></canvas>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="FreiburgMap.js"></script>
</body>
</html>
public/Karlsruhe.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/KarlsruheChart.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html>
<head>
<title>Freiburg im Breisgau Chart</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="chart"></div>
<script>
var options = {
title: {
text: "Karlsruhe: Chart",
align: "left",
style: {
fontSize: "16px",
fontWeight: "bold",
},
},
series: [
{
name: "Bruttoleistung der Einheit",
data: [
2222,
1057,
1731,
886,
1936,
1766,
6503,
3357,
4183,
376,
3579,
1208,
2184,
],
},
{
name: "Nettonennleistung",
data: [
1818,
911,
1563,
785,
1777,
1588,
6144,
3032,
3674,
342,
3206,
1091,
2028,
],
},
{
name: "Anzahl der Module",
data: [
10421,
5264,
8531,
3197,
10758,
8069,
29103,
11964,
26110,
2095,
15163,
5553,
9170,
,
],
},
],
chart: {
type: "bar",
height: 650,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 380,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10,
dataLabels: {
total: {
enabled: false,
style: {
fontSize: "13px",
fontWeight: 900,
},
},
},
},
},
xaxis: {
type: "postleitzahl",
categories: [
76131,
76133,
76135,
76137,
76139,
76149,
76185,
76187,
76189,
76199,
76227,
76228,
76229,
],
tickPlacement: "on",
title: {
text: "Postleitzahl", // replace with your actual title
offsetX: 0,
offsetY: 0,
style: {
color: "#78909C",
fontSize: "12px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
cssClass: "apexcharts-xaxis-title",
},
},
},
legend: {
position: "right",
offsetY: 40,
},
fill: {
opacity: 1,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
public/KarlsruheMap.js 0 → 100644
View file @ 5f55f836
var map_data;
document.addEventListener("DOMContentLoaded", function () {
fetch("Karlsruhe.geojson")
.then((response) => response.json())
.then((data) => {
map_data = data;
var container = L.DomUtil.get("map");
if (container != null) {
container._leaflet_id = null;
}
var map = L.map("map").setView([49.00689, 8.403653], 12);
var tiles = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 12,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
).addTo(map);
function getColor(Bruttoleis) {
return Bruttoleis >= 5000
? "#BD0026" // dark red
: Bruttoleis >= 4000
? "#E31A1C"
: Bruttoleis >= 1000
? "#FC4E2A"
: Bruttoleis >= 500
? "#FD8D3C"
: Bruttoleis >= 100
? "#FEB24C"
: Bruttoleis === null
? "FED976"
: "#FFEDA0"; // light red
}
function style(feature) {
console.log(feature.properties.Bruttoleis);
var color = getColor(feature.properties.Bruttoleis);
return {
fillColor: color,
weight: 1,
opacity: 1,
color: "green",
dashArray: "3",
fillOpacity: 0.95,
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7,
});
layer.bringToFront();
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
var bruttoleis = feature.properties.Bruttoleis
? feature.properties.Bruttoleis
: "";
layer.bindPopup(
"<h4>" +
feature.properties.plz_name_lo +
"</h4>" +
bruttoleis + // feature.properties.Bruttoleis +
": Bruttoleistung der Einheit: kWp:</p>"
);
layer.on({
mouseover: function (e) {
highlightFeature(e);
info.update(feature.properties);
},
mouseout: resetHighlight,
click: zoomToFeature,
});
}
// },
L.geoJSON(map_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Baden Württemberg</h4>" +
(props
? "<b>" +
props.plz_name_lo +
"</b><br />" +
props.Bruttoleis +
" kWp "
: "");
};
info.addTo(map);
var legend = L.control({ position: "bottomright" });
legend.onAdd = function (map) {
var div = L.DomUtil.create("div", "info legend");
var ranges = [25000, 18000, 15000, 1000, 500, null];
div.innerHTML = "<h4>Bruttoleistung der Einheit: <br /> kWp /h4>";
for (var i = 0; i < ranges.length; i++) {
div.innerHTML +=
'<i style="background:' +
getColor(ranges[i]) +
'"></i>' +
'<span style="color:' +
getColor(ranges[i]) +
'">' +
"<strong>" +
ranges[i] +
"</strong>" +
(ranges[i + 1] ? "&ndash;" + ranges[i + 1] : "+");
}
return div;
};
legend.addTo(map);
})
.catch((error) => {
console.error("Error loading Geojson data:", error);
});
});
public/Karlsruhe_Map.html 0 → 100644
View file @ 5f55f836
/* *@version: 01.12.2023 *@author: Leilani Riehmann * */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choropleth Map</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.info.legend {
padding: 5px;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.info.legend i {
width: 18px;
height: 18px;
margin-bottom: 4px;
opacity: 0.7;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<div id="map" style="height: 100vh;"></div>
<canvas id="myChart"></canvas>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="KarlsruheMap.js"></script>
</body>
</html>
public/Mannheim.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/MannheimChart.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html>
<head>
<title>Freiburg im Breisgau Chart</title>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="chart"></div>
<script>
var options = {
title: {
text: "Mannheim: Chart",
align: "left",
style: {
fontSize: "16px",
fontWeight: "bold",
},
},
series: [
{
name: "Bruttoleistung der Einheit",
data: [
3339,
412,
3267,
2618,
2126,
5845,
7941,
7190,
3857,
1123,
2177,
2831,
2987,
7345,
30,
],
},
{
name: "Nettonennleistung",
data: [
2783,
395,
2821,
2401,
1941,
5278,
6916,
6470,
3387,
1022,
1869,
2425,
2649,
6557,
30,
],
},
{
name: "Anzahl der Module",
data: [
13211,
1914,
10287,
15833,
9723,
28924,
40747,
29460,
17856,
5458,
7350,
10880,
14519,
26291,
152,
],
},
],
chart: {
type: "bar",
height: 650,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 380,
options: {
legend: {
position: "bottom",
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10,
dataLabels: {
total: {
enabled: false,
style: {
fontSize: "13px",
fontWeight: 900,
},
},
},
},
},
xaxis: {
type: "postleitzahl",
categories: [
68159,
68161,
68163,
68165,
68167,
68169,
68199,
68219,
68229,
68239,
68259,
68305,
68307,
68309,
68535,
],
tickPlacement: "on",
title: {
text: "Postleitzahl", // replace with your actual title
offsetX: 0,
offsetY: 0,
style: {
color: "#78909C",
fontSize: "12px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: 600,
cssClass: "apexcharts-xaxis-title",
},
},
},
legend: {
position: "right",
offsetY: 40,
},
fill: {
opacity: 1,
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
public/MannheimMap.js 0 → 100644
View file @ 5f55f836
var map_data;
document.addEventListener("DOMContentLoaded", function () {
fetch("Mannheim.geojson")
.then((response) => response.json())
.then((data) => {
map_data = data;
var container = L.DomUtil.get("map");
if (container != null) {
container._leaflet_id = null;
}
var map = L.map("map").setView([49.4874592, 8.4660395], 12);
var tiles = L.tileLayer(
"https://tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 12,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
).addTo(map);
function getColor(Bruttoleis) {
return Bruttoleis >= 8000
? "#BD0026" // dark red
: Bruttoleis >= 6000
? "#E31A1C"
: Bruttoleis >= 2000
? "#FC4E2A"
: Bruttoleis >= 500
? "#FD8D3C"
: Bruttoleis >= 20
? "#FEB24C"
: Bruttoleis === null
? "#FED976"
: "#FFEDA0"; // light red
}
function style(feature) {
console.log(feature.properties.Bruttoleis);
var color = getColor(feature.properties.Bruttoleis);
return {
fillColor: color,
weight: 1,
opacity: 1,
color: "green",
dashArray: "3",
fillOpacity: 0.95,
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color: "#666",
dashArray: "",
fillOpacity: 0.7,
});
layer.bringToFront();
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
var bruttoleis = feature.properties.Bruttoleis
? feature.properties.Bruttoleis
: "";
layer.bindPopup(
"<h4>" +
feature.properties.plz_name_lo +
"</h4>" +
bruttoleis + // feature.properties.Bruttoleis +
": Bruttoleistung der Einheit kWp:</p>"
);
layer.on({
mouseover: function (e) {
highlightFeature(e);
info.update(feature.properties);
},
mouseout: resetHighlight,
click: zoomToFeature,
});
}
// },
L.geoJSON(map_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML =
"<h4>Baden Württemberg</h4>" +
(props
? "<b>" +
props.plz_name_lo +
"</b><br />" +
props.Bruttoleis +
" kWp "
: "");
};
info.addTo(map);
var legend = L.control({ position: "bottomright" });
legend.onAdd = function (map) {
var div = L.DomUtil.create("div", "info legend");
var ranges = [25000, 18000, 15000, 1000, 500, null];
div.innerHTML = "<h4>Bruttoleistung der Einheit: <br /> kWp </h4>";
for (var i = 0; i < ranges.length; i++) {
div.innerHTML +=
'<i style="background:' +
getColor(ranges[i]) +
'"></i>' +
'<span style="color:' +
getColor(ranges[i]) +
'">' +
"<strong>" +
ranges[i] +
"</strong>" +
(ranges[i + 1] ? "&ndash;" + ranges[i + 1] : "+");
}
return div;
};
legend.addTo(map);
})
.catch((error) => {
console.error("Error loading Geojson data:", error);
});
});
public/Mannheim_Map.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/Mannheim_Map.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Choropleth Map</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.info.legend {
padding: 5px;
background: white;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.info.legend i {
width: 18px;
height: 18px;
margin-bottom: 4px;
opacity: 0.7;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
</style>
</head>
<body>
<div id="map" style="height: 100vh;"></div>
<canvas id="myChart"></canvas>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="MannheimMap.js"></script>
</body>
</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