Basic Map

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-basic-map {
	position: relative;
	& > .heading{
		font-size: rem-calc(24) !important;
		font-weight: 500;
		max-width: 856px;
		margin-left: auto;
		margin-right: auto;
		padding-left: $grid-gutter-width / 2;
		padding-right: $grid-gutter-width / 2;
		margin-bottom: 2rem;
	}
	
	.container .heading{
		margin-bottom: 2rem;
	}

	&__map-container {
		width: 100%;
		aspect-ratio: 1/1;
		max-height: 525px;
		
		@include bp($lg) {
		}
	}

	&__wrapper {
		position: relative;
	}

	&__content {
		background-color: $primary-light;
		color: $white;
		position: absolute;
		bottom: 26px;
		right: 26px;
		width: 270px;

		a{
			color: $white;
		}

		padding: {
			left: 35px;
			right: 26px;
			top: 16px;
			bottom: 24px;
		}

		&,
		p {
			line-height: 24px;
		}

		p {
			margin: 0;
		}

		&:before {
			background-color: $primary-light;
			content: "";
			height: 26px;
			left: 26px;
			position: absolute;
			right: 0;
			top: -26px;
			transition: all 0.5s;
		}
		
		.title {
			font-weight: 700;
		}
	}
}

var BasicMap = class BasicMap {
	/**
	 * Create and initialise objects of this class
	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
	 * @param {object} block
	 */
	constructor() {
		this.blocks = document.querySelectorAll('.block-basic-map');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		const lazyLoadMap = (block) => {
			const io = new IntersectionObserver((entries, observer) => {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						this.initMap(block);
					}
				})
			}, { threshold: [0.4] });

			io.observe(block);
		}

		this.blocks.forEach(lazyLoadMap);
	}

	initMap(block) {
		if (!mapboxgl) {
			console.error(mapboxgl);
			return;
		}

		const mapContainer = block.querySelector('.block-basic-map__map-container');

		// Create a new token - https://account.mapbox.com/
		mapboxgl.accessToken = 'pk.eyJ1Ijoic3RyYXRlZ2lxIiwiYSI6ImNsY2l2eW93cDA0dDIzc203Z2RkbjhqNDkifQ.J4ldDc76kIiyyaP1P8n_Rg';

		let lng = parseFloat(mapContainer.getAttribute('data-lng'));
		let lat = parseFloat(mapContainer.getAttribute('data-lat'));
		let zoom = parseFloat(mapContainer.getAttribute('data-zoom'));

		this.map = new mapboxgl.Map({
			container: mapContainer,
			style: 'mapbox://styles/mapbox/streets-v11',
			center: [lng, lat],
			zoom: zoom,
			cooperativeGestures: true
		})

		

		// if less than 768px, pan the map down a bit
		if (window.innerWidth < 768) {
			this.map.panBy([0, 75]);
		}

		new mapboxgl.Marker({
			color: "#FF2C31",
			anchor: "bottom",
		}).setLngLat([lng, lat])
			.addTo(this.map);

		// Add zoom and rotation controls to the map.
		this.map.addControl(new mapboxgl.NavigationControl());
	}
}

new BasicMap();