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/MapChartFreiburg.html 0 → 100644
View file @ 5f55f836
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src=" http://127.0.0.1:3000/Freiburg_Map.html">
<frame src=" http://127.0.0.1:3000/FreiburgChart.html">
</frameset>
</html>
\ No newline at end of file
public/MapChartKarlsruhe.html 0 → 100644
View file @ 5f55f836
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src=" http://127.0.0.1:3000/Karlsruhe_Map.html">
<frame src=" http://127.0.0.1:3000/KarlsruheChart.html">
</frameset>
</html>
\ No newline at end of file
public/MapChartMannheim.html 0 → 100644
View file @ 5f55f836
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src=" http://127.0.0.1:3000/Mannheim_Map.html">
<frame src=" http://127.0.0.1:3000/MannheimChart.html">
</frameset>
</html>
\ No newline at end of file
public/MapChartStuttgart.html 0 → 100644
View file @ 5f55f836
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src=" http://127.0.0.1:3000/Stuttgart_Map.html">
<frame src=" http://127.0.0.1:3000/StuttgartChart.html">
</frameset>
</html>
\ No newline at end of file
public/StromKarlsruhe.csv 0 → 100644
View file @ 5f55f836
MaStR-Nr. der Einheit;Bruttoleistung der Einheit;Nettonennleistung der Einheit;Postleitzahl;Ort;Anzahl der Solar-Module
SEE944219941160;2222;1818;76131;Karlsruhe;10421
SEE925686516303;1057;911;76133;Karlsruhe;5264
SEE916668511621;1731;1563;76135;Karlsruhe;8531
SEE928889467229;886;785;76137;Karlsruhe;3197
SEE902769190681;1936;1777;76139;Karlsruhe;10758
SEE936586945490;1766;1588;76149;Karlsruhe;8069
SEE923838200995;6503;6144;76185;Karlsruhe;29103
SEE964674879013;3357;3032;76187;Karlsruhe;11964
SEE909303632669;4183;3674;76189;Karlsruhe;26110
SEE944995526520;376;342;76199;Karlsruhe;2095
SEE914388991938;3579;3206;76227;Karlsruhe;15163
SEE959550768741;1208;1091;76228;Karlsruhe;5553
SEE988319812883;2184;2028;76229;Karlsruhe;9170
\ No newline at end of file
public/Stuggi.css 0 → 100644
View file @ 5f55f836
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
#chart {
height: 200px;
width: 300px;
}
.info.legend {
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;
}
public/Stuggi.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="Stuggi.css" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
<title>Stuttgart</title>
</head>
<body>
<div id="map"></div>
<script src="Stuggi.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/Stuggi.js 0 → 100644
View file @ 5f55f836
window.addEventListener("load", () => {
$.getJSON("StuggiFinal.geojson", (data) => {
const map = L.map("map").setView([48.775846, 9.182932], 12);
const solar = data.features;
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 >= 6000
? "#BD0026" // dark red
: Bruttoleis >= 3000
? "#E31A1C"
: Bruttoleis >= 1000
? "#FC4E2A"
: Bruttoleis >= 500
? "#FD8D3C"
: Bruttoleis >= 100
? "#FEB24C"
: Bruttoleis >= 50
? "#FED976"
: Bruttoleis === null
? "#FED976"
: "#FFEDA0"; // light red
}
const solarLayer = L.geoJSON(solar, {
style: (feature) => {
const bruttoleis = feature.properties.Bruttoleis;
var color = getColor(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;
var plz_name = feature.properties.plz_name;
// create and display popup on map
let popupContent = `<div><h2>${name} - ${plz_name}</h2></div>
<div>Bruttoleis: ${feature.properties.Bruttoleis}</div>
<div>Nettonennl: ${feature.properties.Nettonennl}</div>
<div>Nettonennl: ${feature.properties.Anzahl_der}</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
},
{
name: "Module",
data: [feature.properties.Anzahl_der], // Wrap the value in an array
},
],
chart: {
type: "bar",
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "20%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ["Bruttoleis", "Nettonennl", "Module"],
},
title: {
text: "Brutto Netto & Anzahl der Module",
},
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/StuggiFinal.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/Stuttgart.geojson 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/StuttgartChart.html 0 → 100644
View file @ 5f55f836
<!DOCTYPE html>
<html>
<head>
<title>Stuttgart 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: "Stuttgart: Chart",
align: "left",
style: {
fontSize: "16px",
fontWeight: "bold",
},
},
series: [
{
name: "Bruttoleistung der Einheit",
data: [
1446,
3903,
1861,
1042,
2183,
5685,
1880,
1540,
1714,
1199,
// 5391,
],
},
{
name: "Nettonennleistung",
data: [
1361,
3422,
1792,
935,
1958,
5106,
1678,
1408,
1548,
1111,
// 5017,
],
},
{
name: "Anzahl der Module",
data: [
5572,
17087,
6991,
4777,
7203,
23992,
7289,
6181,
6477,
3952,
// 28349,
],
},
],
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: [
"70188",
"70327",
"70372",
"70376",
"70469",
"70499",
"70565",
"70567",
"70597",
"70629",
// "70771",
],
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/StuttgartMap.js 0 → 100644
View file @ 5f55f836
This diff is collapsed.
public/Stuttgart_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="StuttgartMap.js"></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

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