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 & regulations</a>
</li>
<li class="navigation__item ">
<a href="#">Access & 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 & 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'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>