Map Block

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

.block-map-block {

	.heading {
		@include fluid-type(28, 34);
	}

	&__map {
		width: 100%;
		height: rem-calc(300);
		background-color: $veryLightBlue;

		@include bp($lg) {
			height: rem-calc(680);
		}
	}

	&__content {
		width: 100%;
		max-width: 100%;

		@include bp($lg) {
			width: rem-calc(580);
		}
	}

	&__content-inner {
		padding-top: rem-calc(80);
		padding-bottom: rem-calc(80);
		padding-left: 0;
		padding-right: 0;

		@include bp($lg) {
			padding-left: rem-calc(100);
			padding-right: rem-calc(100);
		}
	}

	&__detail-heading {
		font-weight: 700;
		font-size: rem-calc(20);
		margin-bottom: rem-calc(40);
		margin-top: rem-calc(24);
	}

	&__detail {
		color: $darkBlue;
		font-weight: 700;
		text-decoration: none;
		margin-bottom: rem-calc(16);
		line-height: rem-calc(24);

		a {
			color: $darkBlue;
			transition: all 0.2s ease-in-out;
			display: inline-block;
			text-decoration: none;
			position: relative;

			&:hover {
				color: $orange;
			}
		}

		&--phone,
		&--email,
		&--address {
			a {
				padding-left: rem-calc(32);

				&:before {
					content: '';
					position: absolute;
					top: rem-calc(4);
					left: 0;
					width: rem-calc(16);
					height: rem-calc(16);
					background-size: contain;
					background-repeat: no-repeat;
					background-position: center;
				}
			}
		}

		&--phone {
			a {
				&:before {
					background-image: url('#{$asset-path}/icons/icon-phone-navy.svg');
				}
			}
		}

		&--email {
			a {
				&:before {
					background-image: url('#{$asset-path}/icons/icon-envelope-navy.svg');
				}
			}
		}

		&--address {
			a {
				&:before {
					background-image: url('#{$asset-path}/icons/icon-pin-navy.svg');
				}
			}
		}

	}

	&__info {
		border-top: 1px solid $lightBlue;
		padding-top: rem-calc(20);
		margin-top: rem-calc(4);

		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	.marker {
		width: rem-calc(40);
		height: rem-calc(40);
		background-image: url('#{$asset-path}/icons/icon-pin-orange.svg');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
}

class MapBlock {
	/**
	 * 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-map-block');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {

			mapboxgl.accessToken = 'pk.eyJ1IjoiYi1wLWNvbGxpbnMiLCJhIjoiY2x0em1nazQzMDFyaDJrdDR2MWhheGx1cSJ9.xefnuzaGNVh9n9xwW_EA5w';

			let mapBox = block.querySelector(".block-map-block__map");
			let mapBoxID = mapBox.id;
			let lng = mapBox.getAttribute('data-lng');
			let lat = mapBox.getAttribute('data-lat');
			let coords = [lng, lat];

			// console.log(coords);

			var map = new mapboxgl.Map({
				container: mapBoxID,
				style: 'mapbox://styles/b-p-collins/clv6g124w00lk01qv3s2t634d',
				center: coords,
				zoom: 15,
			});

			var el = document.createElement('div');
			el.className = 'marker';

			new mapboxgl.Marker(el)
			.setLngLat(coords)
			.addTo(map);

			map.scrollZoom.disable();
			map.addControl(new mapboxgl.FullscreenControl());
			map.addControl(new mapboxgl.NavigationControl());

		});
	}
}

new MapBlock();