{"id":57,"date":"2024-10-02T19:57:12","date_gmt":"2024-10-02T19:57:12","guid":{"rendered":"https:\/\/redie-hd.de\/?page_id=57"},"modified":"2024-10-03T21:44:43","modified_gmt":"2024-10-03T21:44:43","slug":"munchen","status":"publish","type":"page","link":"https:\/\/redie-hd.de\/index.php\/munchen\/","title":{"rendered":"Interaktiver Stadtplan &#8211; M\u00fcnchen"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<head>\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.css\" \/>\n<script src=\"https:\/\/unpkg.com\/leaflet@1.7.1\/dist\/leaflet.js\"><\/script>\n\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.css\" \/>\n<script src=\"https:\/\/unpkg.com\/leaflet-routing-machine@3.2.12\/dist\/leaflet-routing-machine.js\"><\/script>\n<div id=\"map\" style=\" height: 400px; margin-left: 5%; margin-right: 5%\"><\/div>\n\n<!-- Fullscreen Plugin CSS -->\n<link href='https:\/\/api.mapbox.com\/mapbox.js\/plugins\/leaflet-fullscreen\/v1.0.1\/leaflet.fullscreen.css' rel='stylesheet' \/>\n<script src='https:\/\/api.mapbox.com\/mapbox.js\/plugins\/leaflet-fullscreen\/v1.0.1\/Leaflet.fullscreen.min.js'><\/script>\n\n\n    <style>\n        .button-container {\n            display: flex; \/* Buttons in einer Zeile anordnen *\/\n            gap: 5px; \/* Abstand zwischen den Buttons *\/\n        }\n\n        .button-container a {\n            text-decoration: none; \/* Entfernt die Unterstreichung von Links *\/\n        }\n\n        .button-container button {\n            padding: 5px 12px;\n            font-size: 10px;\n            cursor: pointer;\n        }\n    <\/style>\n\n\t<script>\n\t    \/\/ Liste der Sehensw\u00fcrdigkeiten\n        var sehenswuerdigkeiten = [\n            {\n                name: \"Marienplatz\",\n                coords: [48.137229843564384, 11.57538236181099],\n                info: \"Zentrum und Herz von M\u00fcnchen.\",\n\t\t\t\tref:\"https:\/\/de.wikipedia.org\/wiki\/Marienplatz_(M%C3%BCnchen)\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/62\/Neues_Rathaus_und_Marienplatz_M%C3%BCnchen.jpg\/245px-Neues_Rathaus_und_Marienplatz_M%C3%BCnchen.jpg\"\n            },\n            {\n                name: \"Viktualienmarkt\",\n                coords: [48.13540876042617, 11.576073335457512],\n                info: \"Hier gibt's alles.\",\n\t\t\t\tref:\"https:\/\/de.wikipedia.org\/wiki\/Viktualienmarkt\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/ef\/Viktualienmarkt_2016.jpg\"\n            },\n            {\n                name: \"Stachus\",\n                coords: [48.13924910714985, 11.565970362534179],\n                info: \"Auch Karlsplatz genannt.\",\n\t\t\t\tref:\"https:\/\/de.wikipedia.org\/wiki\/Stachus\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/5\/52\/Stachus_2014-08-02_pseudo-pano.jpg\/245px-Stachus_2014-08-02_pseudo-pano.jpg\"\n            },\n            {\n                name: \"Englischer Garten\",\n                coords: [48.148545, 11.588867],\n                info: \"M\u00fcnchen's gr\u00fcne Lunge.\",\n\t\t\t\tref: \"https:\/\/de.wikipedia.org\/wiki\/Englischer_Garten_(M%C3%BCnchen)\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bc\/Aerial_image_of_Englischer_Garten_in_Munich_%28view_from_the_southwest%29.jpg\/420px-Aerial_image_of_Englischer_Garten_in_Munich_%28view_from_the_southwest%29.jpg\"\n            },\n            {\n                name: \"Olympia Park\",\n                coords: [48.17572013559, 11.551966442329949],\n                info: \"Gro\u00dfer Park im Norden.\",\n\t\t\t\tref: \"https:\/\/de.wikipedia.org\/wiki\/Olympiapark_(M%C3%BCnchen)\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/d\/d1\/M%C3%BCnchen_-_Olympische_Bauten.jpg\"\n            },\n            {\n                name: \"Schloss Nymphenburg\",\n                coords: [48.15852154203098, 11.503400127549517],\n                info: \"Sommersitz der Wittelsbacher.\",\n\t\t\t\tref: \"https:\/\/de.wikipedia.org\/wiki\/Schloss_Nymphenburg\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/0b\/Image-Schloss_Nymphenburg_Munich_CC_edit3.jpg\"\n            },\n            {\n                name: \"Deutsches Museum\",\n                coords: [48.130035371720865, 11.583409281527775],\n                info: \"Deutsches Museum.\",\n\t\t\t\tref: \"https:\/\/de.wikipedia.org\/wiki\/Deutsches_Museum\",\n\t\t\t\timageUrl: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/14\/Deutsches_Museum_Portrait_4.jpg\/1280px-Deutsches_Museum_Portrait_4.jpg\"\n            }\n\t\t\t\n        ];\n\n\t\n\t<\/script>\n\n<\/head>\n\n<body>\n\n<script>\n\t  \/\/ Karte initialisieren\n\t  var map = L.map('map').setView([48.1270540203646, 11.606752898152441], 13); \/\/ Standardposition\n\t  var destination = [48.137154, 11.576124];\n\t  var routingControl=null;\n\t  var currentLocation=null;\n\t  \n\t  var markers = [];\n\t  var address = null;\n  \n\t  \/\/ OpenStreetMap-Tiles hinzuf\u00fcgen\n\t  L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\tattribution: '&copy; <a href=\"https:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a> contributors'\n\t  }).addTo(map);\n\n\n        \/\/ Marker f\u00fcr Sehensw\u00fcrdigkeiten hinzuf\u00fcgen\n        sehenswuerdigkeiten.forEach(function (sehenswuerdigkeit) {\n                    \/\/ Entferne vorherige Zielmarkierungen und Routen\n  \t\t    var marker = L.marker(sehenswuerdigkeit.coords).addTo(map);\n            marker.bindPopup(`<b><a href='${sehenswuerdigkeit.ref}'> ${sehenswuerdigkeit.name}<\/a><\/b><br>`+ \n\t\t\t         `<img decoding=\"async\" src=\"${sehenswuerdigkeit.imageUrl}\" alt=\"Bild\" style=\"width:200px;height:auto;\"><br>` + sehenswuerdigkeit.info);\n\n\t\t\t\/\/ Event listener for marker click\n\t\t\tmarker.on('click', function(e) {\n\t\t\t\tvar coords = marker.getLatLng(); \/\/ Get marker's current position\n\t\t\t\t\n\t\t\t\t<!-- alert(\"Marker coordinates: \" + coords.lat + \", \" + coords.lng); -->\n\t\t\t\t\n\t\t        window.destination = [coords.lat, coords.lng];\n\n\t\t\t\t\/\/ Entferne vorherige Zielmarkierungen und Routen\n\t\t\t\tif (window.destinationMarker) {\n\t\t\t\t\tmap.removeLayer(window.destinationMarker);\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tif (window.routingControl) {\n\t\t\t\t\tmap.removeControl(window.routingControl);\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t<!-- window.destinationMarker = L.marker(window.destination).addTo(map) -->\n\t\t\t\t\t<!-- .bindPopup(\"Neues Ziel\").openPopup(); -->\n\n\t\t\t\t<!-- alert(window.currentLocation); -->\n\t\t\t\t\/\/ Route erstellen\n\t\t\t\tif (window.currentLocation) {\n\t\t\t\t\tcreateRoute(window.currentLocation, window.destination);\n\t\t\t\t}\n\n\n\n\t\t\t});\n\n\t\t\t\/\/ Event listener for marker drag\n\t\t\tmarker.on('dragend', function(e) {\n\t\t\t\tvar coords = marker.getLatLng();\n\t\t\t\talert(\"Marker new position: \" + coords.lat + \", \" + coords.lng);\n\t\t\t\t\n\t\t\t});\n\n\t\t\t\/\/ Marker in das Array speichern (optional)\n            markers.push(marker);\n\t    });\n\t\t\t\n\t\tasync function checkForAttraction(lat, lng) {\n\t\t\t\/\/ Overpass API Query\n\t\t\tvar overpassUrl = `https:\/\/overpass-api.de\/api\/interpreter?data=[out:json];node[\"historic=monument\"](around:100,${lat},${lng});out body;`;\n\n\t\t\ttry {\n\t\t\t\tlet response = await fetch(overpassUrl);\n\t\t\t\tlet data = await response.json();\n\n\t\t\t\tif (data && data.elements.length > 0) {\n\t\t\t\t\treturn data.elements.map(element => element.tags.name).join(\", \");\n\t\t\t\t} else {\n\t\t\t\t\treturn \"Keine Sehensw\u00fcrdigkeit in der N\u00e4he gefunden.\";\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\treturn \"Fehler bei der \u00dcberpr\u00fcfung auf Sehensw\u00fcrdigkeiten: \" + error;\n\t\t\t}\n\t\t}\t\t\t\n\t\t\n\t\t\t\n\t\t\/\/ Funktion zum Abrufen der Adresse\n\t\tfunction getAddress(lat, lng) {\n\t\t\t\/\/ Nominatim Reverse-Geocoding-API URL\n\t\t\tvar url = `https:\/\/nominatim.openstreetmap.org\/reverse?format=jsonv2&lat=${lat}&lon=${lng}`;\n\n\t\t\t\/\/ API-Anfrage senden\n\t\t\tfetch(url)\n\t\t\t.then(response => response.json())\n\t\t\t.then(data => {\n\t\t\t\tif (data && data.address) {\n\t\t\t\t\taddress = data.address.road + \" \" + (data.address.house_number || \"\");\n\t\t\t\t\t<!-- + \", \" + data.address.city || \"\" + \", \" + data.address.country || \"\"; -->\n\t\t\t\t\t<!-- alert(\"Adresse: \" + address); -->\n\t\t\t\t\twindow.destinationMarker = L.marker(window.destination).addTo(map)\n\t\t\t\t\t\t\t\t\t\t.bindPopup(window.address).openPopup();\n\t\n\t\t\t\t<!-- checkForAttraction(lat, lng).then(result => alert(result)); -->\n\t  \n\t\t\t\t} else {\n\t\t\t\t\talert(\"Keine Adresse gefunden.\");\n\t\t\t\t}\n\t\t\t})\n\t\t\t.catch(error => {\n\t\t\t\tconsole.error(\"Fehler beim Abrufen der Adresse:\", error);\n\t\t\t\t<!-- alert(\"Fehler beim Abrufen der Adresse.\"); -->\n\t\t\t});\n\t\t}\t\t\t\n\t\t\t\n\t\t\/\/ Function to display the coordinates\n\t\tfunction onMarkerClick(e) {\n\t\t\tvar coords = e.latlng;\n\t\t\talert(\"Marker coordinates: \" + coords.lat + \", \" + coords.lng);\n\t\t}\n\n\t\t\n\t  \/\/ Funktion zur Erstellung der Route\n\t  function createRoute(currentLocation, destination) {\n\t\t\n\t\tif (routingControl != null)\n\t\t{\n\t\t\tif (routingControl != null) {\n\t\t\t\tmap.removeControl(routingControl);\n\t\t\t\troutingControl = null;\n\t\t\t}\n\t\t}\n\t\t\t\t\n\t\t  routingControl = L.Routing.control({\n\t\t  waypoints: [\n\t\t\tL.latLng(currentLocation), \/\/ Startpunkt: aktueller Standort\n\t\t\tL.latLng(destination) \/\/ Ziel: Beispielsweise Berlin (kann ersetzt werden)\n\t\t  ],\n\n\t\t  routeWhileDragging: true,\n\t\t  router: L.Routing.osrmv1({\n\t\t\t   serviceUrl: 'https:\/\/routing.openstreetmap.de\/routed-foot\/route\/v1\/',\n\t\t\t   profile: 'foot'\n\t\t  }),\n\t\t  show: false,\n\t\t  addWaypoints: true,\n\t\t  draggableWaypoints: true,\n\t\t  fitSelectedRoutes: false,\n\t\t  lineOptions: {\n\t\t\tstyles: [{ color: 'blue', weight: 4 }]\n\t\t  },\n\t\t  formatter: new L.Routing.Formatter({\n\t\t\tlanguage: 'de',\n\t\t\tunits: 'metric'\n\t\t  }),\n\t\t  showAlternatives: false\n\t\t  \n\t\t}).addTo(map);\n\t\t\n\t\tmap.setView(window.destination);\n\t\t<!-- getByTransport('foot',routingControl); -->\n\t  }\n\n\t  \/\/ Geolocation verwenden, um den aktuellen Standort zu ermitteln\n\t  if (navigator.geolocation) {\n\t\tnavigator.geolocation.getCurrentPosition(function (position) {\n\t\t  window.currentLocation = [position.coords.latitude, position.coords.longitude];\n\t\t  \n\t\t  \/\/ Marker f\u00fcr den aktuellen Standort hinzuf\u00fcgen\n\t\t  L.marker(window.currentLocation).addTo(map)\n\t\t\t.bindPopup(\"I bin do!\")\n\t\t\t.openPopup();\n\n\t\t  \/\/ Route mit aktuellem Standort als Startpunkt erstellen\n\t\t  createRoute(window.currentLocation, destination);\n\t\t}, function () {\n\t\t  alert(\"Konnte Standort nicht ermitteln.\");\n\t\t});\n\t  } else {\n\t\talert(\"Geolocation wird von deinem Browser nicht unterst\u00fctzt.\");\n\t  }\n  \n \t\t\/\/ Vollbild-Steuerung hinzuf\u00fcgen\n        map.addControl(new L.Control.Fullscreen());\n\n        \/\/ Ereignis, wenn der Vollbildmodus aktiviert wird\n        map.on('enterFullscreen', function(){\n            console.log('Karte ist jetzt im Vollbildmodus');\n        });\n\n        \/\/ Ereignis, wenn der Vollbildmodus verlassen wird\n        map.on('exitFullscreen', function(){\n            console.log('Karte ist jetzt nicht mehr im Vollbildmodus');\n        }); \n      \/\/ Optional: Ziel durch Klick auf die Karte festlegen\n      map.on('click', function(e) {\n\n        window.destination = [e.latlng.lat, e.latlng.lng];\n\n        \/\/ Entferne vorherige Zielmarkierungen und Routen\n        if (window.destinationMarker) {\n            map.removeLayer(window.destinationMarker);\n        }\n\t\t\n        if (window.routingControl) {\n            map.removeControl(window.routingControl);\n        }\n\t\t\n        \/\/ Marker f\u00fcr das neue Ziel hinzuf\u00fcgen\n\t\tgetAddress(e.latlng.lat, e.latlng.lng);\n\t\t\n\n        <!-- window.destinationMarker = L.marker(window.destination).addTo(map) -->\n            <!-- .bindPopup(window.address).openPopup(); -->\n\n\t\t<!-- alert(window.currentLocation); -->\n        \/\/ Route erstellen\n        if (window.currentLocation) {\n            createRoute(window.currentLocation, window.destination);\n        }\n    });\n            function goToLocation(index) {\n\t\t    \n            window.map.setView(sehenswuerdigkeiten[index].coords); \/\/ Springt zu den Koordinaten von Marienplatz, Zoom-Level 16\n\t\t\t\n  \t\t    <!-- var marker = L.marker(sehenswuerdigkeiten[index].coords).addTo(window.map); -->\n            var marker = markers[index];\n \t\t    <!-- marker.bindpopup(`<b><a href='${sehenswuerdigkeiten[index].ref}'> ${sehenswuerdigkeiten[index].name}<\/a><\/b><br>`+  -->\n\t\t\t         <!-- `<img decoding=\"async\" src=\"${sehenswuerdigkeiten[index].imageurl}\" alt=\"bild\" style=\"width:200px;height:auto;\"><br>` + sehenswuerdigkeiten[index].info); -->\n\t\t\tmarker.openPopup();\t\t \n            <!-- window.sehenswuerdigkeiten[0].openPopup(); \/\/ \u00d6ffnet das Popup am Marker -->\n\t\t\t<!-- alert(window.sehenswuerdigkeiten[0].name) -->\n\t\t\twindow.destination = sehenswuerdigkeiten[index].coords;\n\t\t\tcreateRoute(window.currentLocation, window.destination);\n        }\t\n<\/script>\n<\/body>\n<\/div><\/div>\n\n\n\n<div class=\"button-container\" style=\"margin-left: 5% ; margin-right: 5%\">\n        <a>\n\t\t\t<button onclick=\"goToLocation(0)\">Marienplatz<\/button>\n        <\/a>\n        <a>\n\t\t\t<button onclick=\"goToLocation(1)\">Viktualienmarkt<\/button>\n        <\/a>\n        <a>\n\t\t\t<button onclick=\"goToLocation(2)\">Stachus<\/button>\n        <\/a>\n        <a>\n\t\t\t<button onclick=\"goToLocation(3)\">Englischer Garten<\/button>\n        <\/a>\n    <\/div>\t\n<div class=\"button-container\" style=\"margin-left: 5% ; margin-right: 5%\">\n        <a>\n\t\t\t<button onclick=\"goToLocation(4)\">Olympiapark<\/button>\n        <\/a>\t   \t\n        <a>\n\t\t\t<button onclick=\"goToLocation(5)\">Schloss Nymphenburg<\/button>\n        <\/a>\n        <a>\n\t\t\t<button onclick=\"goToLocation(6)\">Deutsches Museum<\/button>\n        <\/a>\n    <\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Marienplatz Viktualienmarkt Stachus Englischer Garten Olympiapark Schloss Nymphenburg Deutsches Museum<\/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-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":47,"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":125,"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/pages\/57\/revisions\/125"}],"wp:attachment":[{"href":"https:\/\/redie-hd.de\/index.php\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}