Karte mit dynamischen Routen<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n <style>\n #map { height: 600px; }\n #controls { margin: 10px; text-align: center; }\n button {\n padding: 10px 15px;\n margin: 5px;\n font-size: 16px;\n cursor: pointer;\n }\n\n \/* Blinke-Effekt mit CSS *\/\n @keyframes blink {\n 0% { opacity: 1; }\n 50% { opacity: 0; }\n 100% { opacity: 1; }\n }\n\n .blinking-icon {\n animation: blink 1s infinite;\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"controls\">\n <button onclick=\"showParisRoute()\">Zeige Route Leer \u2194 Paris<\/button>\n <button onclick=\"showNewYorkRoute()\">Zeige Route Leer \u2194 New York<\/button>\n <\/div>\n <div id=\"map\"><\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n <script>\n \/\/ 1. Karte erstellen\n var map = L.map('map').setView([47.0, -33.3], 4); \/\/ Mitte zwischen Leer & New York\n\n \/\/ 2. OpenStreetMap-Layer hinzuf\u00fcgen\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ 3. Blinken mit CSS\n function createBlinkingMarker(lat, lon) {\n var blinkingIcon = L.divIcon({\n className: 'blinking-icon', \n html: '\ud83d\udd34', \/\/ Emoji als Marker (Alternativ: eigenes SVG)\n iconSize: [25, 25],\n iconAnchor: [12, 12]\n });\n return L.marker([lat, lon], { icon: blinkingIcon }).addTo(map);\n }\n\n \/\/ 4. Positionen der Marker\n var paris = [48.8566, 2.3522]; \n var leer = [53.2306, 7.4610]; \n var newYork = [40.7128, -74.0060]; \n\n \/\/ 5. Blinkende Marker setzen\n createBlinkingMarker(leer[0], leer[1]);\n createBlinkingMarker(paris[0], paris[1]);\n createBlinkingMarker(newYork[0], newYork[1]);\n\n \/\/ 6. Start: Keine Linie aktiv\n var routeLine = null;\n\n \/\/ 7. Funktion f\u00fcr Route Leer \u2194 Paris\n function showParisRoute() {\n if (routeLine) map.removeLayer(routeLine); \/\/ Alte Linie entfernen\n routeLine = L.polyline([leer, paris], { color: 'green', weight: 4 }).addTo(map);\n map.setView([51.0, 5.0], 5); \/\/ Zoome zur Mitte von Leer & Paris\n }\n\n \/\/ 8. Funktion f\u00fcr Route Leer \u2194 New York\n function showNewYorkRoute() {\n if (routeLine) map.removeLayer(routeLine); \/\/ Alte Linie entfernen\n routeLine = L.polyline([leer, newYork], { color: 'blue', weight: 4 }).addTo(map);\n map.setView([47.0, -33.3], 4); \/\/ Zoome zur Mitte von Leer & New York\n }\n\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Karte mit dynamischen Routen Zeige Route Leer \u2194 Paris Zeige Route Leer \u2194 New York<\/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-3560","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3560"}],"version-history":[{"count":7,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560\/revisions"}],"predecessor-version":[{"id":3571,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560\/revisions\/3571"}],"wp:attachment":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3560,"date":"2025-03-27T11:25:11","date_gmt":"2025-03-27T10:25:11","guid":{"rendered":"https:\/\/z31.vfdb.org\/wordpress\/?page_id=3560"},"modified":"2025-03-27T12:13:55","modified_gmt":"2025-03-27T11:13:55","slug":"karte","status":"publish","type":"page","link":"https:\/\/z31.vfdb.org\/wordpress\/?page_id=3560","title":{"rendered":"Karte"},"content":{"rendered":"\n\n\n\n \n \n Karte mit dynamischen Routen<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\n <style>\n #map { height: 600px; }\n #controls { margin: 10px; text-align: center; }\n button {\n padding: 10px 15px;\n margin: 5px;\n font-size: 16px;\n cursor: pointer;\n }\n\n \/* Blinke-Effekt mit CSS *\/\n @keyframes blink {\n 0% { opacity: 1; }\n 50% { opacity: 0; }\n 100% { opacity: 1; }\n }\n\n .blinking-icon {\n animation: blink 1s infinite;\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"controls\">\n <button onclick=\"showParisRoute()\">Zeige Route Leer \u2194 Paris<\/button>\n <button onclick=\"showNewYorkRoute()\">Zeige Route Leer \u2194 New York<\/button>\n <\/div>\n <div id=\"map\"><\/div>\n\n <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\n <script>\n \/\/ 1. Karte erstellen\n var map = L.map('map').setView([47.0, -33.3], 4); \/\/ Mitte zwischen Leer & New York\n\n \/\/ 2. OpenStreetMap-Layer hinzuf\u00fcgen\n L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n attribution: '© OpenStreetMap contributors'\n }).addTo(map);\n\n \/\/ 3. Blinken mit CSS\n function createBlinkingMarker(lat, lon) {\n var blinkingIcon = L.divIcon({\n className: 'blinking-icon', \n html: '\ud83d\udd34', \/\/ Emoji als Marker (Alternativ: eigenes SVG)\n iconSize: [25, 25],\n iconAnchor: [12, 12]\n });\n return L.marker([lat, lon], { icon: blinkingIcon }).addTo(map);\n }\n\n \/\/ 4. Positionen der Marker\n var paris = [48.8566, 2.3522]; \n var leer = [53.2306, 7.4610]; \n var newYork = [40.7128, -74.0060]; \n\n \/\/ 5. Blinkende Marker setzen\n createBlinkingMarker(leer[0], leer[1]);\n createBlinkingMarker(paris[0], paris[1]);\n createBlinkingMarker(newYork[0], newYork[1]);\n\n \/\/ 6. Start: Keine Linie aktiv\n var routeLine = null;\n\n \/\/ 7. Funktion f\u00fcr Route Leer \u2194 Paris\n function showParisRoute() {\n if (routeLine) map.removeLayer(routeLine); \/\/ Alte Linie entfernen\n routeLine = L.polyline([leer, paris], { color: 'green', weight: 4 }).addTo(map);\n map.setView([51.0, 5.0], 5); \/\/ Zoome zur Mitte von Leer & Paris\n }\n\n \/\/ 8. Funktion f\u00fcr Route Leer \u2194 New York\n function showNewYorkRoute() {\n if (routeLine) map.removeLayer(routeLine); \/\/ Alte Linie entfernen\n routeLine = L.polyline([leer, newYork], { color: 'blue', weight: 4 }).addTo(map);\n map.setView([47.0, -33.3], 4); \/\/ Zoome zur Mitte von Leer & New York\n }\n\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Karte mit dynamischen Routen Zeige Route Leer \u2194 Paris Zeige Route Leer \u2194 New York<\/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-3560","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3560"}],"version-history":[{"count":7,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560\/revisions"}],"predecessor-version":[{"id":3571,"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3560\/revisions\/3571"}],"wp:attachment":[{"href":"https:\/\/z31.vfdb.org\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}