<div class="editorial-map-and-card-grid__map-view">
<div data-default-overlay-button-text="" class="editorial-map-and-card-grid__map-result-overlay js-overlay">
<div data-module="card" class="card-standard js-card-standard js-card-generic ">
<template class="js-small-image-template">
<div class="card-standard__small-image-container js-small-image-container">
<figure class="image js-image js-small-image" data-module="imagelazy" data-is-small-image="">
<template>
<figure class="image js-image js-small-image loaded" data-module="imagelazy">
<img class="image__lowres js-image-lazyload" data-object-fit />
<picture class="image__container"></picture>
</figure>
</template>
<img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
<picture class="image__container">
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
</picture>
</figure>
</div>
</template>
<a href="#" class="card-standard__anchor js-link">
<div class="card-standard__image-container js-image-container">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<template>
<figure class="image js-image loaded" data-module="imagelazy">
<img class="image__lowres js-image-lazyload" data-object-fit />
<picture class="image__container"></picture>
</figure>
</template>
<img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
<picture class="image__container">
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
</picture>
</figure>
</div>
<p class="card-standard__page-type js-page-type"></p>
<div class="card-standard__inner">
<div class="card-standard__details">
<h3 class="card-standard__title js-title"></h3>
<p class="card-standard__subtitle js-subtitle"></p>
</div>
<p class="card-standard__location js-location-name"></p>
</div>
</a>
</div>
<a href="#" class="editorial-map-and-card-grid__map-result-overlay-close js-overlay-close"></a>
</div>
<div class="editorial-map-and-card-grid__map-results-container">
<div class="overlay-card-modal-container js-overlay-map-card-modal">
<div class="overlay-card-modal-container__inner">
<button class="overlay-card-modal-container__back js-card-modal-close"></button>
<div class="overlay-card-modal-container__card-wrapper js-card-modal-inner">
</div>
<div class="overlay-card-modal-container__button-wrapper">
<a class="button-p1 button-p1--with-icon js-button-link"></a>
<button class="button-p2 button-p2--with-icon button-p2--with-icon-map js-button-map"></button>
</div>
</div>
</div>
<div class="editorial-map-and-card-grid__map-results js-map-results">
<div class="editorial-map-and-card-grid__map-api-results">
</div>
</div>
</div>
<div class="editorial-map-and-card-grid__map-container">
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="editorial-map-and-card-grid__map js-editorial-map-card-grid-map" id="map"></div>
</div>
</div>
<div class="editorial-map-and-card-grid__map-view">
<div data-default-overlay-button-text="{{ overlayButtonText }}" class="editorial-map-and-card-grid__map-result-overlay js-overlay">
{{#if webAppMode}}
{{> @cp-card-standard-generic dynamicImage=true webAppMode=true }}
{{else}}
{{> @cp-card-standard-generic dynamicImage=true }}
{{/if}}
<a href="#" class="editorial-map-and-card-grid__map-result-overlay-close js-overlay-close">{{overlayCloseText}}</a>
{{> @cp-button-secondary text=overlayButtonText url="#" cssClasses="editorial-map-and-card-grid__map-result-overlay-button js-overlay-button"}}
</div>
<div class="editorial-map-and-card-grid__map-results-container">
<div class="overlay-card-modal-container js-overlay-map-card-modal">
<div class="overlay-card-modal-container__inner">
<button class="overlay-card-modal-container__back js-card-modal-close">{{cardDetail.backButtonText}}</button>
<div class="overlay-card-modal-container__card-wrapper js-card-modal-inner">
{{!-- Card detail Appends here --}}
</div>
<div class="overlay-card-modal-container__button-wrapper">
<a class="button-p1 button-p1--with-icon js-button-link">{{cardDetail.tellMeMoreText}}</a>
<button class="button-p2 button-p2--with-icon button-p2--with-icon-map js-button-map">{{cardDetail.viewOnMapText}}</button>
</div>
</div>
</div>
<div class="editorial-map-and-card-grid__map-results js-map-results">
<div class="editorial-map-and-card-grid__map-api-results">
{{#each cards}}
{{#if location}}
<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper" {{#if location.longitude}}data-longitude="{{location.longitude}}"{{/if}} {{#if location.latitude}}data-latitude="{{location.latitude}}"{{/if}} data-card-id="{{cardId}}" data-card-index="{{@index}}" {{#if filterType}}data-category="{{filterType}}"{{/if}} {{#if isEditorialCard}}data-editorial-card="true"{{/if}}>
{{> @cp-card-horizontal }}
</div>
{{/if}}
{{#if html}}
<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper">
{{> @cp-card-horizontal }}
</div>
{{/if}}
{{#ifEquals wayPointsCount 1}}
<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper" data-longitude="{{#each wayPoints}}{{longitude}}{{/each}}" data-latitude="{{#each wayPoints}}{{latitude}}{{/each}}" data-card-id="{{cardId}}" data-card-index="{{@index}}" {{#if filterType}}data-category="{{filterType}}"{{/if}} {{#if isEditorialCard}}data-editorial-card="true"{{/if}}>
{{> @cp-card-horizontal }}
</div>
{{/ifEquals}}
{{/each}}
</div>
</div>
</div>
<div class="editorial-map-and-card-grid__map-container">
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="editorial-map-and-card-grid__map js-editorial-map-card-grid-map" id="map"></div>
{{#if mapSubText}}
<p class="editorial-map-and-card-grid__map-sub-text">{{mapSubText}}</p>
{{/if}}
</div>
</div>
/* No context defined for this component. */
There are no notes for this item.