<link media="all" href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
<link media="all" rel="stylesheet" href="/assets/themes/default/css/mapbox.css?cb=">
<div data-module="mapBox" class="mapbox js-mapbox" data-longitude="-81.378112" data-latitude="19.322003" data-map-key="pk.eyJ1IjoiYmVubGVmdHdpY2hkYXJ0IiwiYSI6ImNrNmI3dmNnYjB5bWMzbGxqcWJvdHphcWUifQ.bQwqoScE2wXdFGsK3BpkRA" data-map-style="mapbox://styles/benleftwichdart/ck6b7xnox14vs1irwey7g5rdn" data-zoom="" data-pitch="30">
<div class="mapbox__map js-map"></div>
<div class="mapbox__marker js-map-marker" data-longitude="-81.378112" data-latitude="19.322003">
<div class="js-icon"><svg width='45' height='64' viewBox='0 0 45 64' fill='none' xmlns='http://www.w3.org/2000/svg'>
<g clip-path='url(#clip0)'>
<path d='M22.4 64C26.2108 64 29.3 63.1046 29.3 62C29.3 60.8954 26.2108 60 22.4 60C18.5892 60 15.5 60.8954 15.5 62C15.5 63.1046 18.5892 64 22.4 64Z' fill='#DBDBDB' />
<path d='M40.6 35.4C43.5 31.3 45.1 26.2 44.7 20.7C43.9 9.69999 34.8 0.699993 23.8 -7.22334e-06C10.8 -0.800007 0 9.59999 0 22.4C0 27.2 1.5 31.7 4.2 35.4L21 61.7C21.7 62.8 23.2 62.8 23.9 61.7L40.6 35.4Z' fill='#00ACD8' />
<path d='M22.4001 38.1C31.4023 38.1 38.7001 30.8022 38.7001 21.8C38.7001 12.7978 31.4023 5.5 22.4001 5.5C13.3979 5.5 6.1001 12.7978 6.1001 21.8C6.1001 30.8022 13.3979 38.1 22.4001 38.1Z' fill='#F8F8F8' />
<path d='M25.8 23.3L31.8 16.6C31.9 16.5 31.9 16.3 31.8 16.1C31.7 16 31.5 16 31.3 16.1L25.3 22.8C24.6 23.6 23.6 24.1 22.6 24.1C21.6 24.1 20.6 23.7 19.9 22.9L13.5 15.9C13.4 15.8 13.2 15.8 13 15.9C12.9 16 12.9 16.2 13 16.4L19.4 23.4C20.2 24.3 21.3 24.8 22.5 24.8V32.2H19.1C18.9 32.2 18.8 32.3 18.8 32.5C18.8 32.7 18.9 32.8 19.1 32.8H26.5C26.7 32.8 26.8 32.7 26.8 32.5C26.8 32.3 26.7 32.2 26.5 32.2H23.1V24.8C24.1 24.7 25.1 24.2 25.8 23.3Z' fill='#676767' stroke='#676767' stroke-width='0.1869' />
<path d='M16.0001 15.1L17.9001 12.8L19.5001 17H16.4001C16.2001 17 16.1001 17.1 16.1001 17.3C16.1001 17.5 16.2001 17.6 16.4001 17.6H19.7001L21.4001 21.9C21.5001 22 21.6001 22.1 21.7001 22.1H21.8001C22.0001 22 22.0001 21.9 22.0001 21.7L20.4001 17.6H28.6001C28.8001 17.6 28.9001 17.5 28.9001 17.3C28.9001 17.1 28.8001 17 28.6001 17H20.1001L18.4001 12C18.4001 11.9 18.3001 11.8 18.2001 11.8C18.1001 11.8 18.0001 11.8 17.9001 11.9L15.6001 14.6C15.5001 14.7 15.5001 14.9 15.6001 15.1C15.7001 15.2 15.9001 15.2 16.0001 15.1Z' fill='#676767' stroke='#676767' stroke-width='0.1869' />
</g>
<defs>
<clipPath id='clip0'>
<rect width='44.8' height='64' fill='white' />
</clipPath>
</defs>
</svg></div>
<div class="js-content">
<h2 class="mapbox__marker-title">Camana Bay</h2>
<div class="mapbox__marker-description">
<p>Here is the description for the <strong>pin</strong></p>
</div>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/mapbox.css?cb={{cacheBuster}}">
{{/if}}
<div {{#unless doNotInitialise}}data-module="mapBox"{{/unless}} class="mapbox js-mapbox" data-longitude="{{#if longitude}}{{longitude}}{{else}}{{#if locations.[0].longitude}}{{locations.[0].longitude}}{{else}}-81.378112{{/if}}{{/if}}" data-latitude="{{#if latitude}}{{latitude}}{{else}}{{#if locations.[0].latitude}}{{locations.[0].latitude}}{{else}}19.322003{{/if}}{{/if}}" data-map-key="{{key}}" data-map-style="{{style}}" data-zoom="{{zoomLevel}}" data-pitch="{{#if pitch}}{{pitch}}{{else}}0{{/if}}">
<div class="mapbox__map js-map"></div>
{{#each locations}}
<div class="mapbox__marker js-map-marker" data-longitude="{{longitude}}" data-latitude="{{latitude}}">
{{#if icon}}<div class="js-icon">{{{icon}}}</div>{{/if}}
{{#if hasContent}}
<div class="js-content">
<h2 class="mapbox__marker-title">{{title}}</h2>
<div class="mapbox__marker-description">{{{description}}}</div>
</div>
{{/if}}
</div>
{{/each}}
</div>
{
"theme": "default",
"firstInstance": true,
"key": "pk.eyJ1IjoiYmVubGVmdHdpY2hkYXJ0IiwiYSI6ImNrNmI3dmNnYjB5bWMzbGxqcWJvdHphcWUifQ.bQwqoScE2wXdFGsK3BpkRA",
"longitude": "-81.378112",
"latitude": "19.322003",
"style": "mapbox://styles/benleftwichdart/ck6b7xnox14vs1irwey7g5rdn",
"pitch": 30,
"locations": [
{
"title": "Camana Bay",
"description": "<p>Here is the description for the <strong>pin</strong></p>",
"hasContent": true,
"longitude": "-81.378112",
"latitude": "19.322003",
"icon": "<svg width='45' height='64' viewBox='0 0 45 64' fill='none' xmlns='http://www.w3.org/2000/svg'><g clip-path='url(#clip0)'><path d='M22.4 64C26.2108 64 29.3 63.1046 29.3 62C29.3 60.8954 26.2108 60 22.4 60C18.5892 60 15.5 60.8954 15.5 62C15.5 63.1046 18.5892 64 22.4 64Z' fill='#DBDBDB'/><path d='M40.6 35.4C43.5 31.3 45.1 26.2 44.7 20.7C43.9 9.69999 34.8 0.699993 23.8 -7.22334e-06C10.8 -0.800007 0 9.59999 0 22.4C0 27.2 1.5 31.7 4.2 35.4L21 61.7C21.7 62.8 23.2 62.8 23.9 61.7L40.6 35.4Z' fill='#00ACD8'/><path d='M22.4001 38.1C31.4023 38.1 38.7001 30.8022 38.7001 21.8C38.7001 12.7978 31.4023 5.5 22.4001 5.5C13.3979 5.5 6.1001 12.7978 6.1001 21.8C6.1001 30.8022 13.3979 38.1 22.4001 38.1Z' fill='#F8F8F8'/><path d='M25.8 23.3L31.8 16.6C31.9 16.5 31.9 16.3 31.8 16.1C31.7 16 31.5 16 31.3 16.1L25.3 22.8C24.6 23.6 23.6 24.1 22.6 24.1C21.6 24.1 20.6 23.7 19.9 22.9L13.5 15.9C13.4 15.8 13.2 15.8 13 15.9C12.9 16 12.9 16.2 13 16.4L19.4 23.4C20.2 24.3 21.3 24.8 22.5 24.8V32.2H19.1C18.9 32.2 18.8 32.3 18.8 32.5C18.8 32.7 18.9 32.8 19.1 32.8H26.5C26.7 32.8 26.8 32.7 26.8 32.5C26.8 32.3 26.7 32.2 26.5 32.2H23.1V24.8C24.1 24.7 25.1 24.2 25.8 23.3Z' fill='#676767' stroke='#676767' stroke-width='0.1869'/><path d='M16.0001 15.1L17.9001 12.8L19.5001 17H16.4001C16.2001 17 16.1001 17.1 16.1001 17.3C16.1001 17.5 16.2001 17.6 16.4001 17.6H19.7001L21.4001 21.9C21.5001 22 21.6001 22.1 21.7001 22.1H21.8001C22.0001 22 22.0001 21.9 22.0001 21.7L20.4001 17.6H28.6001C28.8001 17.6 28.9001 17.5 28.9001 17.3C28.9001 17.1 28.8001 17 28.6001 17H20.1001L18.4001 12C18.4001 11.9 18.3001 11.8 18.2001 11.8C18.1001 11.8 18.0001 11.8 17.9001 11.9L15.6001 14.6C15.5001 14.7 15.5001 14.9 15.6001 15.1C15.7001 15.2 15.9001 15.2 16.0001 15.1Z' fill='#676767' stroke='#676767' stroke-width='0.1869'/></g><defs><clipPath id='clip0'><rect width='44.8' height='64' fill='white'/></clipPath></defs></svg>"
}
]
}
import mapboxgl from 'mapbox-gl';
export class MapBox {
constructor(module) {
this.module = module;
this.map = this.module.querySelector('.js-map');
this.markers = [...this.module.querySelectorAll('.js-map-marker')];
this.bounds = new mapboxgl.LngLatBounds();
this.initMap();
}
initMap() {
const {
mapKey,
mapStyle,
longitude,
latitude,
pitch,
zoom,
} = this.module.dataset;
mapboxgl.accessToken = mapKey;
this.map = new mapboxgl.Map({
container: this.map,
style: `${mapStyle}?optimize=true`,
center: [longitude, latitude],
zoom: zoom || 16,
pitch,
bearing: 0,
});
this.map.scrollZoom.disable();
this.map.addControl(new mapboxgl.NavigationControl());
this.addMarkers();
}
addMarkers() {
this.markers.forEach((markerElement) => {
const {
longitude,
latitude,
} = markerElement.dataset;
const latlng = [longitude, latitude];
const mapElement = document.createElement('div');
mapElement.className = 'mapbox__map-marker';
const icon = markerElement.querySelector('.js-icon');
if (icon) {
mapElement.style.backgroundImage = `url("data:image/svg+xml;utf8,${encodeURIComponent(icon.innerHTML)}")`;
}
const marker = new mapboxgl.Marker(mapElement)
.setLngLat(latlng)
.addTo(this.map);
const content = markerElement.querySelector('.js-content');
if (content) {
marker.setPopup(new mapboxgl.Popup()
.setHTML(content.innerHTML));
}
this.markers.push(marker);
this.bounds.extend(latlng);
});
}
clearMarkers() {
this.markers.forEach((marker) => {
marker.remove();
});
this.markers = [];
}
addMarker(longitude, latitude) {
const latlng = [longitude, latitude];
const mapElement = document.createElement('div');
mapElement.className = 'mapbox__map-marker';
const marker = new mapboxgl.Marker(mapElement)
.setLngLat(latlng)
.addTo(this.map);
this.markers.push(marker);
this.bounds.extend(latlng);
}
fitBounds() {
this.map.fitBounds(this.bounds);
}
moveToLocation(longitude, latitude) {
this.map.flyTo({
center: [longitude, latitude],
});
}
resize() {
this.map.resize();
}
}
export default (module) => new MapBox(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.mapbox {
aspect-ratio: 16 / 9;
position: relative;
&__map {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
&__marker {
display: none;
}
&__map-marker {
background-image: url('../images/mapbox-marker.svg');
background-size: cover;
cursor: pointer;
height: rem(64);
width: rem(64);
}
.mapboxgl-popup {
margin-top: rem(-35);
max-width: rem(200);
}
.mapboxgl-popup-content {
padding: rem(40) rem(20) rem(20);
}
&__marker-title {
@extend %heading03;
}
&__marker-description {
@extend %p--body;
}
}
No notes defined.