Basic Map

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

.block-basic-map {
	position: relative;

	&__content-container {
		display: flex;
		flex-direction: column;
		justify-content: center;

		@include bp($md, true) {
			padding-top: 1rem;
		}
	}
	
	&__map-container {
		aspect-ratio: 1/1;
	}
}

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.7] } );

            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.eyJ1Ijoic3RyYXRlZ2lxIiwiYSI6ImNsM243b3J5ZzA1b2YzY2xnejVtM3RsZmsifQ.bxfwR1hd-vlBKVOJfRZ-3A';

        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,
		});

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

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

new BasicMap();