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

/**
 * Open a location on the map.
 * @param {type} e
 * @returns {undefined}
 */
var openMapLocationInfo = function (e) {
    var coordinates = e.geometry.coordinates.slice();
    showLocationDetails(e);
    locationMap.mapObj.resize();
    locationMap.mapObj.easeTo({
        center: [coordinates[0], coordinates[1]],
        zoom: 15,
        bearing: 0,
        pitch: 0
    });
};

var showLocationDetails = function (e) {
    var coordinates = e.geometry.coordinates.slice();
    var name = e.properties.name;
    var info = e.properties.info;
    var hours = e.properties.hours;
    var geolink = "geo:" + (Math.round(coordinates[1] * 1000000) / 1000000) + "," + (Math.round(coordinates[0] * 1000000) / 1000000);

    var typeinfo = "";
    if (e.properties.branding == "DAS") {
        typeinfo = "<b>Drop and Send&#8480; Drop Box</b><br />Use this app to send packages from this box, no postage necessary. Just put your package inside and scan the QR code with this app.";
    } else if (e.properties.branding == "PP") {
        typeinfo = "<b>PostalPoint&trade; Kiosk</b><br />Purchase postage, send USPS packages, and get free boxes here.";
    }
    $("#locationInfoName").text(name);
    $("#locationInfoModalContainer").html(
            "<div class='row'><div class='col-50'>"
            + "<a class=\"button button-small\" href=\"" + geolink + "\"><i class=\"fas fa-location-circle\"></i>&nbsp; Directions</a>"
            + "</div>"
            + "<div class='col-50'>"
            + (e.properties.branding == "DAS" ? "<a class=\"button button-small sheet-close\" href=\"\" onclick=\"router.navigate('/das');\"><i class=\"fas fa-info-circle\"></i>&nbsp; More Info</a>" : "")
            + (e.properties.branding == "PP" ? "<a class=\"button button-small sheet-close\" href=\"\" onclick=\"router.navigate('/kiosk');\"><i class=\"fas fa-info-circle\"></i>&nbsp; More info</a>" : "")
            + "</div></div>"
            + typeinfo + "<br />"
            + (hours == "" ? "" : "<b>Hours:</b> " + hours)
            + "<br /><b>Info:</b> " + info
            );
    app.sheet.open("#locationInfoModal");
};

function loadLocationMap() {
    if (MapControl.supported()) {
        if (locationMap == null) {
            app.preloader.show();
            var mapboxel = document.getElementById("mapbox-locations");
            locationMap = new MapControl(mapboxel, true);
            locationMap.reloadMap();
            var locationMapLoaded = false;

            locationMap.mapObj.on('load', function () {
                locationMapLoaded = true;
            });

            apirequest(SETTINGS.apis.locations, {}, function (resp) {
                var loadWhenMapReady = function () {
                    if (locationMapLoaded) {
                        setupLocationMap(resp);
                    } else {
                        setTimeout(function () {
                            loadWhenMapReady();
                        }, 100);
                    }
                }
                loadWhenMapReady();
            }, function (xhr) {
                app.preloader.hide();
                try {
                    var error = $.parseJSON(xhr.responseText);
                    if (error && typeof error.msg != 'undefined') {
                        app.dialog.alert(error.msg, "Error");
                        sendErrorReport("Location Map", "Couldn't get locations GeoJSON", error.msg);
                    } else {
                        app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
                        sendErrorReport("Location Map", "Couldn't get locations GeoJSON", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
                    }
                } catch (ex) {
                    app.dialog.alert("There's a server or network problem. Check your Internet connection or try again later.", "Error");
                    sendErrorReport("Location Map", "Couldn't get locations GeoJSON", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
                }
            });
        }
    } else {
        showWebGLErrorMessage();
        app.preloader.hide();
    }
}

function setupLocationMap(geojson) {
    app.preloader.hide();
    geojson.features.forEach((marker) => {
        const el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = "url(./assets/images/" + marker.properties.branding + "_marker.png)";
        el.style.width = "32px";
        el.style.height = "32px";
        el.style.cursor = "pointer";
        el.addEventListener('click', () => {
            openMapLocationInfo(marker);
        });
        new maplibregl.Marker({element: el})
                .setLngLat(marker.geometry.coordinates)
                .addTo(locationMap.mapObj);
    });
    locationMap.mapObj.jumpTo({center: [-112.005, 46.589], zoom: 9});

}

$("body").on("sheet:open", "#locationInfoModal", function () {
    $("#mapbox-locations").addClass("sheet-open");
    locationMap.mapObj.resize();
});
$("body").on("sheet:close", "#locationInfoModal", function () {
    $("#mapbox-locations").removeClass("sheet-open");
    locationMap.mapObj.resize();
    locationMap.mapObj.easeTo({center: [-112.005, 46.589], zoom: 9});
});