HelenaExpressApp/www/assets/js/MapControl.class.js

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

class MapControl {
    constructor(maplibreElement, interactive) {
        this.mapObj = null;
        this.mapEl = maplibreElement;
        this.interactiveMap = interactive == true;
    }

    static supported() {
        return maplibregl.supported();
    }

    createMap() {
        if (maplibregl.supported()) {
            $(this.mapEl).css("display", "");
            this.mapObj = maplibreMap(this.mapEl, this.interactiveMap);
        } else {
            console.log("maplibre-gl not supported, disabling map");
            $(this.mapEl).css("display", "none");
        }
    }

    /**
     * Clear all markers from the map, make a new marker, and fly to it.
     * @param {string} classname CSS class for the marker, for adding icon and stuff. Default will be invisible and 0x0px.
     * @param {number} latitude
     * @param {number} longitude
     * @param {boolean} accurate set true to zoom to street level (z13), false to zoom to general area (z10).
     * @returns {undefined}
     */
    clearMarkersAndCenterMapOnNewMarker(classname, latitude, longitude, accurate) {
        this.mapObj.removeMarkers();
        this.mapObj.addMarker(latitude, longitude, classname);
        this.mapObj.animateMapIn(latitude, longitude, (accurate ? 13 : 10));
    }

    loadMarkersFromGeoJson(geojson, iconname, name) {
        this.mapObj.addSource("markers-" + name, {
            'type': 'geojson',
            'data': geojson
        });
        this.mapObj.addLayer({
            id: "marker-layer-" + name,
            type: "symbol",
            source: "markers-" + name,
            layout: {
                "icon-image": iconname,
                "icon-anchor": "bottom",
                'icon-allow-overlap': true
            }
        });
    }

    loadIcon(url, name, callback) {
        var mapObj = this.mapObj;
        this.mapObj.loadImage(
                url,
                function (error, image) {
                    if (error)
                        throw error;
                    mapObj.addImage(name, image);
                    callback();
                });
    }

    /**
     * Destroy and re-create the map.
     * @returns {undefined}
     */
    reloadMap() {
        try {
            if (this.mapObj != null && typeof map != 'undefined') {
                this.mapObj.off();
                this.mapObj.remove();
                this.mapObj = null;

                if (document.getElementById("") != null) {
                    this.createMap();
                } else {
                    console.log("Info", "Not re-creating map because element is not in DOM.");
                }
            } else {
                this.createMap();
            }
        } catch (ex) {
            // oh well ¯\(°_o)/¯
            console.log(ex);
            $(this.mapEl).css("display", "none");
        }
    }

    setMapLocation(latitude, longitude) {
        if (this.mapObj == null) {
            return;
        }
        this.mapObj.setMapLocation(latitude, longitude);
    }

    animateMapIn(latitude, longitude, zoom, heading) {
        if (this.mapObj == null) {
            return;
        }
        if (typeof zoom == 'undefined') {
            zoom = 10;
        }
        if (typeof heading == 'undefined') {
            heading = 0;
        }
        this.mapObj.animateMapIn(latitude, longitude, zoom, heading);
    }
}