main.js

/* **** The fundamental basic-skeleton is generated by QGIS **** */
/* **** Leaflet **** */

// Base layers
//  .. OpenStreetMap
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', minZoom: 9, maxZoom: 14});

//  .. White background
var white = L.tileLayer("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEAAQMAAABmvDolAAAAA1BMVEX///+nxBvIAAAAH0lEQVQYGe3BAQ0AAADCIPunfg43YAAAAAAAAAAA5wIhAAAB9aK9BAAAAABJRU5ErkJggg==", {minZoom: 9, maxZoom: 14});

// Overlay layers (TMS)
var lyr = L.tileLayer('./{z}/{x}/{y}.png', {tms: true, opacity: 1, attribution: 'Generated by &copy; <a href="https://www.cottbus.de/verwaltung/gb_iv/stadtentwicklung/">Stadtentwicklung Cottbus</a>, Stand Oktober 2021 with <a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, <a href="http://www.gdal.org/">GDAL</a>, <a href="http://www.osgeo.org/">OSGeo</a>', minZoom: 9, maxZoom: 14});

// Map
var map = L.map('map', {
	center: [51.78352565062541, 14.378540046848869],
	zoom: 14,
	minZoom: 9,
	maxZoom: 14,
	layers: lyr,
	loadingControl: true
});

var basemaps = {"OpenStreetMap": osm, "Without background": white}
var overlaymaps = {"Layer": lyr}

// Title
var title = L.control();
title.onAdd = function(map) {
    this._div = L.DomUtil.create('div', 'ctl title');
    this.update();
    return this._div;
};
title.update = function(props) {
    this._div.innerHTML = "R&auml;umliche Perspektiven 2040+";
};
title.addTo(map);

// Add layers
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);

// Fit to overlay bounds (SW and NE points with (lat, lon))
map.fitBounds([[51.66800478923382, 14.505907271397087], [51.89904651201699, 14.251172822300651]]);

// Geolocating		
function onLocationFound(e) {
    var location = e.latlng
    L.marker(location).addTo(map).bindPopup("Du bist ungef&auml;hr hier.").openPopup();
};

function onLocationError(e) {
	alert(e.message);
};

function getLocationLeaflet() {
	map.on('locationfound', onLocationFound);
	map.on('locationerror', onLocationError);
	map.locate({setView: true, maxZoom: 15});
};