
<svg id="explore" {% if interactive %}class="explore-interactive"{% endif %} xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3310 2317" style="enable-background:new 0 0 3310 2317;" xml:space="preserve">
    <defs>
        <filter id="filter1" x="0" y="0" width="100%" height="100%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="20" result="blur-out"/>
                <feOffset dx="0" dy="0" result="offset"/>
                <feComponentTransfer>
                    <feFuncA type="gamma" exponent="0.5" amplitude="100"/>
                    <feFuncR type="linear" slope="0" intercept="0.25"></feFuncR>
                    <feFuncG type="linear" slope="0" intercept="0.66"></feFuncG>
                    <feFuncB type="linear" slope="0" intercept="0.99"></feFuncB>
                </feComponentTransfer>
                {# <feFlood flood-color="rgba(25,66,99,0.5)"/> #}
                <feComposite in2="offset" operator="in"/>
                <feMerge>
                    <feMergeNode/>
                    <feMergeNode in="SourceGraphic"/>
                </feMerge>
        </filter>

        <pattern id="explore-map-background-p" patternUnits="userSpaceOnUse" width="3341" height="2317">
            <image xlink:href="<?php bloginfo('template_directory'); ?>/assets/img/explore-map-greyscaled.jpg" x="0" y="0" width="3341" height="2317" />
        </pattern>

        <pattern id="explore-map-foreground-p" patternUnits="userSpaceOnUse" width="3341" height="2317">
            <image xlink:href="<?php bloginfo('template_directory'); ?>/assets/img/explore-map.jpg" x="0" y="0" width="3341" height="2317" />
        </pattern>

    </defs>

    <path id="explore-map-background" d="M0,0H3341V2317H0Z"/>

    {% for area in areas %}
        <g id="{{ area.slug }}" class="explore-map-area {% if not interactive %}explore-map-area-selected{% endif %}" data-map-area-id="{{ area.slug }}" data-map-area-target="{{ area.link }}" >
            {{ area.get_field('svg_path') }}
        </g>
    {% endfor %}

    {% if interactive %}
        <path id="explore-map-foreground" d="M0,0H3341V2317H0Z"/>
    {% endif %}

</svg>
