BBSA-Karte<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.css\" integrity=\"sha512-xwE\/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==\" crossorigin=\"\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.js\" integrity=\"sha512-gZwIG9x3wUXg2hdXF6+rVkLF\/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==\" crossorigin=\"\"><\/script>\n\n \n <link href=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.0.0\/dist\/leaflet.fullscreen.css\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.0.0\/dist\/Leaflet.fullscreen.min.js\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.markercluster@1.0.4\/dist\/MarkerCluster.Default.css\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet.markercluster@1.0.4\/dist\/leaflet.markercluster.js\"><\/script>\n\n <style>\n #map {\n width: 100%;\n height: 600px;\n }\n\n \/* Vollbild Button *\/\n .fullscreen-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n z-index: 1000;\n }\n\n \/* F\u00fcr den Vollbildmodus *\/\n #map:-webkit-full-screen,\n #map:-ms-fullscreen,\n #map:fullscreen {\n width: 100% !important;\n height: 100% !important;\n z-index: 99999;\n }\n\n .leaflet-pseudo-fullscreen {\n position: fixed !important;\n width: 100% !important;\n height: 100% !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999;\n }\n\n .info {\n padding: 6px 8px;\n font: 14px\/16px Arial, Helvetica, sans-serif;\n background: rgba(255,255,255,0.8);\n box-shadow: 0 0 15px rgba(0,0,0,0.2);\n border-radius: 5px;\n }\n\n .info h4 {\n margin: 0 0 5px;\n color: #777;\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"map\"><\/div>\n\n\n<button class=\"fullscreen-icon\" id=\"fullscreenBtn\">Vollbild<\/button>\n\n<script>\n var map = L.map('map', {\n center: [52.4604, 13.3555], \/\/ Zentrum auf Brandenburg setzen\n zoom: 8, \/\/ Angepasstes Zoom-Level\n fullscreenControl: true,\n fullscreenControlOptions: {\n title: \"Enter fullscreen mode\",\n titleCancel: \"Exit fullscreen mode\"\n }\n });\n\n \/\/ OpenStreetMap Tiles hinzuf\u00fcgen\n L.tileLayer('https:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n attribution: '© <a href=\"http:\/\/osm.org\/copyright\">OpenStreetMap<\/a> contributors'\n }).addTo(map);\n\n var g; \/\/ Globale Variable f\u00fcr GeoJSON-Layer\n\n \/\/ Funktion, um eine einheitliche Farbe f\u00fcr die Umrandung zu setzen\n function getColor() {\n return '#555555'; \/\/ Standardfarbe f\u00fcr die Umrandung (grau)\n }\n\n \/\/ Styling der GeoJSON-Daten: transparente Fl\u00e4che und farbige Umrandung\n function style(feature) {\n return {\n fillColor: '#ffffff', \/\/ F\u00fcllfarbe irrelevant, da fillOpacity auf 0 gesetzt wird\n weight: 2,\n opacity: 1,\n color: getColor(), \/\/ Standardfarbe f\u00fcr die Umrandung\n dashArray: '', \/\/ Keine Punktierung\n fillOpacity: 0 \/\/ Fl\u00e4che durchsichtig\n };\n }\n\n \/\/ Funktion, um ein Feature bei Mouseover hervorzuheben und den Namen anzuzeigen\n function highlightFeature(e) {\n var layer = e.target;\n layer.setStyle({\n weight: 2,\n color: '#666666', \/\/ Etwas dunklerer Grauton beim Hover\n dashArray: '', \/\/ Keine Punktierung im Hover\n fillOpacity: 0 \/\/ Auch im Hover durchsichtig lassen\n });\n info.update(layer.feature.properties);\n }\n\n \/\/ Funktion zum Zur\u00fccksetzen der Hervorhebung\n function resetHighlight(e) {\n g.resetStyle(e.target);\n info.update();\n }\n\n \/\/ Funktion zum Zoomen auf das Feature\n function zoomToFeature(e) {\n map.fitBounds(e.target.getBounds());\n }\n\n \/\/ Funktion f\u00fcr jedes Feature: Ereignishandler hinzuf\u00fcgen\n function onEachFeature(feature, layer) {\n layer.on({\n mouseover: highlightFeature,\n mouseout: resetHighlight,\n click: zoomToFeature\n });\n }\n\n \/\/ GeoJSON-Daten f\u00fcr die Landkreise laden\n fetch('https:\/\/www.bbsa-potsdam.de\/wp-content\/uploads\/2019\/12\/landkreise_brandenburg.geojson')\n .then(response => response.json())\n .then(data => {\n g = L.geoJson(data, {\n style: style,\n onEachFeature: onEachFeature\n }).addTo(map);\n })\n .catch(error => console.error('Fehler beim Laden der GeoJSON-Daten:', error));\n\n \/\/ Info-Kontroll-Element zur Anzeige von Informationen (Kreisnamen)\n var info = L.control();\n\n info.onAdd = function (map) {\n this._div = L.DomUtil.create('div', 'info');\n this.update();\n return this._div;\n };\n\n \/\/ Update-Funktion: Zeigt den Namen (name) des aktuell gehoberten Kreises an\n info.update = function (props) {\n this._div.innerHTML = '<h4>Landkreise Brandenburgs<\/h4>' + (props ? \n '<b>' + props.name + '<\/b>' : 'Bitte bewegen Sie die Maus \u00fcber die Karte');\n };\n\n info.addTo(map);\n\n \/\/ MarkerCluster f\u00fcr Punkte laden (sofern ben\u00f6tigt)\n var markers = L.markerClusterGroup();\n\n \/\/ Stelle sicher, dass die Marker-Daten verf\u00fcgbar sind\n fetch('https:\/\/www.bbsa-potsdam.de\/wp-content\/uploads\/2019\/12\/Angaben_Dezember23.txt')\n .then(response => response.text())\n .then(data => {\n \/\/ Annahme: Die Daten enthalten JavaScript-Code mit der Variable addressPoints\n eval(data); \/\/ F\u00fchrt den Code aus\n\n if (typeof addressPoints !== 'undefined') {\n addressPoints.forEach(function(a) {\n var title = a[2];\n var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });\n marker.bindPopup(title);\n markers.addLayer(marker);\n });\n map.addLayer(markers);\n } else {\n console.log(\"addressPoints is not defined\");\n }\n })\n .catch(error => console.error('Fehler beim Laden der Marker-Daten:', error));\n\n \/\/ Vollbild-Modus starten (nur die Karte wird vollbild, nicht die gesamte Seite)\n document.getElementById('fullscreenBtn').onclick = function() {\n if (map.getContainer().requestFullscreen) {\n map.getContainer().requestFullscreen();\n } else if (map.getContainer().mozRequestFullScreen) { \/\/ Firefox\n map.getContainer().mozRequestFullScreen();\n } else if (map.getContainer().webkitRequestFullscreen) { \/\/ Chrome, Safari und Opera\n map.getContainer().webkitRequestFullscreen();\n } else if (map.getContainer().msRequestFullscreen) { \/\/ IE\/Edge\n map.getContainer().msRequestFullscreen();\n }\n };\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>BBSA-Karte Vollbild<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3415"}],"version-history":[{"count":209,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415\/revisions"}],"predecessor-version":[{"id":7764,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415\/revisions\/7764"}],"wp:attachment":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3415,"date":"2018-12-14T08:55:43","date_gmt":"2018-12-14T08:55:43","guid":{"rendered":"http:\/\/www.bbsa-potsdam.de\/?page_id=3415"},"modified":"2025-03-21T20:35:15","modified_gmt":"2025-03-21T20:35:15","slug":"karte","status":"publish","type":"page","link":"https:\/\/www.bbsa-potsdam.de\/?page_id=3415","title":{"rendered":"Karte"},"content":{"rendered":"\n\n\n\n \n \n BBSA-Karte<\/title>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.css\" integrity=\"sha512-xwE\/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==\" crossorigin=\"\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet@1.6.0\/dist\/leaflet.js\" integrity=\"sha512-gZwIG9x3wUXg2hdXF6+rVkLF\/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==\" crossorigin=\"\"><\/script>\n\n \n <link href=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.0.0\/dist\/leaflet.fullscreen.css\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet.fullscreen@1.0.0\/dist\/Leaflet.fullscreen.min.js\"><\/script>\n\n \n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.markercluster@1.0.4\/dist\/MarkerCluster.Default.css\">\n\n \n <script src=\"https:\/\/unpkg.com\/leaflet.markercluster@1.0.4\/dist\/leaflet.markercluster.js\"><\/script>\n\n <style>\n #map {\n width: 100%;\n height: 600px;\n }\n\n \/* Vollbild Button *\/\n .fullscreen-icon {\n position: absolute;\n top: 10px;\n right: 10px;\n background-color: rgba(0, 0, 0, 0.5);\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n z-index: 1000;\n }\n\n \/* F\u00fcr den Vollbildmodus *\/\n #map:-webkit-full-screen,\n #map:-ms-fullscreen,\n #map:fullscreen {\n width: 100% !important;\n height: 100% !important;\n z-index: 99999;\n }\n\n .leaflet-pseudo-fullscreen {\n position: fixed !important;\n width: 100% !important;\n height: 100% !important;\n top: 0px !important;\n left: 0px !important;\n z-index: 99999;\n }\n\n .info {\n padding: 6px 8px;\n font: 14px\/16px Arial, Helvetica, sans-serif;\n background: rgba(255,255,255,0.8);\n box-shadow: 0 0 15px rgba(0,0,0,0.2);\n border-radius: 5px;\n }\n\n .info h4 {\n margin: 0 0 5px;\n color: #777;\n }\n <\/style>\n<\/head>\n<body>\n<div id=\"map\"><\/div>\n\n\n<button class=\"fullscreen-icon\" id=\"fullscreenBtn\">Vollbild<\/button>\n\n<script>\n var map = L.map('map', {\n center: [52.4604, 13.3555], \/\/ Zentrum auf Brandenburg setzen\n zoom: 8, \/\/ Angepasstes Zoom-Level\n fullscreenControl: true,\n fullscreenControlOptions: {\n title: \"Enter fullscreen mode\",\n titleCancel: \"Exit fullscreen mode\"\n }\n });\n\n \/\/ OpenStreetMap Tiles hinzuf\u00fcgen\n L.tileLayer('https:\/\/{s}.tile.osm.org\/{z}\/{x}\/{y}.png', {\n maxZoom: 19,\n attribution: '© <a href=\"http:\/\/osm.org\/copyright\">OpenStreetMap<\/a> contributors'\n }).addTo(map);\n\n var g; \/\/ Globale Variable f\u00fcr GeoJSON-Layer\n\n \/\/ Funktion, um eine einheitliche Farbe f\u00fcr die Umrandung zu setzen\n function getColor() {\n return '#555555'; \/\/ Standardfarbe f\u00fcr die Umrandung (grau)\n }\n\n \/\/ Styling der GeoJSON-Daten: transparente Fl\u00e4che und farbige Umrandung\n function style(feature) {\n return {\n fillColor: '#ffffff', \/\/ F\u00fcllfarbe irrelevant, da fillOpacity auf 0 gesetzt wird\n weight: 2,\n opacity: 1,\n color: getColor(), \/\/ Standardfarbe f\u00fcr die Umrandung\n dashArray: '', \/\/ Keine Punktierung\n fillOpacity: 0 \/\/ Fl\u00e4che durchsichtig\n };\n }\n\n \/\/ Funktion, um ein Feature bei Mouseover hervorzuheben und den Namen anzuzeigen\n function highlightFeature(e) {\n var layer = e.target;\n layer.setStyle({\n weight: 2,\n color: '#666666', \/\/ Etwas dunklerer Grauton beim Hover\n dashArray: '', \/\/ Keine Punktierung im Hover\n fillOpacity: 0 \/\/ Auch im Hover durchsichtig lassen\n });\n info.update(layer.feature.properties);\n }\n\n \/\/ Funktion zum Zur\u00fccksetzen der Hervorhebung\n function resetHighlight(e) {\n g.resetStyle(e.target);\n info.update();\n }\n\n \/\/ Funktion zum Zoomen auf das Feature\n function zoomToFeature(e) {\n map.fitBounds(e.target.getBounds());\n }\n\n \/\/ Funktion f\u00fcr jedes Feature: Ereignishandler hinzuf\u00fcgen\n function onEachFeature(feature, layer) {\n layer.on({\n mouseover: highlightFeature,\n mouseout: resetHighlight,\n click: zoomToFeature\n });\n }\n\n \/\/ GeoJSON-Daten f\u00fcr die Landkreise laden\n fetch('https:\/\/www.bbsa-potsdam.de\/wp-content\/uploads\/2019\/12\/landkreise_brandenburg.geojson')\n .then(response => response.json())\n .then(data => {\n g = L.geoJson(data, {\n style: style,\n onEachFeature: onEachFeature\n }).addTo(map);\n })\n .catch(error => console.error('Fehler beim Laden der GeoJSON-Daten:', error));\n\n \/\/ Info-Kontroll-Element zur Anzeige von Informationen (Kreisnamen)\n var info = L.control();\n\n info.onAdd = function (map) {\n this._div = L.DomUtil.create('div', 'info');\n this.update();\n return this._div;\n };\n\n \/\/ Update-Funktion: Zeigt den Namen (name) des aktuell gehoberten Kreises an\n info.update = function (props) {\n this._div.innerHTML = '<h4>Landkreise Brandenburgs<\/h4>' + (props ? \n '<b>' + props.name + '<\/b>' : 'Bitte bewegen Sie die Maus \u00fcber die Karte');\n };\n\n info.addTo(map);\n\n \/\/ MarkerCluster f\u00fcr Punkte laden (sofern ben\u00f6tigt)\n var markers = L.markerClusterGroup();\n\n \/\/ Stelle sicher, dass die Marker-Daten verf\u00fcgbar sind\n fetch('https:\/\/www.bbsa-potsdam.de\/wp-content\/uploads\/2019\/12\/Angaben_Dezember23.txt')\n .then(response => response.text())\n .then(data => {\n \/\/ Annahme: Die Daten enthalten JavaScript-Code mit der Variable addressPoints\n eval(data); \/\/ F\u00fchrt den Code aus\n\n if (typeof addressPoints !== 'undefined') {\n addressPoints.forEach(function(a) {\n var title = a[2];\n var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });\n marker.bindPopup(title);\n markers.addLayer(marker);\n });\n map.addLayer(markers);\n } else {\n console.log(\"addressPoints is not defined\");\n }\n })\n .catch(error => console.error('Fehler beim Laden der Marker-Daten:', error));\n\n \/\/ Vollbild-Modus starten (nur die Karte wird vollbild, nicht die gesamte Seite)\n document.getElementById('fullscreenBtn').onclick = function() {\n if (map.getContainer().requestFullscreen) {\n map.getContainer().requestFullscreen();\n } else if (map.getContainer().mozRequestFullScreen) { \/\/ Firefox\n map.getContainer().mozRequestFullScreen();\n } else if (map.getContainer().webkitRequestFullscreen) { \/\/ Chrome, Safari und Opera\n map.getContainer().webkitRequestFullscreen();\n } else if (map.getContainer().msRequestFullscreen) { \/\/ IE\/Edge\n map.getContainer().msRequestFullscreen();\n }\n };\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>BBSA-Karte Vollbild<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3415"}],"version-history":[{"count":209,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415\/revisions"}],"predecessor-version":[{"id":7764,"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=\/wp\/v2\/pages\/3415\/revisions\/7764"}],"wp:attachment":[{"href":"https:\/\/www.bbsa-potsdam.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}