{"id":941,"date":"2026-08-13T20:54:13","date_gmt":"2026-08-13T18:54:13","guid":{"rendered":"https:\/\/kamenica-musica.de\/?page_id=941"},"modified":"2026-08-13T20:54:14","modified_gmt":"2026-08-13T18:54:14","slug":"map","status":"publish","type":"page","link":"https:\/\/kamenica-musica.de\/index.php\/en\/map\/","title":{"rendered":"Map"},"content":{"rendered":"<div id=\"kamenica-musica-map\" role=\"application\" aria-label=\"Interaktive Karte des Kamenica Musica Wanderwegs\">\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\tStationID = 0;\r\n\r\n    \/* =====================================================\r\n       STATUS DER STATIONEN\r\n       1 = in Betrieb\r\n       2 = Problem gemeldet, Nutzung ggf. eingeschr\u00e4nkt\r\n       3 = H\u00f6rstation au\u00dfer Betrieb\r\n       4 = Station geschlossen\r\n       ===================================================== *\/\r\n\r\n    const stationStatus = {\r\n        \"Kamenica Musica - Komponisten aus Chemnitz\": \"1\",\r\n        \"Kamenica Musica - Musik in der Schule\": \"1\",\r\n        \"Kamenica Musica - Die Concertina\": \"1\",\r\n        \"Kamenica Musica - Tanzen in Chemnitz\": \"1\",\r\n        \"Kamenica Musica - Kindermusicals\": \"1\",\r\n        \"Kamenica Musica - Junge Musik\": \"1\"\r\n    };\r\n\r\n\r\n    \/* =====================================================\r\n       KARTE STARTEN\r\n       ===================================================== *\/\r\n\r\n    function startMap() {\r\n        if (typeof L === \"undefined\") {console.error(\"Leaflet wurde nicht geladen.\");return;}\r\n\r\n        const mapElement = document.getElementById(\"kamenica-musica-map\");\r\n\r\n        if (!mapElement) {\r\n            console.error(\"Das Karten-Element #kamenica-musica-map wurde nicht gefunden.\");\r\n            return;}\r\n\r\n        \/* Falls WordPress\/Preview das Script mehrfach ausf\u00fchrt *\/\r\n        if (mapElement._leaflet_id) {return;}\r\n\r\n\r\n        \/* Karte *\/\r\n\r\n        const map = L.map(\"kamenica-musica-map\")\r\n            .setView([50.8, 12.9], 13);\r\n\r\n\r\n        \/* OpenStreetMap *\/\r\n\r\n        L.tileLayer(\"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\",\r\n            {\r\n                maxZoom: 19,\r\n                attribution:\r\n                    '&copy; <a href=\"https:\/\/www.openstreetmap.org\/\">OpenStreetMap<\/a>'\r\n            }\r\n        ).addTo(map);\r\n\r\n\r\n        \/* =================================================\r\n           GEOJSON LADEN\r\n           ================================================= *\/\r\n\r\n        fetch(\"https:\/\/kamenica-musica.de\/wp-content\/uploads\/kamenica-musica.geojson\")\r\n\r\n        .then(function (response) {\r\n            if (!response.ok) {\r\n                throw new Error(\r\n                    \"GeoJSON HTTP-Fehler: \" +\r\n                    response.status);}\r\n            return response.json();})\r\n\r\n        .then(function (geoJsonData) {\r\n            console.log(\r\n                \"GeoJSON erfolgreich geladen:\",\r\n                geoJsonData);\r\n\r\n\r\n            \/* =================================================\r\n               GEOJSON AUF DIE KARTE\r\n               ================================================= *\/\r\n\r\n            const geoLayer = L.geoJSON(\r\n                geoJsonData,\r\n                {\r\n\r\n                    \/* -----------------------------------------\r\n                       WANDERWEG\r\n                       ----------------------------------------- *\/\r\n\r\n                    style: function (feature) {\r\n                        if (feature.geometry &&\r\n                            (feature.geometry.type === \"LineString\" ||\r\n                             feature.geometry.type === \"MultiLineString\")\r\n                           )\r\n                        {return {color: \"#22398e\",weight: 5,opacity: 0.85};}\r\n                        return {};},\r\n\r\n\r\n                    \/* -----------------------------------------\r\n                       STATIONEN\r\n                       ----------------------------------------- *\/\r\n\r\n                    pointToLayer: function (feature,latlng) {\r\n\r\n                        \/\/ Nur Informationsstationen\r\n\r\n                        if (feature.properties && feature.properties.information === \"board\"){\r\n                            const name = feature.properties.name || \"\";\r\n\r\n                            \/\/ Status aus der Liste holen\r\n\r\n                            const status = stationStatus[name] || \"1\";\r\n\r\n                            \/\/ Marker\r\n\r\n                            const icon = L.divIcon({\r\n                                    html: \"\u266a\",\r\n                                    className: \"custom-audio-marker station-\" + status,\r\n                                    iconSize: [32,32],\r\n                                    iconAnchor: [16,16]\r\n\r\n                                });\r\n\r\n                            return L.marker(latlng,{icon: icon});}\r\n\r\n                        return L.circleMarker(latlng);},\r\n\r\n\r\n                    \/* -----------------------------------------\r\n                       NUR WEG + STATIONEN ANZEIGEN\r\n                       ----------------------------------------- *\/\r\n\r\n                    filter: function (feature) {\r\n                        if (!feature.geometry) {return false;}\r\n\r\n                        \/* Wanderweg *\/\r\n\r\n                        if (\r\n                            feature.geometry.type === \"LineString\" ||\r\n                            feature.geometry.type === \"MultiLineString\"\r\n                           ) {return true;}\r\n\r\n                        \/* Station *\/\r\n\r\n                        if (\r\n                            feature.geometry.type === \"Point\" &&\r\n                            feature.properties &&\r\n                            feature.properties.information === \"board\"\r\n                           ) {return true;}\r\n\r\n                        return false;},\r\n\r\n\r\n                    \/* -----------------------------------------\r\n                       POPUPS\r\n                       ----------------------------------------- *\/\r\n\r\n                    onEachFeature: function (feature, layer) {\r\n                        if (!feature.properties) {return;}\r\n\r\n                        const name = feature.properties.name;\r\n\r\n                        if (!name) {return;}\r\n\r\n                        let title = name.replace(\"Kamenica Musica - \", \"\");\r\n\r\n                        let popupContent = \"<strong>\" + title + \"<\/strong>\";\r\n\r\n\r\n                        \/* Status anzeigen *\/\r\n\r\n                        if (feature.properties.information === \"board\") {\r\n\r\n                            const status = stationStatus[name] || \"1\";\r\n\r\n                            let statusText;\r\n\r\n                            if (status === \"1\") {\r\n                                statusText = \"\ud83d\udfe2 In Betrieb\";}\r\n\r\n                            else if (status === \"2\") {\r\n                                statusText = \"\ud83d\udfe1 Problem gemeldet, Nutzung ggf. eingeschr\u00e4nkt\";}\r\n\r\n                            else if (status === \"3\") {\r\n                                statusText = \"\ud83d\udd34 H\u00f6rstation au\u00dfer Betrieb\";}\r\n\r\n                            else if (status === \"4\") {\r\n                                statusText = \"\u26ab Station geschlossen\";}\r\n\r\n\r\n                            popupContent +=\r\n                                \"<br><br>\" +\r\n                                statusText;\r\n                            }\r\n\r\n                        layer.bindPopup(popupContent);\r\n\r\n                    }\r\n\r\n                }\r\n            ).addTo(map);\r\n\r\n\r\n            \/* =================================================\r\n               KARTE AUF DEN WEG AUSRICHTEN\r\n               ================================================= \r\n\t\t\tif (geoLayer.getBounds().isValid())\r\n                {map.fitBounds(geoLayer.getBounds(),{padding: [20,20]});}\r\n\t\t\t*\/\r\n            \/* =====================================================\r\n\t\t\t   KARTENAUSSCHNITT ABH\u00c4NGIG VON StationID\r\n\t\t\t   ===================================================== *\/\r\n\r\n\t\t\tif (StationID === 0) {\r\n\r\n\t\t\t    \/* Ganze Strecke anzeigen *\/\r\n\t\t\t    if (geoLayer.getBounds().isValid())\r\n\t\t\t\t\t{map.fitBounds(geoLayer.getBounds(),{padding: [20, 20]});}\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\telse {\r\n\t\t\t    const stationen = {\r\n\t\t\t        1: [50.8253611, 12.9175902], \/\/ Junge Musik\r\n\t\t\t        2: [50.8189307, 12.9070115], \/\/ Kindermusicals\r\n\t\t\t        3: [50.7974203, 12.9110225], \/\/ Musik in der Schule\r\n\t\t\t        4: [50.8099207, 12.9036025], \/\/ Tanzen in Chemnitz\r\n\t\t\t        5: [50.7903993, 12.9133533], \/\/ Komponisten\r\n\t\t\t        6: [50.7995906, 12.9039569]  \/\/ Concertina\r\n\t\t\t    };\r\n\t\t\t\r\n\t\t\t    \/* Koordinaten der gew\u00fcnschten Station *\/\r\n\t\t\t\r\n\t\t\t    const position = stationen[StationID];\r\n\t\t\t\t\r\n\t\t\t    \/* Station gefunden *\/\r\n\t\t\t\r\n\t\t\t    if (position) {map.setView(position, 15);}\r\n\t\t\t\r\n\t\t\t    \/* Ung\u00fcltige StationID *\/\r\n\t\t\t\r\n\t\t\t    else {console.warn(\"Ung\u00fcltige StationID:\", StationID);\r\n\t\t\t        if (geoLayer.getBounds().isValid())\r\n\t\t\t\t\t\t{map.fitBounds(geoLayer.getBounds(),{padding: [20, 20]});\r\n\t\t\t        }\r\n\t\t\t\t}\r\n\t\t\t}\r\n            console.log(\"Weg und Stationen wurden auf die Karte geladen.\");})\r\n\r\n\r\n        \/* =================================================\r\n           FEHLERBEHANDLUNG\r\n           ================================================= *\/\r\n\r\n        .catch(function (error)\r\n            {console.error(\"Fehler beim Laden der GeoJSON:\", error);}\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEAFLET LADEN, FALLS NOCH NICHT VORHANDEN\r\n       ===================================================== *\/\r\n\r\n    if (typeof L !== \"undefined\")\r\n        {startMap();}\r\n\r\n    else {\r\n        const leafletScript = document.createElement(\"script\");\r\n\r\n        leafletScript.src = \"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\";\r\n\r\n        leafletScript.onload = startMap;\r\n\r\n        leafletScript.onerror = function ()\r\n            {console.error(\"Leaflet konnte nicht geladen werden.\");};\r\n\r\n        document.head.appendChild(leafletScript);\r\n    }\r\n\r\n})();\r\n<\/script>\r\n\r\n<style>\r\n\t@import url('https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css');\r\n\r\n#kamenica-musica-map {\r\n    width: 100%;\r\n    height: 600px;\r\n}\r\n\r\n\/* Grundaussehen der Station *\/\r\n.custom-audio-marker {\r\n    background-color: #fff;\r\n    border: 2px solid #22398e;\r\n    border-radius: 50%;\r\n    color: #22398e;\r\n    text-align: center;\r\n    line-height: 30px;\r\n    font-size: 16px;\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.4);\r\n}\r\n\r\n\/* Station in Betrieb *\/\r\n.station-1 {\r\n    background-color: green;\r\n    border-color: #22398e;\r\n    color: white;\r\n}\r\n\r\n\/* Problem gemeldet, Nutzung ggf. eingeschr\u00e4nkt *\/\r\n.station-2 {\r\n    background-color: yellow;\r\n    border-color: #22398e;\r\n    color: black;\r\n}\r\n\r\n\/* H\u00f6rtation au\u00dfer Betrieb *\/\r\n.station-3 {\r\n    background-color: red;\r\n    border-color: #22398e;\r\n    color: white;\r\n}\r\n\r\n\/* Station au\u00dfer Betrieb *\/\r\n.station-4 {\r\n    background-color: black;\r\n    border-color: #22398e;\r\n    color: white;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    #kamenica-musica-map {\r\n        height: 500px;\r\n    }\r\n}\r\n<\/style>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-941","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/pages\/941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/comments?post=941"}],"version-history":[{"count":1,"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/pages\/941\/revisions"}],"predecessor-version":[{"id":942,"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/pages\/941\/revisions\/942"}],"wp:attachment":[{"href":"https:\/\/kamenica-musica.de\/index.php\/wp-json\/wp\/v2\/media?parent=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}