Map

Map

Example layout for the “Map” page. The map should relate to the listing using the data attribute data-map with a querySelector() compatible value. The listing should contain elements which have two data attributes for longitude and latitude values.

<header class="header">
    <div class="header__container">
        <div class="header__inner">
            <h1 class="header__logo"><a href="page-homepage">Woodlands.co.uk</a></h1>

            <div class="navigation">
                <nav class="navigation__list">
                    <div class="form form--search form--search--simple">
                        <form action="/search" method="post">
                            <div class="form__inner">
                                <div class="form__field">
                                    <label for="form__search_location" class="form__label"><span>Location</span></label>
                                    <input type="text" class="form-input" id="form__search_location" name="location" placeholder="Enter location / postcode" />
                                </div>

                                <button class="button button--red button--inline ">
                                    <span>Search</span>
                                </button>

                            </div>
                        </form>
                    </div>

                    <ul>
                        <li class="navigation__item navigation__item--has-sub ">
                            <a href="page-buy">Buy</a>

                            <ul>
                                <li class="navigation__item navigation__item--has-sub ">
                                    <a href="page-buy">Woodlands for sale</a>

                                    <ul>
                                        <li class="navigation__item  ">
                                            <a href="#">Search for woods</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">South East England</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Northern England</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Cumbria</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Central England</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">East Anglia</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Devon</a>

                                        </li>

                                    </ul>
                                </li>

                                <li class="navigation__item navigation__item--has-sub ">
                                    <a href="page-buy">Buying a wood</a>

                                    <ul>
                                        <li class="navigation__item  ">
                                            <a href="#">Why buy a wood?</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">How to buy a woodland</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">How we support owners</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Legal guide</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Finance guide</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Our covenant</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Recommended solicitors</a>

                                        </li>

                                    </ul>
                                </li>

                                <li class="navigation__item navigation__item--has-sub ">
                                    <button>Other land for sale</button>

                                    <ul>
                                        <li class="navigation__item  ">
                                            <a href="#">Tree planting land</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Lakes and rivers</a>

                                        </li>

                                    </ul>
                                </li>

                                <li class="navigation__item navigation__item--has-sub ">
                                    <a href="page-sell">Sell your wood</a>

                                    <ul>
                                        <li class="navigation__item  ">
                                            <a href="#">Sell your wood to us</a>

                                        </li>

                                        <li class="navigation__item  ">
                                            <a href="#">Selling your wood through us</a>

                                        </li>

                                    </ul>
                                </li>

                            </ul>
                        </li>

                        <li class="navigation__item navigation__item--has-sub ">
                            <a href="page-owning">Owning a wood</a>

                            <ul>
                                <li class="navigation__item  ">
                                    <a href="#">Planning legislation</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Trees &amp; regulations</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Access &amp; tracks</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Management insurance</a>

                                </li>

                            </ul>
                        </li>

                        <li class="navigation__item navigation__item--has-sub ">
                            <a href="page-videos-guides">Videos &amp; guides</a>

                            <ul>
                                <li class="navigation__item  ">
                                    <a href="#">Woodlands TV</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Woodland activities</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Practical guides</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">What do people do?</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Looking after your wood</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Tree identification</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Wildlife identification</a>

                                </li>

                            </ul>
                        </li>

                        <li class="navigation__item navigation__item--has-sub ">
                            <a href="page-about">About us</a>

                            <ul>
                                <li class="navigation__item  ">
                                    <a href="#">Our team</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Press room</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Our research</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Contact us</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Meet us at woodfairs</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Community woodlands</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Woodland awards</a>

                                </li>

                            </ul>
                        </li>

                        <li class="navigation__item navigation__item--search"><a href="page-search" class="js--navigation-search">Search Woods</a></li>
                    </ul>
                </nav>

                <button class="hamburger hamburger--squeeze navigation__button js--navigation" type="button">
                    <span class="hamburger-box">
                        <span class="hamburger-inner"></span>
                    </span>
                </button>
            </div>

        </div>
    </div>

    <div class="form form--search form--search--alt" data-search="Show Search Filters">
        <form action="/search" method="post">
            <div class="form__inner">
                <h4 class="form--search__title">Search for woodlands</h4>

                <div class="form__field">
                    <label for="form__search_location" class="form__label"><span>Location</span></label>
                    <input type="text" class="form-input" id="form__search_location" name="location" placeholder="Enter location / postcode" />
                </div>

                <div class="form__field">
                    <label for="form__search_type" class="form__label"><span>Type</span></label>
                    <select class="form-select" id="form__search_type" name="type">
                        <option value="woodland">Woodland</option>
                        <option value="mixed deciduous">Mixed Deciduous</option>
                        <option value="coniferous">Coniferous</option>
                        <option value="coppice">Coppice</option>
                        <option value="ancient woodland">Ancient Woodland</option>
                    </select>
                </div>

                <div class="form__field form__field--switch form__field--switch--reverse">
                    <input type="checkbox" class="form-checkbox" id="form__search_sold" name="sold" />
                    <label for="form__search_sold" class="form__label"><i></i><span>Show Sold</span></label>
                </div>

                <button class="button button--red button--inline ">
                    <span>Search</span>
                </button>

            </div>
        </form>

        <button class="button button--green--dark button--full button--toggle ">
            <span>Show search filters</span>
        </button>

    </div>

</header>

<main>
    <section class="section section--map ">
        <div class="section__inner">
            <section id="" class="grid grid--2/3--reverse">
                <div class="grid__inner">
                    <div class="grid__item map--map">
                        <div class="map" data-map="#listing--map"></div>

                    </div>
                    <div class="grid__item map--listing">
                        <button class="button button--inline button--inline--small button--green--dark button--left top">
                            <span>← Exit map view</span>
                        </button>

                        <h2 class="section__title section__title--medium normal-case">Woodlands for sale in this location:</h2>

                        <section id="listing--map" class="grid grid--single">
                            <div class="grid__inner">
                                <div class="card card--woodland card--woodland--map " data-longitude="0.194919" data-latitude="51.0609">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ipsum Quis Consequatur Excepturi. <span class="card__price">£53,813</span></h3>
                                        <p class="card__meta">NR. Trevion Mews, West Okeyfort, Cambridgeshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.16252" data-latitude="51.2325">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Et Ut Officiis Modi Occaecati Ullam Vel. <span class="card__price">£57,918</span></h3>
                                        <p class="card__meta">NR. Runte Summit, New Eunice, Borders</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.95869" data-latitude="51.2736">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Consequuntur Repellendus Ut Minus Et Nobis Amet Eaque Quia Culpa. <span class="card__price">£177</span></h3>
                                        <p class="card__meta">NR. Raynor Field, North Lulu, Borders</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.01703" data-latitude="51.2164">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Culpa Officiis Et Ea Et Sed Vero. <span class="card__price">£98,185</span></h3>
                                        <p class="card__meta">NR. Ara Vista, Rossiemouth, Avon</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.0148" data-latitude="51.2148">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Consectetur Culpa Laborum Possimus Rerum. <span class="card__price">£18,522</span></h3>
                                        <p class="card__meta">NR. Parker Knolls, Harrisport, Bedfordshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-0.586424" data-latitude="50.8522">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Modi Voluptas Optio Aut Quia Et Veritatis Ut Omnis. <span class="card__price">£78,436</span></h3>
                                        <p class="card__meta">NR. Nelson Views, Port Amber, Bedfordshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.195558" data-latitude="51.0618">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Nam Perspiciatis Vel Pariatur Molestiae Est Error. <span class="card__price">£57,727</span></h3>
                                        <p class="card__meta">NR. Royce Cove, South Haskell, Borders</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.286227" data-latitude="51.1695">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ad Beatae Sit Illum. <span class="card__price">£3,136</span></h3>
                                        <p class="card__meta">NR. Astrid Trail, South Margotborough, Berkshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.959027" data-latitude="51.2757">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Molestiae Soluta Eaque Consequatur Unde Dolore. <span class="card__price">£40,218</span></h3>
                                        <p class="card__meta">NR. Gilda Falls, Lake Olen, Cambridgeshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.28886" data-latitude="51.1706">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Non Vel Ut Quia. <span class="card__price">£56,017</span></h3>
                                        <p class="card__meta">NR. Lynch Roads, Schusterfort, Borders</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.28886" data-latitude="51.1706">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Delectus Veritatis Aut Ad Aut A Qui Dolore Beatae. <span class="card__price">£53,804</span></h3>
                                        <p class="card__meta">NR. Enrique Hollow, Borerbury, Avon</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.16438" data-latitude="51.2363">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ut Incidunt Eos Et Qui Consequatur Qui Eos Repudiandae. <span class="card__price">£89,471</span></h3>
                                        <p class="card__meta">NR. Everett Court, Loyview, Buckinghamshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.404422" data-latitude="51.1205">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Cupiditate Velit Porro Quae Eius Similique. <span class="card__price">£38,588</span></h3>
                                        <p class="card__meta">NR. Vandervort Parks, Botsfordborough, Cambridgeshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.01953" data-latitude="51.2179">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Quibusdam Veritatis Sequi. <span class="card__price">£56,291</span></h3>
                                        <p class="card__meta">NR. Zboncak Fall, Gersonfort, Cambridgeshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.348011" data-latitude="51.1576">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Itaque At Enim Adipisci Temporibus. <span class="card__price">£33,040</span></h3>
                                        <p class="card__meta">NR. Ardella Station, Fayland, Berkshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.604271" data-latitude="51.2296">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ratione Aut Laboriosam. <span class="card__price">£76,423</span></h3>
                                        <p class="card__meta">NR. Goldner Branch, South Breannaport, Borders</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.01736" data-latitude="51.2169">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Non Occaecati Nihil Dolorum Libero Minima Nesciunt. <span class="card__price">£28,413</span></h3>
                                        <p class="card__meta">NR. Rachael Flat, Jensenview, Buckinghamshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.348011" data-latitude="51.1576">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Beatae Laudantium Dolorem. <span class="card__price">£47,105</span></h3>
                                        <p class="card__meta">NR. Stamm Wall, East Michel, Borders</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.28886" data-latitude="51.1706">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Nostrum Placeat Sint Molestiae Quis Sit Reprehenderit Sit Nam. <span class="card__price">£1,309</span></h3>
                                        <p class="card__meta">NR. Mitchell Via, Dalefort, Bedfordshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.286227" data-latitude="51.1695">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Aut Officia Alias Nihil Architecto. <span class="card__price">£51,871</span></h3>
                                        <p class="card__meta">NR. Armand Skyway, Clarissastad, Bedfordshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-1.01361" data-latitude="51.1073">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Voluptas Natus Et. <span class="card__price">£29,729</span></h3>
                                        <p class="card__meta">NR. Walsh Bridge, Simeonport, Berkshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.346766" data-latitude="51.1564">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ut Excepturi Iusto Eum Voluptatem Aut Quas Consequatur Magnam Maiores. <span class="card__price">£86,080</span></h3>
                                        <p class="card__meta">NR. Sonia Spring, Riceshire, Berkshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.195558" data-latitude="51.0618">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Modi Aut Iste Rerum Minus Nobis Quaerat Est Quia. <span class="card__price">£73,974</span></h3>
                                        <p class="card__meta">NR. Heaven Springs, Jaylanborough, Borders</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.16438" data-latitude="51.2363">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ipsam Sapiente Totam Voluptas. <span class="card__price">£79,904</span></h3>
                                        <p class="card__meta">NR. Betty Glen, Port Leo, Berkshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-0.583575" data-latitude="50.853">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Suscipit Ipsa Et Quo Consectetur Quae. <span class="card__price">£81,354</span></h3>
                                        <p class="card__meta">NR. Bessie Common, Mayerstad, Borders</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.601613" data-latitude="51.2322">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Praesentium A Eaque Ullam Blanditiis Illum. <span class="card__price">£16,554</span></h3>
                                        <p class="card__meta">NR. Zion Village, Stammton, Cambridgeshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.406269" data-latitude="51.1211">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Voluptate Et Voluptatum. <span class="card__price">£96,066</span></h3>
                                        <p class="card__meta">NR. Michel Shores, Darrylfort, Avon</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.604271" data-latitude="51.2296">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Officiis Non Ab Et Qui Aliquam. <span class="card__price">£10,590</span></h3>
                                        <p class="card__meta">NR. Klocko Loaf, Douglasbury, Bedfordshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-0.583575" data-latitude="50.853">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Quam Sequi Quia Aut Eum Consequatur Sequi Nobis Rem. <span class="card__price">£98,279</span></h3>
                                        <p class="card__meta">NR. Kamron Meadow, North Tony, Buckinghamshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.348011" data-latitude="51.1576">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Dolorem Dolores Natus Odit Id Nobis Nobis Ut Maiores Repellat. <span class="card__price">£95,969</span></h3>
                                        <p class="card__meta">NR. Elmo Port, Autumntown, Berkshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.403002" data-latitude="51.1196">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Non Voluptas Molestias Necessitatibus Quia. <span class="card__price">£70,304</span></h3>
                                        <p class="card__meta">NR. Quentin Glens, North Alessandrobury, Bedfordshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.286625" data-latitude="51.1684">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ut Dolorem Sed Ipsum Quo Delectus Nisi Sed. <span class="card__price">£43,580</span></h3>
                                        <p class="card__meta">NR. Imelda Squares, Port Pearlie, Berkshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.16438" data-latitude="51.2363">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Quis Facilis Illo Sit. <span class="card__price">£69,262</span></h3>
                                        <p class="card__meta">NR. Swaniawski Union, O&#x27;Connellville, Bedfordshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.190418" data-latitude="51.0599">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Sunt Quibusdam Sapiente Earum Laborum. <span class="card__price">£58,700</span></h3>
                                        <p class="card__meta">NR. Metz Bridge, Wizaland, Borders</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.194919" data-latitude="51.0609">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Suscipit Maiores Voluptatem In Qui Sed Non. <span class="card__price">£58,343</span></h3>
                                        <p class="card__meta">NR. Charlotte Courts, East Jennieberg, Bedfordshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-0.586818" data-latitude="50.8505">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Provident Blanditiis Vitae Non Eius Maiores Iusto. <span class="card__price">£4,287</span></h3>
                                        <p class="card__meta">NR. Harris Island, South Jakayla, Cambridgeshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-1.01441" data-latitude="51.1065">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Rerum Suscipit Qui Unde Incidunt Maxime. <span class="card__price">£62,858</span></h3>
                                        <p class="card__meta">NR. Gaylord Path, Port Lucienne, Buckinghamshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.608671" data-latitude="51.2342">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Cum Sit Voluptas Velit Iure Saepe Consequatur Tempore Ab. <span class="card__price">£46,646</span></h3>
                                        <p class="card__meta">NR. Harvey Gardens, Hermannport, Cambridgeshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.01088" data-latitude="51.2234">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Distinctio Fugit Velit Ipsam Praesentium Aliquam Consequatur Est Dignissimos Rem. <span class="card__price">£11,635</span></h3>
                                        <p class="card__meta">NR. Osinski Stream, North Cullenfort, Avon</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="-1.01212" data-latitude="51.1072">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Laborum Facilis Ratione Autem Alias Est. <span class="card__price">£34,183</span></h3>
                                        <p class="card__meta">NR. Grady Tunnel, Port Traceybury, Avon</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.1662" data-latitude="51.2371">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Accusantium Quo Cumque. <span class="card__price">£43,901</span></h3>
                                        <p class="card__meta">NR. Josh Trafficway, Hauckfurt, Avon</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.610572" data-latitude="51.2336">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Ut Enim Est Quis Dignissimos Id Deserunt. <span class="card__price">£74,456</span></h3>
                                        <p class="card__meta">NR. Sylvan Pine, Franeckiside, Buckinghamshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.551742" data-latitude="51.1283">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Aut Assumenda Ad. <span class="card__price">£91,520</span></h3>
                                        <p class="card__meta">NR. Hilpert Springs, New Joanieville, Berkshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.403002" data-latitude="51.1196">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Tenetur Corporis Nobis Occaecati Quos At Voluptas. <span class="card__price">£94,914</span></h3>
                                        <p class="card__meta">NR. Alta Village, Tyrellstad, Buckinghamshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.28978" data-latitude="51.1699">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Distinctio Repellendus Voluptates Esse. <span class="card__price">£8,988</span></h3>
                                        <p class="card__meta">NR. Ila Ville, Torphyburgh, Buckinghamshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="1.01088" data-latitude="51.2234">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Necessitatibus Eaque Quasi Ratione. <span class="card__price">£90,242</span></h3>
                                        <p class="card__meta">NR. Deckow Lights, Lake Maybell, Buckinghamshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.22118" data-latitude="51.114">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Est Accusantium Quia Consequatur Esse Nobis Eum Autem Deserunt. <span class="card__price">£71,050</span></h3>
                                        <p class="card__meta">NR. Demarcus Courts, West Stephaniehaven, Berkshire</p>
                                        <p class="card__extra">About 3 ¼ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.403002" data-latitude="51.1196">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Est Rerum Deleniti Voluptatem Sed. <span class="card__price">£67,014</span></h3>
                                        <p class="card__meta">NR. Schmeler Centers, Port Krista, Cambridgeshire</p>
                                        <p class="card__extra">Almost 4 acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.195558" data-latitude="51.0618">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Quae Et Est Molestiae Veniam Deserunt Ipsam Voluptas Nisi Exercitationem. <span class="card__price">£90,070</span></h3>
                                        <p class="card__meta">NR. Jeff Lock, Port Lionel, Buckinghamshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                                <div class="card card--woodland card--woodland--map " data-longitude="0.213422" data-latitude="51.1155">
                                    <div class="media">
                                        <div class="media__content">
                                            <img src="http://picsum.photos/400/225" alt="" title="" />
                                        </div>
                                    </div>

                                    <div class="card__body">
                                        <h3 class="card__title">Doloribus Provident Cupiditate Quia. <span class="card__price">£54,709</span></h3>
                                        <p class="card__meta">NR. Dana Corners, South Alannaburgh, Bedfordshire</p>
                                        <p class="card__extra">About 5 ½ acres</p>
                                        <a href="page-woodland" class="card__more">See more details</a>
                                    </div>
                                </div>

                            </div>
                        </section>

                        <button class="button button--inline button--inline--small button--green--dark button--left bottom">
                            <span>← Exit map view</span>
                        </button>

                    </div>
                </div>
            </section>

        </div>
    </section>
</main>
{{ render '@layout-header' header merge=true }}

<main>
    {{#> @section modifiers="map" }}
        {{#> @grid modifiers="2/3--reverse" }}
            <div class="grid__item map--map">
                {{ render '@map' this merge=true }}
            </div>
            <div class="grid__item map--listing">
                {{ render '@button' back.top merge=true }}

                <h2 class="section__title section__title--medium normal-case">{{ title }}</h2>

                {{ render '@components--cards' woodlands merge=true }}

                {{ render '@button' back.bottom merge=true }}
            </div>
        {{/ @grid }}

    {{/ @section }}
</main>