@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-map {
&__map-container {
min-height: 33vh;
@include bp($lg) {
min-height: rem-calc(539);
}
}
.marker {
background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup-content {
padding: 1rem;
border-radius: 30px;
background-color: var(--white);
color: var(--primary);
min-width: rem-calc(300);
@include bp($lg) {
padding: 1.5rem;
border-radius: 40px;
}
}
.location-name,
.location-address {
font-family: 'Source Sans 3', sans-serif;
font-size: 22px;
line-height: 1.2;
color: var(--primary);
}
.location-name {
font-weight: 600;
color: var(--primary);
font-size: rem-calc(24);
}
.mapboxgl-popup-close-button {
right: 1rem;
top: 1rem;
}
.mapboxgl-popup-tip {
display: none;
}
.btn {
margin-top: 1rem;
}
.btn:hover,
.btn:focus {
color: var(--secondary);
background-color: transparent;
}
.mapboxgl-ctrl-logo {
display: none;
}
}
class BasicMap {
block;
map;
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor(block) {
this.block = block;
this.init();
}
init( ){
// check if mapboxgl is available
// if (typeof mapboxgl === 'undefined') {
// console.error('mapboxgl is not available');
// return;
// }
// console.log('block',this.block);
const mapContainer = this.block.querySelector( '.block-map__map-container' );
this.mapLocations = this.block.querySelectorAll( '.location' );
// console.log('mapLocations',this.mapLocations);
// console.log('mapContainer',mapContainer);
if(this.mapLocations.length < 1 || !mapContainer) {
console.error('mapLocations or mapContainer is not available');
return;
}
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RyYXRlZ2lxIiwiYSI6ImNsejhraGljMzAyM3QybnF5dHRncm9jdDkifQ.Ea1qVA5u5qnLYAdfRz9b2Q';
// Create a bounds object
const bounds = new mapboxgl.LngLatBounds();
// Extend the bounds to include each marker's location
this.mapLocations.forEach(location => {
const lat = parseFloat(location.dataset.lat);
const lng = parseFloat(location.dataset.lng);
bounds.extend([lng, lat]);
});
const center = bounds.getCenter();
// console.log('center',center);
this.map = new mapboxgl.Map({
container: mapContainer,
style: 'mapbox://styles/strategiq/cly2q4v86005a01pg0qrwgzk2',
center: center,
zoom: 8,
fitBoundsOptions: {
padding: 50
},
cooperativeGestures: true,
setLogoEnabled: false
});
this.mapLocations.forEach(location => {
const lat = location.dataset.lat;
const lng = location.dataset.lng;
const address = location.dataset.address;
const name = location.dataset.name;
const link_url = location.getAttribute('data-link-url');
const link_title = location.getAttribute('data-link-title') || 'Find out more';
const link_target = location.getAttribute('data-link-target') || '_blank';
// create the popup
let popupContent = `${name}
${address}
`;
if (link_url) {
popupContent += ``;
}
const popup = new mapboxgl.Popup({ offset: 25, focusAfterOpen: false }).setHTML(popupContent);
// create the marker
new mapboxgl.Marker({ color: 'rgba(220, 148, 25, 1)', rotation: 45 })
.setLngLat([lng, lat])
.setPopup(popup) // sets a popup on this marker
.addTo(this.map);
});
// fit bounds
// if there is more than one location, fit bounds to all locations
if(this.mapLocations.length > 1) {
this.map.fitBounds(bounds, {
padding: 50,
});
}
}
}
document.addEventListener('DOMContentLoaded', (e) => {
document.querySelectorAll('.block-map').forEach(block => {
// console.log(block);
new BasicMap(block);
})
})
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/map",
"title": "Map",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-map.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": ["file:../../assets/css/map/block-map.css", "mapbox-styles"],
"viewScript": ["mapbox-scripts", "map"]
}