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

first commit

parents
<!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>
This diff is collapsed.
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);
});
});
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
#chart {
height: 200px;
width: 300px;
}
<!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>
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);
});
});
/* *@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>
This diff is collapsed.
<!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>