Widget:Karte: Unterschied zwischen den Versionen
Simon (Diskussion | Beiträge) (Anzuzeigende Karten über URL-Parameter steuerbar machen.) |
Simon (Diskussion | Beiträge) (Kleine Fixes zur Auswahl der Karten über URL-Parameter.) |
||
| Zeile 521: | Zeile 521: | ||
// TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",". | // TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",". | ||
| + | |||
| + | var baseLayerOsmElement = mapContainerElement.querySelector(".ak-base-map-selection--osm"); | ||
| + | var baseLayerDopElement = mapContainerElement.querySelector(".ak-base-map-selection--dop"); | ||
// Keeping track of selected layers. Set initially selected ones. | // Keeping track of selected layers. Set initially selected ones. | ||
| − | var | + | var currentHistLayer = maps[0]; |
var currentBaseLayer = osmLayer; | var currentBaseLayer = osmLayer; | ||
if (baseLayerToShow) { | if (baseLayerToShow) { | ||
| Zeile 530: | Zeile 533: | ||
} else if (baseLayerToShow === "dop") { | } else if (baseLayerToShow === "dop") { | ||
currentBaseLayer = dopLayer; | currentBaseLayer = dopLayer; | ||
| + | baseLayerDopElement.checked = true; | ||
} | } | ||
} | } | ||
| Zeile 535: | Zeile 539: | ||
for (var i = 0; i < maps.length; i++) { | for (var i = 0; i < maps.length; i++) { | ||
if (maps[i].id === historicalLayerToShow) { | if (maps[i].id === historicalLayerToShow) { | ||
| − | + | currentHistLayer = maps[i]; | |
break; | break; | ||
} | } | ||
| Zeile 542: | Zeile 546: | ||
// Switching between base layers | // Switching between base layers | ||
| − | function | + | function baseLayerSwitcher() { |
if (this.checked) { | if (this.checked) { | ||
currentBaseLayer.remove(); | currentBaseLayer.remove(); | ||
| Zeile 551: | Zeile 555: | ||
} | } | ||
// TODO Funktioniert nicht. | // TODO Funktioniert nicht. | ||
| − | currentBaseLayer.options.minZoom = | + | currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom; |
| − | currentBaseLayer.options.maxZoom = | + | currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom; |
currentBaseLayer.addTo(mapView); | currentBaseLayer.addTo(mapView); | ||
currentBaseLayer.bringToBack(); | currentBaseLayer.bringToBack(); | ||
} | } | ||
} | } | ||
| − | + | baseLayerOsmElement.addEventListener("change", baseLayerSwitcher); | |
| − | + | baseLayerDopElement.addEventListener("change", baseLayerSwitcher); | |
// Setting opacity | // Setting opacity | ||
| − | var opacitySliderControl = L.control.opacitySlider({ opacityLayer: | + | var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView); |
// Render radio buttons for historical map switching. | // Render radio buttons for historical map switching. | ||
| Zeile 579: | Zeile 583: | ||
labelElement.appendChild(document.createTextNode(map.label)); | labelElement.appendChild(document.createTextNode(map.label)); | ||
| − | if (map === | + | if (map === currentHistLayer) { |
inputElement.checked = true; | inputElement.checked = true; | ||
} | } | ||
| Zeile 585: | Zeile 589: | ||
inputElement.addEventListener("change", function() { | inputElement.addEventListener("change", function() { | ||
if (inputElement.checked) { | if (inputElement.checked) { | ||
| − | + | currentHistLayer.layer.remove(); | |
| − | + | currentHistLayer = map; | |
| − | opacitySliderControl.setOpacityLayer( | + | opacitySliderControl.setOpacityLayer(currentHistLayer.layer); |
| − | + | currentHistLayer.layer.addTo(mapView); | |
// TODO check zoom range and bounds of map, adjust mapView accordingly. | // TODO check zoom range and bounds of map, adjust mapView accordingly. | ||
} | } | ||
| Zeile 605: | Zeile 609: | ||
// Show layers. | // Show layers. | ||
currentBaseLayer.addTo(mapView); | currentBaseLayer.addTo(mapView); | ||
| − | + | currentHistLayer.layer.addTo(mapView); | |
} | } | ||
Version vom 2. Juli 2019, 10:44 Uhr
<script type="text/javascript" src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
<style type="text/css"> .ak-map-container { display: flex; }
.ak-map { flex-grow: 1; height: 600px; }
.ak-map-sidebar { box-sizing: border-box; width: 20vw; min-width: 300px; height: 600px; margin: 0 0 0 2em; padding: 1em; border: 1px solid #ced4da; border-radius: 4px; box-shadow: 0px 3px 12px rgba(0,0,0,0.1); overflow-y: auto;
font-family: Arial, sans-serif; font-size: 16px; color: #495057; }
.ak-map-container fieldset { border: none; padding: 0; margin-bottom: 1.5em; }
.ak-map-container fieldset legend { margin-bottom: 0.75em; padding: 0;
font-weight: 600; font-size: 16px; }
.ak-map-container label, .ak-map-container input { cursor: pointer; }
.ak-map-container label { margin-bottom: 0; }
.ak-map-container input { margin-left: 0; margin-right: 0.5em; }
.ak-map-layers, .ak-map-basemaps { list-style: none; margin: 0; padding: 0; }
.ak-map-basemaps { display: flex; }
.ak-map-basemaps li+li { margin-left: 1em; }
.ak-map-layers li { display: flex; align-items: center; margin-bottom: 0; border-left-width: 0.5em; border-left-style: solid; padding-left: 0.5em; }
.ak-map-layers li+li { padding-top: 0.5em; }
.ak-map-layers li label+a { display: inline-block; width: 16px; height: 16px; margin-left: 1em; /* Info icon taken from https://feathericons.com/ */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374c0fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.ak-map-layers li label+a:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23339af0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.ak-map-layer-mittelalter { border-color: #e03131; }
.ak-map-layer-franzoesisch { border-color: #3b5bdb; }
.ak-map-layer-preussisch { border-color: #212529; }
.ak-map-layer-nachkriegszeit { border-color: #adb5bd; }
/* Metadata container that may be added by the wiki page to hand more information over to the map. */
.ak-map-metadata {
display: none;
}
/* Opacity slider */
input[type=range].ak-map-opacity-slider { -webkit-appearance: none; width: 150px; height: 40px; background: none; }
input[type=range].ak-map-opacity-slider::-webkit-slider-runnable-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 10px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: linear-gradient(to right, rgb(255,255,255), #ffc078); cursor: pointer; }
input[type=range].ak-map-opacity-slider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -8.5px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: #ffffff; -webkit-appearance: none; cursor: pointer; }
input[type=range].ak-map-opacity-slider::-moz-range-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 10px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: linear-gradient(to right, rgb(255,255,255), #ffc078); cursor: pointer; }
input[type=range].ak-map-opacity-slider::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: 0px 3px 12px rgba(0,0,0,0.5); background: #ffffff; cursor: pointer; }
input[type=range].ak-map-opacity-slider::-ms-track { width: 100%; height: 11.4px; border: 1px solid #adb5bd; border-radius: 10px; background: linear-gradient(to right, rgb(255,255,255), #ffc078); box-sizing: border-box; color: transparent; cursor: pointer; }
input[type=range].ak-map-opacity-slider::-ms-thumb { width: 26px; height: 26px; margin-top: 0px; border: 1px solid #adb5bd; border-radius: 15px; box-shadow: none; background: #ffffff; cursor: pointer; }
input[type=range].ak-map-opacity-slider::-ms-fill-lower, input[type=range].ak-map-opacity-slider::-ms-fill-upper { background: transparent; }
input[type=range].ak-map-opacity-slider::-ms-tooltip { display: none; }
</style>
<script type="text/javascript"> (function () {
L.Control.OpacitySlider = L.Control.extend({ options: { position: "topright", initialValue: 1, className: "ak-map-opacity-slider", label: "Transparenz", opacityLayer: undefined },
onAdd: function(map) { var sliderContainerElement = L.DomUtil.create("div");
var sliderElement = L.DomUtil.create("input", this.options.className); sliderElement.setAttribute("type", "range"); sliderElement.setAttribute("min", "0"); sliderElement.setAttribute("max", "1"); sliderElement.setAttribute("step", "0.1"); sliderElement.setAttribute("value", this.options.initialValue); sliderElement.setAttribute("title", this.options.label); sliderElement.setAttribute("aria-label", this.options.label);
L.DomEvent.on(sliderElement, "input", this._setOpacity.bind(this)); // Necessary for IE10/11 support L.DomEvent.on(sliderElement, "change", this._setOpacity.bind(this)); // Prevent dragging of slider handle from moving the map. L.DomEvent.on(sliderElement, "mousedown", function(event) { map.dragging.disable(); }); L.DomEvent.on(sliderElement, "mouseup", function(event) { map.dragging.enable(); });
this._sliderElement = sliderElement; this._opacityLayer = this.options.opacityLayer;
sliderContainerElement.appendChild(sliderElement); return sliderContainerElement; },
_setOpacity: function() { if (this._opacityLayer) { this._opacityLayer.setOpacity(this._sliderElement.value); } },
setOpacityLayer: function(layer) { this._opacityLayer = layer; this._setOpacity(); } });
L.control.opacitySlider = function(opts) { return new L.Control.OpacitySlider(opts); }
function initMap(mapContainerElement, metadata, baseLayerToShow, historicalLayerToShow) { if (mapContainerElement.dataset.initialised) { return; } mapContainerElement.dataset.initialised = true;
var mapElement = mapContainerElement.getElementsByClassName("ak-map")[0];
var mapView = L.map(mapElement, { // Bounding box for Köln (<https://www.openstreetmap.org/relation/62578>). maxBounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], }).setView([50.938056, 6.956944], 14);
mapView.on('zoom', function(event) { // For testing purposes and to figure out good min/max zoom levels for new maps. console.log("Zoom:", mapView.getZoom()); });
// Base layers var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }); var dopLayer = L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dop?', { layers: 'nw_dop_rgb', minZoom: 6, maxZoom: 18, bounds: [ [52.57192795134163, 9.683550865862706], [50.265130303028236, 5.532200974503678] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/digitale_orthophotos/index.html">Datensatz</a>' });
var eras = { mittelalter: { "class": "ak-map-layer-mittelalter", tooltip: "Mittelalter / Freie Reichsstadt / Hansestadt Köln" }, franzoesisch: { "class": "ak-map-layer-franzoesisch", tooltip: "Französisches Köln" }, preussisch: { "class": "ak-map-layer-preussisch", tooltip: "Preußisches Köln" }, nachkriegszeit: { "class": "ak-map-layer-nachkriegszeit", tooltip: "Nachkriegszeit bis heute" } };
// Historical maps var maps = [ { id: "mercator", label: "1571 Mercator", tooltip: "Mercatorplan von Köln, auch bekannt als Kölner Stadtansicht von 1570/1571, Arnold Mercator", era: eras.mittelalter, layer: L.tileLayer('https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 18, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/40952">Georeferenzierte Datei</a>, <a href="http://www.deutschefotothek.de/documents/obj/70305086">Originaldatei © SLUB / Deutsche Fotothek</a>, <a href="https://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa</a>' }) }, { id: "merian", label: "1641 Merian", tooltip: "Colonia Agrippina - Cölln, 1641, aus: Topographia Germaniae: 6. Topographia Archiepiscopatuum Moguntinensis, Trevirensis et Coloniensis, hrsg. 1645 von Matthäus Merian", era: eras.mittelalter, layer: L.tileLayer('https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39783">Georeferenzierte Datei</a>' }) }, { id: "stockdale", label: "1800 Stockdale", tooltip: "A Plan of the City of Cologne, 1800, John Stockdale", era: eras.franzoesisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39780">Georeferenzierte Datei</a>' }) }, { id: "tranchot", label: "1801-1828 Tranchot/v. Müffling", tooltip: "1801 - 1828: Kartenaufnahme der Rheinlande 1:25.000; Tranchot/v. Müffling", era: eras.franzoesisch, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tranchot?', { layers: 'nw_tranchot', minNativeZoom: 12, minZoom: 10, maxZoom: 16, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1801/index.html">Datensatz</a>' }) }, { id: "vogt", label: "1815 Vogt/Picquet", tooltip: "Grundriss der Stadt Köln 1815, gezeichnet von Vogt, gestochen von Picquet", era: eras.franzoesisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39826">Georeferenzierte Datei</a>' }) }, { id: "uraufnahme", label: "1836-1850 Uraufnahme", tooltip: "1836 - 1850: Preußische Kartenaufnahme 1:25.000; Uraufnahme", era: eras.preussisch, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme?', { layers: 'nw_uraufnahme_gk', minNativeZoom: 14, minZoom: 12, maxZoom: 17, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1836/index.html">Datensatz</a>' }) }, { id: "neuaufnahme", label: "1891-1912 Neuaufnahme", tooltip: "1891 - 1912: Preußische Kartenaufnahme 1:25.000; Neuaufnahme", era: eras.preussisch, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme?', { layers: 'nw_neuaufnahme', minNativeZoom: 12, minZoom: 10, maxZoom: 17, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], // TODO Do I want to provide a way to turn transparency off for these ones? In addition to having the opacity slider it might be nice to be able to just see the map on its own without the base layer backdrop. transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/historische_karten/1891/index.html">Datensatz</a>' }) }, { id: "meyer", label: "1900 Meyer", tooltip: "Meyers Stadtplan von Köln um 1900", era: eras.preussisch, layer: L.tileLayer('https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png', { minZoom: 6, maxZoom: 17, // TODO Restrict bounds even further. bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], attribution: '<a href="https://mapwarper.net/maps/39790">Georeferenzierte Datei</a>' }) }, { id: "tk25", label: "1936-1945 TK25", tooltip: "Topographische Karten - ältere Auflagejahre", era: eras.preussisch, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_tk25_1936-1945?', { layers: 'nw_tk25_1936-1945', minNativeZoom: 15, minZoom: 13, maxZoom: 17, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/topographische_karten_aeltere/index.html">Datensatz</a>' }) }, { id: "hop", label: "1988-1994 Historische Orthophotos", tooltip: "1988-1994 Historische Orthophotos", era: eras.nachkriegszeit, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_histortho_1988-1994?', { layers: 'nw_histortho_1988-1994', minNativeZoom: 15, minZoom: 13, maxZoom: 18, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/luftbilderzeugnisse/altere_orthophotos/index.html">Datensatz</a>' }) }, { id: "dgk", label: "-2016 Deutsche Grundkarte", tooltip: "Deutsche Grundkarte 1:5.000 (DGK5) – historisch", era: eras.nachkriegszeit, layer: L.tileLayer.wms('https://www.wms.nrw.de/geobasis/wms_nw_dgk5?', { layers: 'nw_dgk5_grundriss', minNativeZoom: 16, minZoom: 13, maxZoom: 18, bounds: [ [50.8304494, 6.7725303], [51.0849743, 7.1620280] ], transparent: true, // Transparency only works with PNGs. format: 'image/png; mode=8bit', version: '1.3.0', attribution: 'Land NRW (2019), dl-de/by-2-0 (<a href="https://www.govdata.de/dl-de/by-2-0">www.govdata.de/dl-de/by-2-0</a>), <a href="https://www.bezreg-koeln.nrw.de/brk_internet/geobasis/sonstige/deutsche_grundkarte/index.html">Datensatz</a>' }) } ];
// TODO Find a way to display the attribution of the layers more clearly. "|" as a separator instead of ",".
var baseLayerOsmElement = mapContainerElement.querySelector(".ak-base-map-selection--osm"); var baseLayerDopElement = mapContainerElement.querySelector(".ak-base-map-selection--dop");
// Keeping track of selected layers. Set initially selected ones. var currentHistLayer = maps[0]; var currentBaseLayer = osmLayer; if (baseLayerToShow) { if (baseLayerToShow === "osm") { currentBaseLayer = osmLayer; } else if (baseLayerToShow === "dop") { currentBaseLayer = dopLayer; baseLayerDopElement.checked = true; } } if (historicalLayerToShow) { for (var i = 0; i < maps.length; i++) { if (maps[i].id === historicalLayerToShow) { currentHistLayer = maps[i]; break; } } }
// Switching between base layers function baseLayerSwitcher() { if (this.checked) { currentBaseLayer.remove(); if (this.value === "osm") { currentBaseLayer = osmLayer; } else { currentBaseLayer = dopLayer; } // TODO Funktioniert nicht. currentBaseLayer.options.minZoom = currentHistLayer.layer.minZoom; currentBaseLayer.options.maxZoom = currentHistLayer.layer.maxZoom; currentBaseLayer.addTo(mapView); currentBaseLayer.bringToBack(); } } baseLayerOsmElement.addEventListener("change", baseLayerSwitcher); baseLayerDopElement.addEventListener("change", baseLayerSwitcher);
// Setting opacity var opacitySliderControl = L.control.opacitySlider({ opacityLayer: currentHistLayer.layer }).addTo(mapView);
// Render radio buttons for historical map switching. var layersListElement = mapContainerElement.querySelector(".ak-map-layers"); maps.forEach(function(map) { var listItemElement = L.DomUtil.create("li", map.era["class"]); listItemElement.setAttribute("title", map.era.tooltip); layersListElement.appendChild(listItemElement); var labelElement = L.DomUtil.create("label"); labelElement.setAttribute("title", map.tooltip); listItemElement.appendChild(labelElement); var inputElement = L.DomUtil.create("input"); inputElement.setAttribute("type", "radio"); inputElement.setAttribute("name", "ak-map-layer-selection"); inputElement.setAttribute("value", map.id); labelElement.appendChild(inputElement); labelElement.appendChild(document.createTextNode(map.label));
if (map === currentHistLayer) { inputElement.checked = true; }
inputElement.addEventListener("change", function() { if (inputElement.checked) { currentHistLayer.layer.remove(); currentHistLayer = map; opacitySliderControl.setOpacityLayer(currentHistLayer.layer); currentHistLayer.layer.addTo(mapView); // TODO check zoom range and bounds of map, adjust mapView accordingly. } });
var mapPageUrl = metadata[map.id]; if (mapPageUrl) { var pageLinkElement = L.DomUtil.create("a"); pageLinkElement.href = mapPageUrl; pageLinkElement.setAttribute("title", "Zur Kartenseite"); pageLinkElement.setAttribute("aria-label", "Zur Kartenseite"); listItemElement.appendChild(pageLinkElement); } });
// Show layers. currentBaseLayer.addTo(mapView); currentHistLayer.layer.addTo(mapView); }
function parseMetadata(metadataElements) { var metadata = {}; for (var i = 0; i < metadataElements.length; i++) { var element = metadataElements.item(i); var queryRowElements = element.querySelectorAll(".smw-format.ul-format .smw-row"); queryRowElements.forEach(function(row) { var anchorElement = row.querySelector(".smw-field:first-child .smw-value a"); var url = anchorElement.href; var idValueElement = row.querySelector(".smw-field:last-child .smw-value"); var id = idValueElement.textContent; metadata[id] = url; }); } return metadata; }
var getQueryParameter = (function() { var query = window.location.search.substring(1); var params = query.split("&"); params = params.map(function(param) { var pair = param.split("="); pair[0] = decodeURIComponent(pair[0]); if (pair.length > 1) { pair[1] = decodeURIComponent(pair[1]); } return pair; }); return function(parameterName) { for (var i = 0; i < params.length; i++) { if (params[i][0] === parameterName) { if (params[i].length > 1) { return params[i][1]; } return ""; } } return undefined; }; })();
// Initialise all found maps when DOM is ready. document.addEventListener("DOMContentLoaded", function(event) { var metadataElements = document.getElementsByClassName("ak-map-metadata"); var metadata = parseMetadata(metadataElements); var mapContainerElements = document.getElementsByClassName("ak-map-container"); for (var i = 0; i < mapContainerElements.length; i++) { initMap(mapContainerElements.item(i), metadata, getQueryParameter("baseLayer"), getQueryParameter("histLayer")); } }); })(); </script>
<form class="ak-map-sidebar" autocomplete="off"> <fieldset> <legend>Basiskarte</legend>
- <label><input type="radio" class="ak-base-map-selection--osm" name="ak-base-map-selection" value="osm" checked>OpenStreetMap</label>
- <label><input type="radio" class="ak-base-map-selection--dop" name="ak-base-map-selection" value="dop">Digitale Orthophotos</label>
</fieldset> <fieldset> <legend>Historische Karten</legend>
</fieldset> </form>