Skip to content
GitLab
Commit 2b6e1bed authored by Eric Duminil's avatar Eric Duminil
Browse files

Trying to upload maps

parent cd022528
Pipeline #11032 failed with stages
in 6 seconds
Hide whitespace changes
Inline Side-by-side
public/baden-wuerttemberg.html 0 → 100644
View file @ 2b6e1bed
This source diff could not be displayed because it is too large. You can view the blob instead.
public/training.html 0 → 100644
View file @ 2b6e1bed
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#germany_1 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
.leaflet-container { font-size: 1rem; }
</style>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.1.0/MarkerCluster.Default.css"/>
</head>
<body>
<h1>Quartiersarchetypen (Trainingsdaten)</h1>
<div class="folium-map" id="germany_1" ></div>
</body>
<script>
const qa_names = ['QA1 (EFH/ZFH)', 'QA2 (MFH)', 'QA3 (MFH groß)', 'QA4 (Innenstadtwohnen)', 'QA5 (Gewerbe)'];const qa_colors = ['cadetblue', 'darkgreen', 'darkred', 'beige', 'black'];const qa_icons = ['house-chimney', 'building', 'city', 'landmark', 'industry']
document.addEventListener('DOMContentLoaded', function() {
// Access the map instance
var map = Object.values(window).find(function(v) {
return v && v._container && v._leaflet_id;
});
if (!map) {
console.error("Could not find map instance");
return;
}
// Include Proj4js for coordinate transformation
var script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js';
document.head.appendChild(script);
script.onload = function() {
// Define the EPSG:3035 projection
proj4.defs('EPSG:3035', '+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');
// Array to store selected tiles
var selectedTiles = [];
// Create a control element to display coordinates
var coordinateControl = L.control({position: 'bottomleft'});
coordinateControl.onAdd = function(_map) {
this._div = L.DomUtil.create('div', 'coordinate-info');
this._div.style.padding = '5px 10px 30px 10px';
this._div.style.background = 'rgba(255,255,255,0.8)';
this._div.style.border = '1px solid #ccc';
this._div.style.borderRadius = '5px';
this.update();
return this._div;
};
function toPLZ(coords){
return "500mN" + (coords.y / 100).toFixed(0) + "E" + (coords.x / 100).toFixed(0);
}
coordinateControl.update = function(coords) {
if (!coords) {
this._div.innerHTML = 'Hover on map to show coordinates';
} else {
this._div.innerHTML = 'X: ' + coords.x.toFixed(0) + ' Y: ' + coords.y.toFixed(0) + ' (ESPSG:3035) ' + toPLZ(coords);
}
};
// Add the control to the map
coordinateControl.addTo(map);
// Create a rectangle that will follow the mouse cursor
var mouseRectangle = null;
// Convert WGS84 (lat, lon) to EPSG:3035
function toEPSG3035(lat, lng) {
return proj4('EPSG:4326', 'EPSG:3035', [lng, lat]);
}
// Convert EPSG:3035 to WGS84 (lat, lon)
function toWGS84(x, y) {
var result = proj4('EPSG:3035', 'EPSG:4326', [x, y]);
return [result[1], result[0]]; // Convert [lng, lat] to [lat, lng]
}
// Snap to 500m grid
function snapToGrid(x, y) {
return {
x: Math.floor(x / 500) * 500,
y: Math.floor(y / 500) * 500
};
}
// Calculate rectangle bounds (500m × 500m) - FIXED VERSION
function createTileBounds(x, y) {
// Get the exact corners in EPSG:3035
var sw3035 = [x, y];
var se3035 = [x + 500, y];
var nw3035 = [x, y + 500];
var ne3035 = [x + 500, y + 500];
// Convert all corners to WGS84
var sw = toWGS84(sw3035[0], sw3035[1]);
var se = toWGS84(se3035[0], se3035[1]);
var nw = toWGS84(nw3035[0], nw3035[1]);
var ne = toWGS84(ne3035[0], ne3035[1]);
// Return as a polygon instead of a rectangle to ensure exact shape
return [sw, se, ne, nw, sw];
}
// Copy text to clipboard
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Show a notification
const notification = document.createElement('div');
notification.textContent = 'Copied to clipboard: ' + text;
notification.style.position = 'fixed';
notification.style.bottom = '20px';
notification.style.left = '50%';
notification.style.transform = 'translateX(-50%)';
notification.style.padding = '10px 20px';
notification.style.background = 'rgba(0,0,0,0.7)';
notification.style.color = 'white';
notification.style.borderRadius = '5px';
notification.style.zIndex = '1000';
document.body.appendChild(notification);
setTimeout(function() {
document.body.removeChild(notification);
}, 2000);
}
// Check if a tile is already selected
function isTileSelected(x, y) {
return selectedTiles.some(function(tile) {
return tile.x === x && tile.y === y;
});
}
// Get the tile index from selectedTiles
function getTileIndex(x, y) {
return selectedTiles.findIndex(function(tile) {
return tile.x === x && tile.y === y;
});
}
// Create sliders panel for a tile
function createSlidersPanel(tileCenter, x, y) {
// Create a custom popup for the sliders
var popupContent = document.createElement('div');
popupContent.style.width = '250px';
popupContent.style.padding = '10px';
// Add title
var title = document.createElement('h4');
title.textContent = 'QAs for ' + toPLZ({x: x, y: y});
title.style.margin = '0 0 10px 0';
popupContent.appendChild(title);
// Create 5 sliders
var sliders = [];
var labels = [];
var values = [20, 20, 20, 20, 20]; // Initial values, equal distribution
var normalized_values = [0.2, 0.2, 0.2, 0.2, 0.2]; // Initial values, sum to 1
// Create slider function
function createSlider(index) {
var sliderContainer = document.createElement('div');
sliderContainer.style.margin = '10px 0';
// Create label
var label = document.createElement('div');
label.textContent = qa_names[index] + ': ' + values[index];
label.style.marginBottom = '5px';
labels.push(label);
// Create slider
var slider = document.createElement('input');
slider.type = 'range';
slider.min = 0;
slider.max = 100;
slider.step = 5;
slider.value = values[index];
slider.style.width = '100%';
// Add event listener
slider.addEventListener('input', function() {
// Update this slider's value
values[index] = parseInt(slider.value);
// Calculate total of all sliders
var total = values.reduce((a, b) => a + b, 0);
if (total > 0){
// Normalize values to sum to 1
normalized_values = values.map(v => v / total);
// Format as CSV with values divided by 100 (0.20;0.30;...)
var csvString = normalized_values.map(v => v.toFixed(2)).join(';');
copyButton.textContent = toPLZ({x: x, y: y}) + ";" + csvString;
} else {
normalized_values = [0, 0, 0, 0, 0];
copyButton.textContent = "Select at least one QA";
}
// Update all labels
for (var i = 0; i < 5; i++) {
labels[i].textContent = qa_names[i] + ': ' + values[i].toFixed(0);
}
});
sliders.push(slider);
sliderContainer.appendChild(label);
sliderContainer.appendChild(slider);
return sliderContainer;
}
// Add all sliders
for (var i = 0; i < 5; i++) {
popupContent.appendChild(createSlider(i));
}
// Add copy button
var copyButton = document.createElement('button');
copyButton.textContent = 'Copy Distribution';
copyButton.style.marginTop = '10px';
copyButton.style.padding = '5px 10px';
copyButton.style.backgroundColor = '#4CAF50';
copyButton.style.color = 'white';
copyButton.style.border = 'none';
copyButton.style.borderRadius = '4px';
copyButton.style.cursor = 'pointer';
copyButton.addEventListener('click', function() {
copyToClipboard(copyButton.textContent);
});
popupContent.appendChild(copyButton);
// Create a popup at the center of the tile
var popup = L.popup({
closeButton: true,
closeOnClick: false,
autoClose: false
})
.setLatLng(tileCenter)
.setContent(popupContent);
return popup;
}
// Add a mousemove event to the map
map.on('mousemove', function(e) {
// Convert to EPSG:3035
var coords3035 = toEPSG3035(e.latlng.lat, e.latlng.lng);
// Snap to grid
var snapped = snapToGrid(coords3035[0], coords3035[1]);
// Update coordinate display
coordinateControl.update({x: snapped.x, y: snapped.y});
// Remove previous rectangle if it exists
if (mouseRectangle) {
map.removeLayer(mouseRectangle);
}
// Create new rectangle
mouseRectangle = L.polygon(createTileBounds(snapped.x, snapped.y), {
color: isTileSelected(snapped.x, snapped.y) ? "#FF0000" : "#00AA00",
weight: 1,
opacity: 0.7,
fillColor: isTileSelected(snapped.x, snapped.y) ? "#FF0000" : "#00AA00",
fillOpacity: 0.1,
interactive: false
}).addTo(map);
});
// Remove the rectangle when mouse leaves the map
map.on('mouseout', function() {
if (mouseRectangle) {
map.removeLayer(mouseRectangle);
mouseRectangle = null;
}
coordinateControl.update(null);
});
// Handle click event
map.on('click', function(e) {
// Convert to EPSG:3035
var coords3035 = toEPSG3035(e.latlng.lat, e.latlng.lng);
// Snap to grid
var snapped = snapToGrid(coords3035[0], coords3035[1]);
// Check if this tile is already selected
if (isTileSelected(snapped.x, snapped.y)) {
// Remove the tile from selected tiles
var index = getTileIndex(snapped.x, snapped.y);
var tile = selectedTiles[index];
// Close popup and remove rectangle
if (tile.popup) {
map.closePopup(tile.popup);
}
map.removeLayer(tile.rectangle);
selectedTiles.splice(index, 1);
} else {
// Calculate the center of the tile for the popup
var centerX = snapped.x + 250;
var topY = snapped.y + 500;
var topBorderLatLng = L.latLng(toWGS84(centerX, topY));
// Create a permanent polygon
var permanentRect = L.polygon(createTileBounds(snapped.x, snapped.y), {
color: "#FF0000",
weight: 1,
opacity: 0.7,
fillColor: "#FF0000",
fillOpacity: 0.2,
}).addTo(map);
// Create the sliders panel
var popup = createSlidersPanel(topBorderLatLng, snapped.x, snapped.y);
popup.openOn(map);
// Add to selected tiles
selectedTiles.push({
x: snapped.x,
y: snapped.y,
rectangle: permanentRect,
popup: popup
});
}
});
};
});
var germany_1 = L.map(
"germany_1",
{
center: [51.0, 10.5],
crs: L.CRS.EPSG3857,
...{
"zoom": 6,
"zoomControl": true,
"preferCanvas": false,
"name": "BKG Daten",
}
}
);
L.control.scale().addTo(germany_1);
var geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196 = {
"collapsed": false,
"position": "topright",
"defaultMarkGeocode": true,
"zoom": 11,
"provider": "nominatim",
"providerOptions": {
},
};
// note: geocoder name should start with lowercase
var geocoderName_geocoder_4fb38d370324c759f3b79630e04c5196 = geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196["provider"];
var customGeocoder_geocoder_4fb38d370324c759f3b79630e04c5196 = L.Control.Geocoder[ geocoderName_geocoder_4fb38d370324c759f3b79630e04c5196 ](
geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196['providerOptions']
);
geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196["geocoder"] = customGeocoder_geocoder_4fb38d370324c759f3b79630e04c5196;
L.Control.geocoder(
geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196
).on('markgeocode', function(e) {
var zoom = geocoderOpts_geocoder_4fb38d370324c759f3b79630e04c5196['zoom'] || germany_1.getZoom();
germany_1.setView(e.geocode.center, zoom);
}).addTo(germany_1);
var tile_layer_3e2353b330771d81b09ad0264eba0eb8 = L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
{
"minZoom": 0,
"maxZoom": 20,
"maxNativeZoom": 20,
"noWrap": false,
"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors \u0026copy; \u003ca href=\"https://carto.com/attributions\"\u003eCARTO\u003c/a\u003e",
"subdomains": "abcd",
"detectRetina": false,
"tms": false,
"opacity": 1,
}
);
tile_layer_3e2353b330771d81b09ad0264eba0eb8.addTo(germany_1);
var tile_layer_257dbd84851099418ce493bd4515b7a3 = L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
{
"minZoom": 0,
"maxZoom": 18,
"maxNativeZoom": 18,
"noWrap": false,
"attribution": "Esri",
"subdomains": "abc",
"detectRetina": false,
"tms": false,
"opacity": 1,
}
);
tile_layer_257dbd84851099418ce493bd4515b7a3.addTo(germany_1);
var fast_marker_cluster_a50b94b109a70b25ca261e2493736fc8 = (function(){
var callback = function (row) {
let [lat, lon, plz, qa, inhabitants, distribution] = row;
var marker = L.marker(new L.LatLng(lat, lon), { color: "red" });
var icon = L.AwesomeMarkers.icon({
icon: qa_icons[qa - 1],
iconColor: 'white',
markerColor: qa_colors[qa - 1],
prefix: 'fa',
extraClasses: 'fa-rotate-0'
});
marker.setIcon(icon);
// Convert 500m to degrees more precisely based on latitude
// Formula for latitude: 1 degree = 111,320 meters * cos(latitude)
// Formula for longitude: 1 degree = 111,320 meters
const metersPerDegreeLat = 111320; // meters per degree latitude
const metersPerDegreeLon = 111320 * Math.cos(lat * (Math.PI / 180)); // meters per degree longitude
const latOffset = (500 / 2) / metersPerDegreeLat; // 250m in latitude degrees
const lonOffset = (500 / 2) / metersPerDegreeLon; // 250m in longitude degrees
const squareBounds = [
[lat - latOffset, lon - lonOffset], // Southwest corner
[lat + latOffset, lon + lonOffset] // Northeast corner
];
var square = L.rectangle(squareBounds, {
color: "#00AA00", // Green border
weight: 2, // Border width
opacity: 0.7, // Border opacity
fillColor: "#00AA00", // Green fill
fillOpacity: 0.2 // Fill opacity
});
// Attach the square to the marker for reference
marker.square = square;
var popup = L.popup({ maxWidth: '300' });
const display_text = {
text: [
'<a href="https://www.google.com/maps/place/' + lat + ',' + lon + '" target="_blank">',
plz + ' (' + lat.toFixed(3) + '°N' + ' ' + lon.toFixed(3) + '°E' + ')',
'</a>',
(inhabitants >= 0) ? ('Einwohner = ' + inhabitants) : '',
'<table style="border-collapse: collapse; width: 100%;">',
distribution.map((value, index) => {
// Set row style based on conditions
const rowStyle = value === 0 ? 'color: #aaa;' :
(index === qa - 1 ? 'font-weight: bold;' : '');
return '<tr style="border: 1px solid #ddd;' + rowStyle + '">' +
'<td style="border: 1px solid #ddd; padding: 4px;">' +
qa_names[index] +
'</td><td style="border: 1px solid #ddd; padding: 4px;">' +
value + ' %' +
'</td></tr>';
}).join(''),
'</table>'
].join('<br/>')
};
var mytext = "<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> " + display_text.text + "</div>";
popup.setContent(mytext);
marker.bindPopup(popup);
// Add mouseover event to show the square
marker.on('mouseover', function (e) {
this.square.addTo(e.target._map);
marker.openPopup();
});
// Add mouseout event to hide the square
marker.on('mouseout', function (e) {
e.target._map.removeLayer(this.square);
marker.closePopup();
});
return marker
};
;
var data = [[48.77175, 9.20779, "500mN28510E42625", 1, 655, [95, 5, 0, 0, 0]], [48.9942, 9.59358, "500mN28755E42910", 1, 230, [100, 0, 0, 0, 0]], [50.21656, 8.84065, "500mN30120E42380", 1, -1, [100, 0, 0, 0, 0]], [48.59897, 9.8001, "500mN28315E43060", 1, 558, [100, 0, 0, 0, 0]], [49.03912, 9.57954, "500mN28805E42900", 1, 268, [100, 0, 0, 0, 0]], [50.68635, 10.90915, "500mN30640E43850", 1, -1, [50, 50, 0, 0, 0]], [48.78013, 9.12604, "500mN28520E42565", 1, 1530, [80, 20, 0, 0, 0]], [53.63331, 10.01889, "500mN33915E43220", 1, -1, [50, 50, 0, 0, 0]], [53.66892, 10.28364, "500mN33955E43395", 1, -1, [100, 0, 0, 0, 0]], [50.18743, 8.64531, "500mN30090E42240", 1, -1, [60, 40, 0, 0, 0]]];
var cluster = L.markerClusterGroup({
"maxClusterRadius": 40,
});
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(germany_1);
return cluster;
})();
fast_marker_cluster_a50b94b109a70b25ca261e2493736fc8.addTo(germany_1);
var fast_marker_cluster_7fe1544675ff60a17a8689eebb74352a = (function(){
var callback = function (row) {
let [lat, lon, plz, qa, inhabitants, distribution] = row;
var marker = L.marker(new L.LatLng(lat, lon), { color: "red" });
var icon = L.AwesomeMarkers.icon({
icon: qa_icons[qa - 1],
iconColor: 'white',
markerColor: qa_colors[qa - 1],
prefix: 'fa',
extraClasses: 'fa-rotate-0'
});
marker.setIcon(icon);
// Convert 500m to degrees more precisely based on latitude
// Formula for latitude: 1 degree = 111,320 meters * cos(latitude)
// Formula for longitude: 1 degree = 111,320 meters
const metersPerDegreeLat = 111320; // meters per degree latitude
const metersPerDegreeLon = 111320 * Math.cos(lat * (Math.PI / 180)); // meters per degree longitude
const latOffset = (500 / 2) / metersPerDegreeLat; // 250m in latitude degrees
const lonOffset = (500 / 2) / metersPerDegreeLon; // 250m in longitude degrees
const squareBounds = [
[lat - latOffset, lon - lonOffset], // Southwest corner
[lat + latOffset, lon + lonOffset] // Northeast corner
];
var square = L.rectangle(squareBounds, {
color: "#00AA00", // Green border
weight: 2, // Border width
opacity: 0.7, // Border opacity
fillColor: "#00AA00", // Green fill
fillOpacity: 0.2 // Fill opacity
});
// Attach the square to the marker for reference
marker.square = square;
var popup = L.popup({ maxWidth: '300' });
const display_text = {
text: [
'<a href="https://www.google.com/maps/place/' + lat + ',' + lon + '" target="_blank">',
plz + ' (' + lat.toFixed(3) + '°N' + ' ' + lon.toFixed(3) + '°E' + ')',
'</a>',
(inhabitants >= 0) ? ('Einwohner = ' + inhabitants) : '',
'<table style="border-collapse: collapse; width: 100%;">',
distribution.map((value, index) => {
// Set row style based on conditions
const rowStyle = value === 0 ? 'color: #aaa;' :
(index === qa - 1 ? 'font-weight: bold;' : '');
return '<tr style="border: 1px solid #ddd;' + rowStyle + '">' +
'<td style="border: 1px solid #ddd; padding: 4px;">' +
qa_names[index] +
'</td><td style="border: 1px solid #ddd; padding: 4px;">' +
value + ' %' +
'</td></tr>';
}).join(''),
'</table>'
].join('<br/>')
};
var mytext = "<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> " + display_text.text + "</div>";
popup.setContent(mytext);
marker.bindPopup(popup);
// Add mouseover event to show the square
marker.on('mouseover', function (e) {
this.square.addTo(e.target._map);
marker.openPopup();
});
// Add mouseout event to hide the square
marker.on('mouseout', function (e) {
e.target._map.removeLayer(this.square);
marker.closePopup();
});
return marker
};
;
var data = [[50.14109, 8.94041, "500mN30035E42450", 2, -1, [20, 75, 0, 0, 5]], [50.14076, 8.90544, "500mN30035E42425", 2, -1, [20, 80, 0, 0, 0]], [49.39846, 11.13295, "500mN29210E44030", 2, -1, [0, 50, 50, 0, 0]], [50.13004, 8.73785, "500mN30025E42305", 2, -1, [0, 100, 0, 0, 0]], [48.17815, 11.60288, "500mN27860E44400", 2, -1, [15, 85, 0, 0, 0]], [50.58367, 8.69746, "500mN30530E42285", 2, -1, [0, 100, 0, 0, 0]], [50.59675, 8.66179, "500mN30545E42260", 2, -1, [0, 70, 30, 0, 0]]];
var cluster = L.markerClusterGroup({
"maxClusterRadius": 40,
});
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(germany_1);
return cluster;
})();
fast_marker_cluster_7fe1544675ff60a17a8689eebb74352a.addTo(germany_1);
var fast_marker_cluster_3d200a28200414741534d7d30b973514 = (function(){
var callback = function (row) {
let [lat, lon, plz, qa, inhabitants, distribution] = row;
var marker = L.marker(new L.LatLng(lat, lon), { color: "red" });
var icon = L.AwesomeMarkers.icon({
icon: qa_icons[qa - 1],
iconColor: 'white',
markerColor: qa_colors[qa - 1],
prefix: 'fa',
extraClasses: 'fa-rotate-0'
});
marker.setIcon(icon);
// Convert 500m to degrees more precisely based on latitude
// Formula for latitude: 1 degree = 111,320 meters * cos(latitude)
// Formula for longitude: 1 degree = 111,320 meters
const metersPerDegreeLat = 111320; // meters per degree latitude
const metersPerDegreeLon = 111320 * Math.cos(lat * (Math.PI / 180)); // meters per degree longitude
const latOffset = (500 / 2) / metersPerDegreeLat; // 250m in latitude degrees
const lonOffset = (500 / 2) / metersPerDegreeLon; // 250m in longitude degrees
const squareBounds = [
[lat - latOffset, lon - lonOffset], // Southwest corner
[lat + latOffset, lon + lonOffset] // Northeast corner
];
var square = L.rectangle(squareBounds, {
color: "#00AA00", // Green border
weight: 2, // Border width
opacity: 0.7, // Border opacity
fillColor: "#00AA00", // Green fill
fillOpacity: 0.2 // Fill opacity
});
// Attach the square to the marker for reference
marker.square = square;
var popup = L.popup({ maxWidth: '300' });
const display_text = {
text: [
'<a href="https://www.google.com/maps/place/' + lat + ',' + lon + '" target="_blank">',
plz + ' (' + lat.toFixed(3) + '°N' + ' ' + lon.toFixed(3) + '°E' + ')',
'</a>',
(inhabitants >= 0) ? ('Einwohner = ' + inhabitants) : '',
'<table style="border-collapse: collapse; width: 100%;">',
distribution.map((value, index) => {
// Set row style based on conditions
const rowStyle = value === 0 ? 'color: #aaa;' :
(index === qa - 1 ? 'font-weight: bold;' : '');
return '<tr style="border: 1px solid #ddd;' + rowStyle + '">' +
'<td style="border: 1px solid #ddd; padding: 4px;">' +
qa_names[index] +
'</td><td style="border: 1px solid #ddd; padding: 4px;">' +
value + ' %' +
'</td></tr>';
}).join(''),
'</table>'
].join('<br/>')
};
var mytext = "<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> " + display_text.text + "</div>";
popup.setContent(mytext);
marker.bindPopup(popup);
// Add mouseover event to show the square
marker.on('mouseover', function (e) {
this.square.addTo(e.target._map);
marker.openPopup();
});
// Add mouseout event to hide the square
marker.on('mouseout', function (e) {
e.target._map.removeLayer(this.square);
marker.closePopup();
});
return marker
};
;
var data = [[50.86486, 6.92737, "500mN30880E41045", 3, -1, [0, 10, 90, 0, 0]], [53.48504, 10.01883, "500mN33750E43220", 3, -1, [0, 0, 100, 0, 0]], [48.72667, 9.19492, "500mN28460E42615", 3, 3474, [5, 0, 90, 0, 5]], [52.6022, 13.3554, "500mN32820E45480", 3, -1, [0, 0, 100, 0, 0]], [50.1876, 8.65931, "500mN30090E42250", 3, -1, [0, 10, 85, 0, 5]], [52.4236, 13.46696, "500mN32625E45565", 3, -1, [0, 0, 100, 0, 0]], [52.39346, 13.42047, "500mN32590E45535", 3, -1, [0, 0, 100, 0, 0]]];
var cluster = L.markerClusterGroup({
"maxClusterRadius": 40,
});
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(germany_1);
return cluster;
})();
fast_marker_cluster_3d200a28200414741534d7d30b973514.addTo(germany_1);
var fast_marker_cluster_9ecf3763afe694edb009a6eaf24ac037 = (function(){
var callback = function (row) {
let [lat, lon, plz, qa, inhabitants, distribution] = row;
var marker = L.marker(new L.LatLng(lat, lon), { color: "red" });
var icon = L.AwesomeMarkers.icon({
icon: qa_icons[qa - 1],
iconColor: 'white',
markerColor: qa_colors[qa - 1],
prefix: 'fa',
extraClasses: 'fa-rotate-0'
});
marker.setIcon(icon);
// Convert 500m to degrees more precisely based on latitude
// Formula for latitude: 1 degree = 111,320 meters * cos(latitude)
// Formula for longitude: 1 degree = 111,320 meters
const metersPerDegreeLat = 111320; // meters per degree latitude
const metersPerDegreeLon = 111320 * Math.cos(lat * (Math.PI / 180)); // meters per degree longitude
const latOffset = (500 / 2) / metersPerDegreeLat; // 250m in latitude degrees
const lonOffset = (500 / 2) / metersPerDegreeLon; // 250m in longitude degrees
const squareBounds = [
[lat - latOffset, lon - lonOffset], // Southwest corner
[lat + latOffset, lon + lonOffset] // Northeast corner
];
var square = L.rectangle(squareBounds, {
color: "#00AA00", // Green border
weight: 2, // Border width
opacity: 0.7, // Border opacity
fillColor: "#00AA00", // Green fill
fillOpacity: 0.2 // Fill opacity
});
// Attach the square to the marker for reference
marker.square = square;
var popup = L.popup({ maxWidth: '300' });
const display_text = {
text: [
'<a href="https://www.google.com/maps/place/' + lat + ',' + lon + '" target="_blank">',
plz + ' (' + lat.toFixed(3) + '°N' + ' ' + lon.toFixed(3) + '°E' + ')',
'</a>',
(inhabitants >= 0) ? ('Einwohner = ' + inhabitants) : '',
'<table style="border-collapse: collapse; width: 100%;">',
distribution.map((value, index) => {
// Set row style based on conditions
const rowStyle = value === 0 ? 'color: #aaa;' :
(index === qa - 1 ? 'font-weight: bold;' : '');
return '<tr style="border: 1px solid #ddd;' + rowStyle + '">' +
'<td style="border: 1px solid #ddd; padding: 4px;">' +
qa_names[index] +
'</td><td style="border: 1px solid #ddd; padding: 4px;">' +
value + ' %' +
'</td></tr>';
}).join(''),
'</table>'
].join('<br/>')
};
var mytext = "<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> " + display_text.text + "</div>";
popup.setContent(mytext);
marker.bindPopup(popup);
// Add mouseover event to show the square
marker.on('mouseover', function (e) {
this.square.addTo(e.target._map);
marker.openPopup();
});
// Add mouseout event to hide the square
marker.on('mouseout', function (e) {
e.target._map.removeLayer(this.square);
marker.closePopup();
});
return marker
};
;
var data = [[48.7714, 9.16019, "500mN28510E42590", 4, 6119, [0, 0, 0, 100, 0]], [52.3569, 9.71746, "500mN32495E43015", 4, -1, [0, 0, 0, 65, 35]], [53.55243, 9.95851, "500mN33825E43180", 4, -1, [0, 0, 0, 100, 0]], [52.53101, 13.32786, "500mN32740E45465", 4, -1, [0, 0, 0, 85, 15]], [50.11127, 8.66844, "500mN30005E42255", 4, -1, [0, 0, 0, 85, 15]], [50.93278, 6.94424, "500mN30955E41060", 4, -1, [0, 0, 0, 100, 0]], [48.13757, 11.60831, "500mN27815E44405", 4, -1, [0, 0, 0, 100, 0]], [49.00136, 8.39104, "500mN28775E42030", 4, 3736, [0, 0, 0, 100, 0]], [49.40102, 8.68789, "500mN29215E42255", 4, 3322, [0, 0, 0, 85, 15]]];
var cluster = L.markerClusterGroup({
"maxClusterRadius": 40,
});
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(germany_1);
return cluster;
})();
fast_marker_cluster_9ecf3763afe694edb009a6eaf24ac037.addTo(germany_1);
var fast_marker_cluster_d50d863fd41eff1a9ca711370ca24690 = (function(){
var callback = function (row) {
let [lat, lon, plz, qa, inhabitants, distribution] = row;
var marker = L.marker(new L.LatLng(lat, lon), { color: "red" });
var icon = L.AwesomeMarkers.icon({
icon: qa_icons[qa - 1],
iconColor: 'white',
markerColor: qa_colors[qa - 1],
prefix: 'fa',
extraClasses: 'fa-rotate-0'
});
marker.setIcon(icon);
// Convert 500m to degrees more precisely based on latitude
// Formula for latitude: 1 degree = 111,320 meters * cos(latitude)
// Formula for longitude: 1 degree = 111,320 meters
const metersPerDegreeLat = 111320; // meters per degree latitude
const metersPerDegreeLon = 111320 * Math.cos(lat * (Math.PI / 180)); // meters per degree longitude
const latOffset = (500 / 2) / metersPerDegreeLat; // 250m in latitude degrees
const lonOffset = (500 / 2) / metersPerDegreeLon; // 250m in longitude degrees
const squareBounds = [
[lat - latOffset, lon - lonOffset], // Southwest corner
[lat + latOffset, lon + lonOffset] // Northeast corner
];
var square = L.rectangle(squareBounds, {
color: "#00AA00", // Green border
weight: 2, // Border width
opacity: 0.7, // Border opacity
fillColor: "#00AA00", // Green fill
fillOpacity: 0.2 // Fill opacity
});
// Attach the square to the marker for reference
marker.square = square;
var popup = L.popup({ maxWidth: '300' });
const display_text = {
text: [
'<a href="https://www.google.com/maps/place/' + lat + ',' + lon + '" target="_blank">',
plz + ' (' + lat.toFixed(3) + '°N' + ' ' + lon.toFixed(3) + '°E' + ')',
'</a>',
(inhabitants >= 0) ? ('Einwohner = ' + inhabitants) : '',
'<table style="border-collapse: collapse; width: 100%;">',
distribution.map((value, index) => {
// Set row style based on conditions
const rowStyle = value === 0 ? 'color: #aaa;' :
(index === qa - 1 ? 'font-weight: bold;' : '');
return '<tr style="border: 1px solid #ddd;' + rowStyle + '">' +
'<td style="border: 1px solid #ddd; padding: 4px;">' +
qa_names[index] +
'</td><td style="border: 1px solid #ddd; padding: 4px;">' +
value + ' %' +
'</td></tr>';
}).join(''),
'</table>'
].join('<br/>')
};
var mytext = "<div id='mytext' class='display_text' style='width: 100.0%; height: 100.0%;'> " + display_text.text + "</div>";
popup.setContent(mytext);
marker.bindPopup(popup);
// Add mouseover event to show the square
marker.on('mouseover', function (e) {
this.square.addTo(e.target._map);
marker.openPopup();
});
// Add mouseout event to hide the square
marker.on('mouseout', function (e) {
e.target._map.removeLayer(this.square);
marker.closePopup();
});
return marker
};
;
var data = [[48.72166, 9.12706, "500mN28455E42565", 5, 403, [0, 0, 0, 0, 100]], [48.89292, 9.17177, "500mN28645E42600", 5, 58, [30, 0, 0, 0, 70]], [48.96197, 9.42319, "500mN28720E42785", 5, 22, [10, 0, 0, 0, 90]], [48.4427, 10.8816, "500mN28145E43860", 5, -1, [0, 0, 0, 0, 100]], [48.57574, 10.45043, "500mN28290E43540", 5, -1, [0, 0, 0, 0, 100]], [50.63768, 8.70303, "500mN30590E42290", 5, -1, [10, 0, 0, 0, 90]], [50.7415, 9.25979, "500mN30700E42685", 5, -1, [0, 0, 0, 0, 100]]];
var cluster = L.markerClusterGroup({
"maxClusterRadius": 40,
});
for (var i = 0; i < data.length; i++) {
var row = data[i];
var marker = callback(row);
marker.addTo(cluster);
}
cluster.addTo(germany_1);
return cluster;
})();
fast_marker_cluster_d50d863fd41eff1a9ca711370ca24690.addTo(germany_1);
var layer_control_21dfce6c7e91f29f0f8fbf01da8343db_layers = {
base_layers : {
"CartoDB" : tile_layer_3e2353b330771d81b09ad0264eba0eb8,
"Satellite" : tile_layer_257dbd84851099418ce493bd4515b7a3,
},
overlays : {
"QA1 (EFH/ZFH)" : fast_marker_cluster_a50b94b109a70b25ca261e2493736fc8,
"QA2 (MFH)" : fast_marker_cluster_7fe1544675ff60a17a8689eebb74352a,
"QA3 (MFH gro\u00df)" : fast_marker_cluster_3d200a28200414741534d7d30b973514,
"QA4 (Innenstadtwohnen)" : fast_marker_cluster_9ecf3763afe694edb009a6eaf24ac037,
"QA5 (Gewerbe)" : fast_marker_cluster_d50d863fd41eff1a9ca711370ca24690,
},
};
let layer_control_21dfce6c7e91f29f0f8fbf01da8343db = L.control.layers(
layer_control_21dfce6c7e91f29f0f8fbf01da8343db_layers.base_layers,
layer_control_21dfce6c7e91f29f0f8fbf01da8343db_layers.overlays,
{
"position": "topright",
"collapsed": false,
"autoZIndex": true,
}
).addTo(germany_1);
</script>
</html>
\ No newline at end of file
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