HelenaExpressApp/www/assets/js/map_maplibre.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/.
 */

function maplibreMap(containerEl, interactive) {

    var theme = "liberty";
    if ($("body").hasClass("theme-dark")) {
        theme = "libertydark";
    }

    $(containerEl).css("background-color", SETTINGS.maptileurls[theme].bgcolor);

    var map = new maplibregl.Map({
        container: containerEl.id,
        style: SETTINGS.maptileurls[theme].json,
        //attributionControl: false,
        interactive: interactive,
        pitch: 0,
        zoom: 1,
        maxZoom: 18,
        center: [-97, 38]
    });

    if (interactive) {
        map.addControl(new maplibregl.NavigationControl({
            visualizePitch: false,
            showCompass: false
        }), 'top-left');

        map.geolocatecontrol = new maplibregl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            fitBoundsOptions: {
                maxZoom: 13
            },
            showAccuracyCircle: false,
            trackUserLocation: true
        });

        map.addControl(map.geolocatecontrol, 'top-left');

        map.geolocatecontrol.on('error', function (err) {
            console.error("Geolocate error", err);
        });

        map.addControl(
                new maplibregl.ScaleControl({
                    unit: "imperial"
                })
                );
    }

    map.mapEasing = function (t) {
        return t * (2 - t);
    };

    map.setMapHeading = function (heading) {
        if (typeof heading == 'number') {
            map.easeTo({
                bearing: heading,
                easing: map.mapEasing
            });
        }
    };

    map.setMapLocation = function (latitude, longitude) {
        map.easeTo({
            center: [
                longitude,
                latitude
            ]
        });
    };

    map.animateMapIn = function (latitude, longitude, zoom, heading) {
        if (typeof zoom == 'undefined') {
            zoom = 10;
        }
        if (typeof heading == 'undefined') {
            heading = 0;
        }
        map.flyTo({
            center: [
                longitude,
                latitude
            ],
            speed: 1,
            zoom: zoom,
            heading: heading,
            pitch: 0
        });
    };

    map.addMarker = function (latitude, longitude, classname) {
        var el = document.createElement("div");

        el.className = classname;
        new maplibregl.Marker(el).setLngLat([longitude, latitude]).addTo(map);
    };

    map.removeMarkers = function () {
        var oldmarkers = document.getElementsByClassName("map-marker");
        if (oldmarkers.length > 0) {
            markerparent = oldmarkers[0].parentNode;
            while (oldmarkers.length > 0) {
                markerparent.removeChild(oldmarkers[0]);
            }
        }
    }

    return map;
}