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="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">Sunt Et Optio. <span class="card__price">£48,460</span></h3>
<p class="card__meta">NR. Boyer Rest, Braunmouth, 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.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">Ut Voluptas Natus Est Nobis Aut Non Vel. <span class="card__price">£71,227</span></h3>
<p class="card__meta">NR. Lazaro Gateway, Ankundingfurt, 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.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">Doloribus Necessitatibus Tempore Repellat. <span class="card__price">£58,506</span></h3>
<p class="card__meta">NR. Feeney Knolls, North Ladariusborough, 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.637193" data-latitude="50.9428">
<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">Aliquam Fugit Nostrum Autem Expedita Neque Minus Earum Consectetur Cupiditate. <span class="card__price">£88,408</span></h3>
<p class="card__meta">NR. Mohr Ranch, East Sheridan, 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.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">Ut Eveniet Animi Laborum. <span class="card__price">£60,899</span></h3>
<p class="card__meta">NR. Carlotta Landing, Donnymouth, 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="1.0121" data-latitude="51.22">
<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">Occaecati Suscipit Et Itaque Consectetur Illo Quas Id Dolor Reiciendis. <span class="card__price">£19,912</span></h3>
<p class="card__meta">NR. Walter Via, Bodestad, 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.641832" data-latitude="51.1005">
<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 Ut Sunt Molestiae. <span class="card__price">£41,201</span></h3>
<p class="card__meta">NR. Prohaska Cliffs, Wolfmouth, 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.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">Rerum Laudantium Autem Minima Quis Accusamus Architecto Totam Non Quam. <span class="card__price">£23,312</span></h3>
<p class="card__meta">NR. Adams Viaduct, Louveniachester, 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="1.16485" data-latitude="51.234">
<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">Velit Et Et Rerum Molestiae Aliquid Incidunt. <span class="card__price">£45,779</span></h3>
<p class="card__meta">NR. Lafayette Brook, North Annamouth, Cambridgeshire</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.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">Ut Officiis Consequuntur At Praesentium Amet Voluptatum. <span class="card__price">£31,385</span></h3>
<p class="card__meta">NR. Beatty Manors, South Ansley, 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.19216" data-latitude="51.0596">
<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 Id Non Consequatur. <span class="card__price">£39,009</span></h3>
<p class="card__meta">NR. Mante Forge, Angelaview, 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.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">Enim Incidunt Distinctio Molestias. <span class="card__price">£21,043</span></h3>
<p class="card__meta">NR. Ross Underpass, South Skye, 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="1.16485" data-latitude="51.234">
<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">Explicabo Sunt Officia. <span class="card__price">£92,482</span></h3>
<p class="card__meta">NR. Carole Glen, Wendellshire, 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="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">Culpa Quam Corporis. <span class="card__price">£54,847</span></h3>
<p class="card__meta">NR. Dietrich Freeway, Caspermouth, 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.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">Dignissimos Consequatur Est Eos Aut Harum Blanditiis Dolores Sint. <span class="card__price">£51,870</span></h3>
<p class="card__meta">NR. Leta Branch, Port Liam, 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.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">Et Aut Repellat Soluta Sed Ex Rerum Aperiam Et. <span class="card__price">£27,495</span></h3>
<p class="card__meta">NR. Woodrow Heights, New Amieshire, 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.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">Consequatur Ab Repellat Et. <span class="card__price">£60,500</span></h3>
<p class="card__meta">NR. Langworth Tunnel, West Reecefort, 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.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">Tempore Enim Alias Omnis Veritatis. <span class="card__price">£85,589</span></h3>
<p class="card__meta">NR. Schamberger Avenue, Chaunceyville, 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.242816" data-latitude="51.133">
<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">Atque Sequi Excepturi Vel Perferendis. <span class="card__price">£76,382</span></h3>
<p class="card__meta">NR. Myrtle Row, South Jonathanfort, 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.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">Rerum Hic Ad Distinctio Culpa Sunt Quisquam Quia Voluptatem. <span class="card__price">£39,295</span></h3>
<p class="card__meta">NR. Jacobi Hollow, Bernardview, 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.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">Odio Est Enim. <span class="card__price">£83,219</span></h3>
<p class="card__meta">NR. Shany Drive, New Kayla, 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="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">Blanditiis Unde Rerum Fugiat. <span class="card__price">£62,628</span></h3>
<p class="card__meta">NR. Trent Creek, West Amelia, 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.641774" data-latitude="51.0992">
<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">Minima Qui Porro. <span class="card__price">£46,881</span></h3>
<p class="card__meta">NR. Isai Burg, Lake Elouise, 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="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">Nam Ut Nesciunt Voluptatem Animi Eos Maxime Dolor. <span class="card__price">£72,911</span></h3>
<p class="card__meta">NR. Eda Fork, Haagfurt, Cambridgeshire</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.639071" data-latitude="51.2495">
<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">Quas Molestias Eum Tempora Nobis Facere Pariatur Placeat Voluptatem. <span class="card__price">£82,205</span></h3>
<p class="card__meta">NR. Labadie Ramp, Zelmachester, 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="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">Deserunt Qui Quo Est Quos. <span class="card__price">£46,262</span></h3>
<p class="card__meta">NR. Corkery Spurs, Garrettport, 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.644051" data-latitude="51.0998">
<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 Libero Exercitationem Ipsa Fugit Aut Est Totam. <span class="card__price">£31,972</span></h3>
<p class="card__meta">NR. Lou Key, Lake Janiechester, 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.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">Magnam Natus Iure. <span class="card__price">£2,865</span></h3>
<p class="card__meta">NR. Imelda Well, Diegoborough, 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.16044" data-latitude="51.2331">
<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">Sed Dolorem Dignissimos Eius Omnis Saepe Enim. <span class="card__price">£16,899</span></h3>
<p class="card__meta">NR. Melyssa Crescent, Lake Haleigh, 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.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">Iure Sapiente Sit Distinctio Modi. <span class="card__price">£81,973</span></h3>
<p class="card__meta">NR. McCullough Fords, North Greta, 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.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">Et Sit Dicta Quasi Amet Doloremque Dignissimos Totam. <span class="card__price">£81,179</span></h3>
<p class="card__meta">NR. Ankunding Springs, East Cornelltown, 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.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">Iusto At Ullam Est Esse Voluptates Accusantium Quia. <span class="card__price">£28,595</span></h3>
<p class="card__meta">NR. Assunta Street, Arnulfostad, 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.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">Laudantium Expedita Qui Voluptas Nihil Nobis Eum Eaque. <span class="card__price">£88,476</span></h3>
<p class="card__meta">NR. Myrtie Mission, Ronnyshire, Cambridgeshire</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.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">Recusandae Laudantium Sit Magnam Cupiditate Placeat Corrupti Quasi Veniam. <span class="card__price">£94,163</span></h3>
<p class="card__meta">NR. Kris Park, Floyland, 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.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">Ut Maxime Quam Et. <span class="card__price">£57,918</span></h3>
<p class="card__meta">NR. Giovanna Brook, Deronland, 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.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">Vel Error Et Sequi Modi Soluta Quia. <span class="card__price">£61,934</span></h3>
<p class="card__meta">NR. MacGyver Junctions, East Hermina, 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="0.639071" data-latitude="51.2495">
<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">Qui Optio Illo Nisi Veniam Nihil. <span class="card__price">£8,790</span></h3>
<p class="card__meta">NR. Earline Stream, Lake Pauline, 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.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">Aut Voluptatem Iste Quibusdam. <span class="card__price">£50,909</span></h3>
<p class="card__meta">NR. Judah Oval, Caroleside, 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.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">Voluptatem Voluptatibus Dignissimos Quo Dolores Commodi Repellendus Possimus Cum Iste. <span class="card__price">£8,344</span></h3>
<p class="card__meta">NR. Rowe Glens, Port Camillefort, 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.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">Amet Vel Officiis Dolores Qui Labore Et Porro Facere. <span class="card__price">£91,472</span></h3>
<p class="card__meta">NR. Dickinson Mission, Port Randall, Cambridgeshire</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.641832" data-latitude="51.1005">
<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 Ex Hic Numquam Nostrum Corporis. <span class="card__price">£44,862</span></h3>
<p class="card__meta">NR. Becker Walks, New Jolieville, Cambridgeshire</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.641774" data-latitude="51.0992">
<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">Odio Ut Voluptatum Deserunt Totam. <span class="card__price">£80,932</span></h3>
<p class="card__meta">NR. Ortiz Turnpike, Emeliabury, 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.641832" data-latitude="51.1005">
<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 Et Fugit. <span class="card__price">£76,914</span></h3>
<p class="card__meta">NR. Lakin Creek, East Brando, Bedfordshire</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.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">Aut Ex Nulla Ipsum. <span class="card__price">£6,857</span></h3>
<p class="card__meta">NR. Dorthy Dale, Port Rigobertoberg, 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.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">Corporis Eum Voluptates Possimus. <span class="card__price">£13,653</span></h3>
<p class="card__meta">NR. Rubye Locks, West Willowberg, 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.639071" data-latitude="51.2495">
<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">Sed Ipsam Aperiam Qui Et Illo Delectus Dicta. <span class="card__price">£20,557</span></h3>
<p class="card__meta">NR. Kuvalis Ports, South Kolbyburgh, Cambridgeshire</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.19216" data-latitude="51.0596">
<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">Iste Commodi Enim Labore Libero Quo. <span class="card__price">£78,108</span></h3>
<p class="card__meta">NR. Etha Falls, Doloresview, Cambridgeshire</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.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">Quae Mollitia Beatae Voluptate Officia Culpa. <span class="card__price">£44,740</span></h3>
<p class="card__meta">NR. VonRueden Common, Brekkemouth, 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="0.644051" data-latitude="51.0998">
<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 Aut Aliquid Ratione Rerum Autem Veritatis. <span class="card__price">£84,624</span></h3>
<p class="card__meta">NR. Torp Street, Christiansenfurt, 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.19216" data-latitude="51.0596">
<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">Amet Qui Quos Expedita Aspernatur Officiis Est Cupiditate Cum Molestiae. <span class="card__price">£59,078</span></h3>
<p class="card__meta">NR. Zieme Pines, New Carol, Buckinghamshire</p>
<p class="card__extra">Almost 4 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>