src/Gisplay/Maps/BGMapWrapper.js

/**
 * This class represents a background map wrapper. Used to be a "middle-man" between the 
 * background map provider and the API.
 */
export class BGMapWrapper {

    /**
     * This is the map that comes from the background map provider(e.g., MapBox).
     * @param {Object} map 
     */
    constructor(map) {
        console.log("BGMapWrapper constructor?");
        /**
         * This is the map that comes from the background map provider(e.g., MapBox). 
         * @type {Object}
         */
        this.map = map;
    }

    /**
     * Returns the map's containing HTML element.
     */
    getContainer() {
        return this.map.getContainer();
    }

    /**
     * Given one id it creates a canvas object.
     * @todo Understand case mapbox comment bellow.
     * @param {number} id - The id of the canvas to be created.
     * @returns {HTMLCanvasElement} Canvas object where everything will be drawn.
     */
    createCanvas(id) {
        const mapCanvas = document.createElement('canvas');
        mapCanvas.id = `mapCanvas${id}`;
        mapCanvas.style.position = 'absolute';

        const mapDiv = this.map.getContainer();
        mapCanvas.height = mapDiv.offsetHeight;
        mapCanvas.width = mapDiv.offsetWidth;
        //mapCanvas.style.zIndex = "2";

        //case mapbox
        mapDiv.insertBefore(mapCanvas, mapDiv.firstChild.nextSibling);

        const canvas = document.getElementById(`mapCanvas${id}`);
        return canvas;
    }

    /**
     * Returns the map's current zoom level.
     */
    getZoom() {
        return this.map.getZoom();
    }

    /**
     * Returns the longitude of the bounding box northwest corner.
     */
    getLngBound() {
        return this.map.getBounds().getNorthWest().lng;
    }

    /**
     * Returns the latitude of the bounding box northwest corner.
     */
    getLatBound() {
        return this.map.getBounds().getNorthWest().lat;
    }

    /**
     * Adds a listener to a specified event type.
     * @param {string} eventstr - The event type to add a listen for.
     * @param {Function} eventfunction - The function to be called when the event is fired. The listener function is called with the data object passed to  fire , extended with  target and  type properties. 
     */
    onEvent(eventstr, eventfunction) {
        this.map.on(eventstr, eventfunction);
    }

    /**
     * Creates loader to be shown at the beginning when the API is loading all data.
     * @todo This method is calling another with parameters in the 1st if. This is incorrect.
     */
    loader() {
        if (this.loaderDiv === undefined)
            this.createLoader(this.map);
        else {
            if (this.loaderDiv.style.display == 'none')
                this.loaderDiv.style.display = 'flex';
            else {
                this.loaderDiv.style.display = 'none';
            }

            if (this.loaderDiv.className.includes('_gisplayhidden')) {
                this.loaderDiv.className = this.loaderDiv.className.replace(/(?:^|\s)_gisplayhidden(?!\S)/g, '_gisplayLoaderOuterDiv');
            }
            else {
                this.loaderDiv.className = this.loaderDiv.className.replace(/(?:^|\s)_gisplayLoaderOuterDiv(?!\S)/g, '_gisplayhidden');
            }
        }
    }

    /**
     * Auxiliar method to be called when the we want to create the loader.
     * @todo Probably it is not being used because nobody calls it(see L:82).
     * It inserts two divs on the map
     */
    createLoader() {
        const outerDiv = document.createElement('div');
        const innerDiv = document.createElement('div');
        innerDiv.className = '_gisplayloader';

        const mapDiv = this.getContainer();

        /*outerDiv.style = ' opacity: 0.5; background-color: grey; justify-content: center; display: flex;';
        outerDiv.style.position = 'absolute';
        outerDiv.style.zIndex = '999999999';*/
        outerDiv.className = '_gisplayLoaderOuterDiv';
        outerDiv.style.height = mapDiv.offsetHeight;
        outerDiv.style.width = mapDiv.offsetWidth;
        outerDiv.appendChild(innerDiv);
        this.loaderDiv = outerDiv;

        mapDiv.parentElement.insertBefore(outerDiv, mapDiv);
    }
}