<div class="my-board-map js-my-board-map" data-map-key="{{mapKey}}" {{#if mapSettings}} data-maxzoom="{{mapSettings.maxZoom}}" data-minzoom="{{mapSettings.minZoom}}" data-scrollzoom="{{mapSettings.scrollZoom}}" data-interactive="{{mapSettings.interactive}}" data-zoom="{{mapSettings.zoom}}" data-pitch="{{mapSettings.pitch}}" data-bearing="{{mapSettings.bearing}}" data-centerlat="{{mapSettings.center.lat}}" data-centerlong="{{mapSettings.center.long}}" {{/if}} >
    <div class="my-board-map__inner">
        <div class="my-board-map__map-view">
            <template class="js-card-template">
                {{> @cp-card-horizontal-generic dynamicImage=true webAppMode=true}}
            </template>
            <div class="my-board-map__map-card-container">
                <div class="my-board-map__map-card-container-wrapper js-map-card-container">
                    {{!-- Cards Append here --}}
                </div>
                <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>
            <div class="my-board-map__map-container">
                <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
                <div class="my-board-map__map js-board-map"></div>
                <p class="my-board-map__map-sub-text">{{mapSubText}}</p>
            </div>
        </div>
    </div>
</div>