Woodlands.co.uk Component Library

Woodland Maps

Woodland Map Component

Static maps and dynamic map.

<div class="woodland-maps">
    <h4>Wood map</h4>

    <ul>
        <li><button data-modal-open="modal-map-1"><img src="/images/maps/map-1.gif" alt="map-1" title="" /></button></li>
        <li><button data-modal-open="modal-map-2"><img src="/images/maps/map-2.gif" alt="map-2" title="" /></button></li>
        <li><button data-modal-open="modal-map-3"><img src="/images/maps/map-3.gif" alt="map-3" title="" /></button></li>
    </ul>

    <h4>Location map</h4>

    <div class="woodland-maps__map">
        <div class="map" data-map="#map" data-longitude="0.346766" data-latitude="51.1564"></div>

    </div>
</div>

<div class="modal modal--small" aria-hidden="true" id="modal-map-1">
    <div class="modal__container" data-modal-close="modal-map-1">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--map-1">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--map-1">map-1</h2>
                <button type="button" data-modal-close="modal-map-1" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content">
                <img src="/images/maps/map-1.gif" alt="map-1" title="" />
            </div>

        </div>
    </div>
</div>
<div class="modal modal--small" aria-hidden="true" id="modal-map-2">
    <div class="modal__container" data-modal-close="modal-map-2">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--map-2">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--map-2">map-2</h2>
                <button type="button" data-modal-close="modal-map-2" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content">
                <img src="/images/maps/map-2.gif" alt="map-2" title="" />
            </div>

        </div>
    </div>
</div>
<div class="modal modal--small" aria-hidden="true" id="modal-map-3">
    <div class="modal__container" data-modal-close="modal-map-3">
        <div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--map-3">

            <header class="modal__header">
                <h2 class="modal__title" id="modal__title--map-3">map-3</h2>
                <button type="button" data-modal-close="modal-map-3" aria-label="Close Modal">×</button>
            </header>

            <div class="modal__content">
                <img src="/images/maps/map-3.gif" alt="map-3" title="" />
            </div>

        </div>
    </div>
</div>
 
<div class="{{modifier 'woodland-maps' modifiers}}">
    <h4>Wood map</h4>

    <ul>
        {{#each maps }}
        <li><button data-modal-open="modal-{{ name }}"><img src="{{ src }}" alt="{{ name }}" title="" /></button></li>
        {{/each}}
    </ul>

    <h4>Location map</h4>

    <div class="woodland-maps__map">
        {{ render '@map' this merge=true }}
    </div>
</div>

{{#each maps }}
{{#> @block--modal modifiers="small" title=name uuid=name }}
<div class="modal__content">
    <img src="{{ link }}" alt="{{ name }}" title="" />
</div>
{{/ @block--modal }}
{{/each}}