{"id":1229,"date":"2026-03-12T15:23:00","date_gmt":"2026-03-12T14:23:00","guid":{"rendered":"https:\/\/casa-creativa.es\/hermigua\/"},"modified":"2026-06-18T16:03:15","modified_gmt":"2026-06-18T14:03:15","slug":"hermigua","status":"publish","type":"page","link":"https:\/\/casa-creativa.es\/en\/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\">Casa Creativa is located in the \u201clower village\u201d of Hermigua, on the main road toward Agulo and Vallehermoso. Central yet quiet, relaxing yet sociable, without luxury yet excellent.<\/p>\n    \n            <p class=\"block-hermigua-intro__text\">Casa Creativa is located in the \u201clower village\u201d of Hermigua, on the main road toward Agulo and Vallehermoso. Central yet quiet, relaxing yet sociable, without luxury yet excellent.  As soon as you exit the tunnel at \u201cCumbre,\u201d you\u2019ll see the long, green valley of Hermigua on your right.\n\nThe majestic \u201cBarranco,\u201d with its banana plantations, stretches for kilometers all the way to the sea. Canarian houses line the main road.  Hermigua, nestled in the breathtaking landscape of La Gomera, invites you to discover a hidden gem within the Canary Islands that promises an enchanting and invigorating retreat. This picturesque town, located in the northeastern part of the island, delights visitors with its lush valleys, terraced fields, and the charm of its traditional Canarian architecture.<\/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            Center        <\/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-1229","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/pages\/1229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/comments?post=1229"}],"version-history":[{"count":2,"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/pages\/1229\/revisions"}],"predecessor-version":[{"id":1360,"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/pages\/1229\/revisions\/1360"}],"wp:attachment":[{"href":"https:\/\/casa-creativa.es\/en\/wp-json\/wp\/v2\/media?parent=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}