<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="trip-ideas-map" data-module="tripIdeasMap" data-map-key="">
<div class="trip-ideas-map-navigation js-map-navigation">
<div class="trip-ideas-map-navigation__sidebar js-trip-ideas-sidebar">
</div>
<div class="trip-ideas-map-navigation__day-picker js-trip-ideas-day-picker">
<div class="grid-x grid-padding-x">
<div class="day-picker cell">
<a href="#" class="js-day-items-close-trigger day-picker__close-items"></a>
<div class="day-picker__heading">
<h4 class="day-picker__title">Day <span class="js-title-day"></span></h4>
<div class="day-picker__buttons-container">
</div>
</div>
<div class="day-picker__carousel carousel">
<div class="day-picker__track carousel__track">
<div class="day-picker__bounds carousel__bounds"></div>
<div class="day-picker__draggable carousel__draggable"></div>
</div>
<div class="day-picker__slider carousel__slider">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="trip-ideas-map__map" id="map"></div>
<div class="trip-ideas-map-days-container">
<a href="#" class="js-day-items-close-trigger trip-ideas-map-days-container__close-items"></a>
</div>
</div>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="trip-ideas-map" data-module="tripIdeasMap" data-map-key="{{key}}">
{{> @cp-trip-ideas-sidebar}}
<div class="trip-ideas-map__map" id="map"></div>
<div class="trip-ideas-map-days-container">
<a href="#" class="js-day-items-close-trigger trip-ideas-map-days-container__close-items"></a>
{{#each days}}
<div class="trip-ideas-map-day" id="day{{@index}}" data-longitude="{{location.longitude}}" data-latitude="{{location.latitude}}">
{{> @cp-medium-image responsiveImage}}
<div class="trip-ideas-map-day__eyebrow">
<span class="trip-ideas-map-day__day-name">{{dayName}}</span><span class="trip-ideas-map-day__from-location">{{fromLocation}}</span>
</div>
<div class="trip-ideas-map-day__content">
<h2 class="trip-ideas-map-day__title">{{title}}</h2>
<p class="trip-ideas-map-day__subtitle">{{subtitle}}</p>
{{#if dayItems.length}}
{{> @cp-button-primary text=ctaText url="#" modifier="with-arrow" cssClasses="js-day-items-open-trigger trip-ideas-map-day__cta"}}
{{/if}}
</div>
{{#if dayItems.length}}
<div class="trip-ideas-map-day-items">
{{#each dayItems}}
<div class="trip-ideas-map-day-item" data-longitude="{{location.longitude}}"
data-latitude="{{location.latitude}}">
<div class="trip-ideas-map-day-item__caption">
{{#if caption.location}}<span class="trip-ideas-map-day-item__location-icon"></span>
<p class="trip-ideas-map-day-item__location">{{caption.location}}</p>{{/if}}
{{#if caption.description}}<p class="trip-ideas-map-day-item__description">
{{caption.description}}
</p>{{/if}}
</div>
<h3 class="trip-ideas-map-day-item__title">{{title}}</h3>
<div class="trip-ideas-map-day-item__image">
{{> @cp-medium-image responsiveImage}}
</div>
<p class="trip-ideas-map-day-item__subtitle">{{{subtitle}}}</p>
</div>
{{/each}}
</div>
{{/if}}
</div>
{{/each}}
</div>
</div>
/* No context defined for this component. */
There are no notes for this item.