{"id":710,"date":"2026-03-12T15:23:00","date_gmt":"2026-03-12T14:23:00","guid":{"rendered":"https:\/\/casa-creativa.es\/?page_id=710"},"modified":"2026-05-21T10:41:40","modified_gmt":"2026-05-21T08:41:40","slug":"hermigua","status":"publish","type":"page","link":"https:\/\/casa-creativa.es\/de\/hermigua\/","title":{"rendered":"Hermigua"},"content":{"rendered":"<div class=\"lazyblock-hermigua-intro-Z1A12Xn wp-block-lazyblock-hermigua-intro\"><!-- Block: Map -->\n\n\n\n<section class=\"block-hermigua-intro\">\n            <h1>Hermigua<\/h1>\n        \n            <p class=\"block-hermigua-intro__intro\">Die Casa Creativa liegt im \u201eunteren Dorf\u201c von Hermigua, an der Hauptstra\u00dfe Richtung Agulo und Vallehermoso. Zentral und trotzdem ruhig, erholsam und trotzdem gesellig, ohne Luxus und trotzdem exzellent.<\/p>\n    \n            <p class=\"block-hermigua-intro__text\">Die Casa Creativa liegt im \u201eunteren Dorf\u201c von Hermigua, an der Hauptstra\u00dfe Richtung Agulo und Vallehermoso. Zentral und trotzdem ruhig, erholsam und trotzdem gesellig, ohne Luxus und trotzdem exzellent.  Kaum hat man den Tunnel am \u201eCumbre\u201c verlassen, entdeckt man rechts das langgezogene gr\u00fcne Tal von Hermigua.\n\nDer gewaltige \u201eBarranco\u201c mit seinen Bananenplantagen erstreckt sich kilometerlang bis zum Meer hin. Kanarische H\u00e4user s\u00e4umen die Hauptstra\u00dfe.  Hermigua, eingebettet in die atemberaubende Landschaft von La Gomera, l\u00e4dt Sie ein, ein verborgenes Juwel innerhalb der Kanarischen Inseln zu entdecken, das einen bezaubernden und belebenden R\u00fcckzug verspricht. Diese malerische Gemeinde, die sich im nord\u00f6stlichen Teil der Insel befindet, begeistert Besucher mit ihren \u00fcppigen T\u00e4lern, terrassierten Feldern und dem Charme ihrer traditionellen kanarischen Architektur.<\/p>\n    <\/section><\/div>\n\n<div class=\"lazyblock-map-aobih wp-block-lazyblock-map\">\n<!-- Block: Map Preview -->\n<section class=\"block-map\">\n\n    \n    <div class=\"block-map__map\">\n        <button class=\"button-center-map\">\n            Zentrieren        <\/button>\n    <\/div>\n\n            <div class=\"block-map__legend\">\n                            <div class=\"legend-card\" data-marker-index=\"0\">\n\n                                            <img decoding=\"async\" src=\"https:\/\/casa-creativa.es\/wp-content\/uploads\/2026\/03\/Casa-creativa-La-Casa-12-scaled-1.jpg\" alt=\"Casa Creativa\">\n                    \n                    <div class=\"legend-card__text\">\n                                                    <h3>\n                                <span class=\"legend-card__number\">1<\/span>\n                                Casa Creativa                            <\/h3>\n                                                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.<\/p>\n                                            <\/div>\n                <\/div>\n                            <div class=\"legend-card\" data-marker-index=\"1\">\n\n                                            <img decoding=\"async\" src=\"https:\/\/casa-creativa.es\/wp-content\/uploads\/2026\/03\/Casa-creativa-Hermigua-12-scaled-1.jpg\" alt=\"Pescante de Hermigua\">\n                    \n                    <div class=\"legend-card__text\">\n                                                    <h3>\n                                <span class=\"legend-card__number\">2<\/span>\n                                Pescante de Hermigua                            <\/h3>\n                                                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.<\/p>\n                                            <\/div>\n                <\/div>\n                            <div class=\"legend-card\" data-marker-index=\"2\">\n\n                                            <img decoding=\"async\" src=\"https:\/\/casa-creativa.es\/wp-content\/uploads\/2026\/03\/Casa-creativa-Hermigua-8-scaled-1.jpg\" alt=\"Mirador de La Punta\">\n                    \n                    <div class=\"legend-card__text\">\n                                                    <h3>\n                                <span class=\"legend-card__number\">3<\/span>\n                                Mirador de La Punta                            <\/h3>\n                                                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.<\/p>\n                                            <\/div>\n                <\/div>\n                            <div class=\"legend-card\" data-marker-index=\"3\">\n\n                                            <img decoding=\"async\" src=\"https:\/\/casa-creativa.es\/wp-content\/uploads\/2026\/03\/Casa-creativa-Hermigua-6-scaled-1.jpg\" alt=\"Mirador de San Juan\">\n                    \n                    <div class=\"legend-card__text\">\n                                                    <h3>\n                                <span class=\"legend-card__number\">4<\/span>\n                                Mirador de San Juan                            <\/h3>\n                                                                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.<\/p>\n                                            <\/div>\n                <\/div>\n                    <\/div>\n    \n<\/section>\n\n<script>\n(function () {\n    'use strict';\n\n    \/\/ \u2500\u2500 Konfiguration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    const MAP_CONFIG = {\n        accessToken  : 'pk.eyJ1Ijoia25pY2siLCJhIjoiY2s2Nms5dGFnMDhqczNucDY4Z3lqZjF4dSJ9.U1ose9Ig1c6N5PdZAi75bg',\n        style        : 'mapbox:\/\/styles\/knick\/cmolf3y5e002301qthur40s4r',\n        center       : [-17.1906650634, 28.1708449339],\n        zoomDuration : 1000,\n        zoomLevels   : {\n            default : 12,   \/\/ < 800 px\n            md      : 12,   \/\/ \u2265 800 px\n            lg      : 14,   \/\/ \u2265 1280 px\n            xl      : 14,   \/\/ \u2265 1500 px\n        },\n    };\n\n    const locations = [{\"longitude\":-17.19066506341302869032006128691136837005615234375,\"latitude\":28.1708449339152622314941254444420337677001953125,\"headline\":\"Casa Creativa\",\"description\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\",\"image\":\"https:\\\/\\\/casa-creativa.es\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Casa-creativa-La-Casa-12-scaled-1.jpg\"},{\"longitude\":-17.171609522247567980457461089827120304107666015625,\"latitude\":28.179970435033911968503161915577948093414306640625,\"headline\":\"Pescante de Hermigua\",\"description\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\",\"image\":\"https:\\\/\\\/casa-creativa.es\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Casa-creativa-Hermigua-12-scaled-1.jpg\"},{\"longitude\":-17.185042897351113566628555417992174625396728515625,\"latitude\":28.18040496977837250369702815078198909759521484375,\"headline\":\"Mirador de La Punta\",\"description\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\",\"image\":\"https:\\\/\\\/casa-creativa.es\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Casa-creativa-Hermigua-8-scaled-1.jpg\"},{\"longitude\":-17.20279312418693962172255851328372955322265625,\"latitude\":28.161707088018555822372945840470492839813232421875,\"headline\":\"Mirador de San Juan\",\"description\":\"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.\",\"image\":\"https:\\\/\\\/casa-creativa.es\\\/wp-content\\\/uploads\\\/2026\\\/03\\\/Casa-creativa-Hermigua-6-scaled-1.jpg\"}];\n\n    \/\/ \u2500\u2500 Hilfsfunktion: Debounce \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function debounce( fn, delay ) {\n        let timer;\n        return function ( ...args ) {\n            clearTimeout( timer );\n            timer = setTimeout( () => fn.apply( this, args ), delay );\n        };\n    }\n\n    \/\/ \u2500\u2500 Zoom-Level anhand Viewport ermitteln \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function getZoomLevel() {\n        const w = window.innerWidth;\n        if ( w >= 1500 ) return MAP_CONFIG.zoomLevels.xl;\n        if ( w >= 1280 ) return MAP_CONFIG.zoomLevels.lg;\n        if ( w >= 800  ) return MAP_CONFIG.zoomLevels.md;\n        return MAP_CONFIG.zoomLevels.default;\n    }\n\n    \/\/ \u2500\u2500 Marker-Element erstellen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    \/\/ 'number' wird als SVG-Text in den wei\u00dfen Kreis gesetzt (1-basiert)\n    function createMarkerElement( headline, number ) {\n        const div = document.createElement( 'div' );\n        div.className = 'marker';\n        div.innerHTML = `\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"auto\" height=\"100%\" viewBox=\"0 0 39.819 54\" aria-hidden=\"true\">\n                <path d=\"M19.909,0C8.9,0,0,8.451,0,18.9,0,33.075,19.909,54,19.909,54s19.91-20.925,19.91-35.1C39.819,8.451,30.916,0,19.909,0Z\" fill=\"#0d0e12\"\/>\n                <circle cx=\"20\" cy=\"20\" r=\"10\" fill=\"#99FFBB\"\/>\n                <text\n                    x=\"20\" y=\"24\"\n                    text-anchor=\"middle\"\n                    font-size=\"10\"\n                    font-family=\"sans-serif\"\n                    font-weight=\"bold\"\n                    fill=\"#0d0e12\"\n                >${ number }<\/text>\n            <\/svg>\n        `;\n        return div;\n    }\n\n    \/\/ \u2500\u2500 DOM bereit \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    document.addEventListener( 'DOMContentLoaded', function () {\n        const mapContainer = document.querySelector( '.block-map__map' );\n        const btnCenterMap = document.querySelector( '.button-center-map' );\n\n        if ( ! mapContainer ) {\n            console.error( '[Map Block] Container \".block-map__map\" nicht gefunden.' );\n            return;\n        }\n\n        \/\/ \u2500\u2500 Mapbox initialisieren \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        mapboxgl.accessToken = MAP_CONFIG.accessToken;\n\n        const map = new mapboxgl.Map( {\n            container           : mapContainer,\n            style               : MAP_CONFIG.style,\n            center              : MAP_CONFIG.center,\n            zoom                : getZoomLevel(),\n            maxZoom             : 18,\n            minZoom             : 10,\n            scrollZoom          : false,\n            boxZoom             : false,\n            doubleClickZoom     : false,\n            cooperativeGestures : true,\n        } );\n\n        map.addControl( new mapboxgl.NavigationControl(), 'top-right' );\n\n        \/\/ \u2500\u2500 Karte geladen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        map.on( 'load', () => {\n            map.getCanvas().setAttribute( 'tabindex', '-1' );\n            flyToMap();\n        } );\n\n        \/\/ \u2500\u2500 Marker setzen & Referenzen speichern \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        const markerInstances = [];\n\n        locations.forEach( ( { longitude, latitude, headline }, index ) => {\n            const lng    = parseFloat( longitude );\n            const lat    = parseFloat( latitude );\n            const number = index + 1; \/\/ 1-basierte Nummer\n\n            if ( isNaN( lng ) || isNaN( lat ) ) {\n                console.warn( '[Map Block] Ung\u00fcltige Koordinaten \u00fcbersprungen:', longitude, latitude );\n                markerInstances.push( null );\n                return;\n            }\n\n            const el = createMarkerElement( headline, number );\n            const marker = new mapboxgl.Marker( { element: el } )\n                .setLngLat( [ lng, lat ] )\n                .addTo( map );\n\n            el.addEventListener( 'click', () => setActiveMarker( index ) );\n\n            markerInstances.push( { marker, el } );\n        } );\n\n        \/\/ \u2500\u2500 Legende: Cards verkn\u00fcpfen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        const legendCards = document.querySelectorAll( '.legend-card' );\n\n        legendCards.forEach( ( card ) => {\n            card.addEventListener( 'click', () => {\n                const index = parseInt( card.dataset.markerIndex, 10 );\n                setActiveMarker( index );\n            } );\n        } );\n\n        \/\/ \u2500\u2500 Aktiven Zustand setzen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        let activeIndex = null;\n\n        function setActiveMarker( index ) {\n            if ( activeIndex !== null ) {\n                markerInstances[ activeIndex ]?.el.classList.remove( 'is-active' );\n                legendCards[ activeIndex ]?.classList.remove( 'is-active' );\n            }\n\n            if ( activeIndex === index ) {\n                activeIndex = null;\n                return;\n            }\n\n            activeIndex = index;\n\n            const instance = markerInstances[ index ];\n            if ( instance ) {\n                instance.el.classList.add( 'is-active' );\n                map.flyTo( {\n                    center   : instance.marker.getLngLat(),\n                    zoom     : getZoomLevel(),\n                    duration : MAP_CONFIG.zoomDuration,\n                } );\n            }\n\n            const card = legendCards[ index ];\n            if ( card ) {\n                card.classList.add( 'is-active' );\n                card.scrollIntoView( { behavior: 'smooth', block: 'nearest', inline: 'center' } );\n            }\n        }\n\n        \/\/ \u2500\u2500 Zur Kartenmitte fliegen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        function flyToMap() {\n            if ( activeIndex !== null ) {\n                markerInstances[ activeIndex ]?.el.classList.remove( 'is-active' );\n                legendCards[ activeIndex ]?.classList.remove( 'is-active' );\n                activeIndex = null;\n            }\n            map.flyTo( {\n                center   : MAP_CONFIG.center,\n                zoom     : getZoomLevel(),\n                duration : MAP_CONFIG.zoomDuration,\n            } );\n        }\n\n        \/\/ \u2500\u2500 Zentrierung per Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        if ( btnCenterMap ) {\n            btnCenterMap.addEventListener( 'click', flyToMap );\n        }\n\n        \/\/ \u2500\u2500 Resize mit Debounce \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        window.addEventListener( 'resize', debounce( flyToMap, 200 ) );\n    } );\n} )();\n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-710","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/pages\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/comments?post=710"}],"version-history":[{"count":28,"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/pages\/710\/revisions"}],"predecessor-version":[{"id":1147,"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/pages\/710\/revisions\/1147"}],"wp:attachment":[{"href":"https:\/\/casa-creativa.es\/de\/wp-json\/wp\/v2\/media?parent=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}