{"id":589,"date":"2025-05-27T16:42:42","date_gmt":"2025-05-27T14:42:42","guid":{"rendered":"https:\/\/sunflower-theme.de\/demo\/?page_id=589"},"modified":"2025-05-27T16:42:42","modified_gmt":"2025-05-27T14:42:42","slug":"karte-beispiel","status":"publish","type":"page","link":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/","title":{"rendered":"Karte Beispiel"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ein bisschen Text<\/p>\n\n\n    <div id=\"map-container\" style=\"position: relative;\">\n        <div id=\"map\" style=\"height: 400px;\"><\/div>\n    <\/div>\n    <form id=\"leaflet-form\" style=\"display: none; margin-top: 1em;\">\n        <input type=\"text\" name=\"name\" placeholder=\"Dein Name\" required><br>\n        <textarea name=\"message\" placeholder=\"Deine Nachricht\" required><\/textarea><br>\n        <input type=\"hidden\" name=\"lat\">\n        <input type=\"hidden\" name=\"lng\">\n        <input type=\"hidden\" name=\"action\" value=\"send_leaflet_form\">\n        <button type=\"submit\">Absenden<\/button>\n    <\/form>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        \/\/ Custom \"Locate Me\" Control\n        L.Control.LocateControl = L.Control.extend({\n            onAdd: function (map) {\n                var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');\n\n                container.innerHTML = '<i class=\"fa-solid fa-location-crosshairs\"><\/i>';\n                container.style.backgroundColor = 'white';\n                container.style.width = '34px';\n                container.style.height = '34px';\n                container.style.display = 'flex';\n                container.style.alignItems = 'center';\n                container.style.justifyContent = 'center';\n                container.style.cursor = 'pointer';\n\n                container.onclick = function () {\n                    map.locate({ setView: true, maxZoom: 15 });\n                };\n\n                \/\/ Mausinteraktion auf der Karte nicht blockieren\n                L.DomEvent.disableClickPropagation(container);\n\n                return container;\n            },\n\n            onRemove: function (map) {\n                \/\/ nichts n\u00f6tig\n            }\n        });\n\n        var map = L.map('map',\n                {scrollWheelZoom: true, dragging: true, fullscreen: true}).setView([51.25426,7.14987], 13);\n\n        L.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '&copy; <a href=\\\"http:\\\/\\\/www.openstreetmap.org\\\/copyright\\\">OpenStreetMap contributors<\\\/a>'\n        }).addTo(map);\n\n        map.addControl(new L.Control.LocateControl({ position: 'topright' }));\n\n        map.on('locationfound', function (e) {\n            const marker = L.marker(e.latlng).addTo(map)\n                .bindPopup(\"Du bist hier!\").openPopup();\n\n            L.circle(e.latlng, {\n                radius: e.accuracy,\n                color: '#136aec',\n                fillColor: '#136aec',\n                fillOpacity: 0.2\n            }).addTo(map);\n\n            \/\/ Remove marker of current location after 2 seconds\n            setTimeout(() => {\n                map.removeLayer(marker);\n            }, 2000);\n        });\n\n        map.on('locationerror', function (e) {\n            alert(\"Standort konnte nicht gefunden werden: \" + e.message);\n        });\n\n        var marker;\n\n        map.on('click', function(e) {\n            if (marker) {\n                marker.setLatLng(e.latlng);\n            } else {\n                marker = L.marker(e.latlng).addTo(map);\n            }\n            document.getElementById('leaflet-form').style.display = 'block';\n            document.querySelector('input[name=\"lat\"]').value = e.latlng.lat;\n            document.querySelector('input[name=\"lng\"]').value = e.latlng.lng;\n        });\n\n        document.getElementById('leaflet-form').addEventListener('submit', function (e) {\n            e.preventDefault();\n            const form = this;\n            const formData = new FormData(form);\n\n            fetch('https:\/\/sunflower-theme.de\/demo\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            }).then(response => response.json())\n              .then(data => {\n                  alert(data.message);\n                  form.reset();\n                  form.style.display = 'none';\n                  if (marker) {\n                      map.removeLayer(marker);\n                      marker = null;\n                  }\n              }).catch(error => {\n                  alert('Fehler beim Absenden!');\n                  console.error(error);\n              });\n        });\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"<p>Ein bisschen Text<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-589","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Karte Beispiel - Sunflower 26<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Karte Beispiel - Sunflower 26\" \/>\n<meta property=\"og:description\" content=\"Ein bisschen Text\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/\" \/>\n<meta property=\"og:site_name\" content=\"Sunflower 26\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/karte-beispiel\\\/\",\"url\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/karte-beispiel\\\/\",\"name\":\"Karte Beispiel - Sunflower 26\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/#website\"},\"datePublished\":\"2025-05-27T14:42:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/karte-beispiel\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/karte-beispiel\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/karte-beispiel\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Karte Beispiel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/#website\",\"url\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/\",\"name\":\"Sunflower 26\",\"description\":\"Demoseite f\u00fcr das WordPress-Theme Sunflower 26\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sunflower-theme.de\\\/demo\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Karte Beispiel - Sunflower 26","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/","og_locale":"de_DE","og_type":"article","og_title":"Karte Beispiel - Sunflower 26","og_description":"Ein bisschen Text","og_url":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/","og_site_name":"Sunflower 26","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/","url":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/","name":"Karte Beispiel - Sunflower 26","isPartOf":{"@id":"https:\/\/sunflower-theme.de\/demo\/#website"},"datePublished":"2025-05-27T14:42:42+00:00","breadcrumb":{"@id":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sunflower-theme.de\/demo\/karte-beispiel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/sunflower-theme.de\/demo\/"},{"@type":"ListItem","position":2,"name":"Karte Beispiel"}]},{"@type":"WebSite","@id":"https:\/\/sunflower-theme.de\/demo\/#website","url":"https:\/\/sunflower-theme.de\/demo\/","name":"Sunflower 26","description":"Demoseite f\u00fcr das WordPress-Theme Sunflower 26","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunflower-theme.de\/demo\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/pages\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":1,"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/pages\/589\/revisions"}],"predecessor-version":[{"id":590,"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/pages\/589\/revisions\/590"}],"wp:attachment":[{"href":"https:\/\/sunflower-theme.de\/demo\/wp-json\/wp\/v2\/media?parent=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}