PackageHelper/www/assets/js/map_leaflet.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 leafletMap() {
    var map = L.map('mapbox', {
        zoomSnap: 0.25,
        minZoom: 1,
        maxZoom: 20,
        zoom: 12,
        center: L.latLng(46.5966, -112.0180),
        attributionControl: true,
        attribution: '&copy; <a href="http://www.openmaptiles.org/" target="_system">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_system">OpenStreetMap</a> contributors'
    });

    var mapSources = {
        "offline": 'assets/tiles/{z}/{x}/{y}.png',
        "liberty": 'https://maps.netsyms.net/styles/osm-liberty/{z}/{x}/{y}.png',
        "terrain": 'https://maps.netsyms.net/styles/klokantech-terrain/{z}/{x}/{y}.png'
    };

    if (localStorage.getItem("mapsource") == null) {
        localStorage.setItem("mapsource", "offline");
    }

    if (localStorage.getItem("mapsource") == "offline") {
        map.setMaxBounds(L.latLngBounds(L.latLng(46.7384, -112.1429), L.latLng(46.5127, -111.7557)));
        map.setMinZoom(12);
        map.setMaxZoom(16);
        L.tileLayer(mapSources[localStorage.getItem("mapsource")], {
            minZoom: 12,
            maxZoom: 16
        }).addTo(map);
    } else {
        L.tileLayer(mapSources[localStorage.getItem("mapsource")], {
            minZoom: 1,
            maxZoom: 20
        }).addTo(map);
    }

    map.locateControl = L.control.locate({
        flyTo: true,
        icon: "far fa-compass",
        iconLoading: "far fa-compass fa-spin"
    }).addTo(map);

    map.packagelayer = L.markerClusterGroup();

    map.packagelayer.addTo(map);

    map.setView({lat: 0, lng: 0}, 1);

    map.setMapHeading = function (heading) {

    }

    map.setMapLocation = function (latitude, longitude) {
        map.setView({
            lng: longitude,
            lat: latitude
        });
    }

    map.updatePackageLayer = function (data) {
        map.packagelayer.clearLayers();

        data.forEach(function (package) {

            var iconName = "box";

            if (package.delivered) {
                iconName = "box-check";
            } else if (package.distance * 1 < localStorage.getItem("alertradius") * 1) {
                iconName = "box-alert";
            }

            var icon = L.icon({
                iconUrl: "assets/images/" + iconName + ".png",
                iconSize: [25, 25],
                iconAnchor: [12.5, 12.5]
            });

            var marker = L.marker(
                    [
                        package.coords[0],
                        package.coords[1]
                    ],
                    {
                        icon: icon
                    })
                    .on("click", function () {
                        openPackageInfoSheet(package);
                    });

            map.packagelayer.addLayer(marker);
        });
    }

    map.animateMapIn = function (latitude, longitude, zoom, heading) {
        if (typeof zoom == 'undefined') {
            zoom = 14;
        }
        if (typeof heading == 'undefined') {
            heading = 0;
        }
        map.flyTo([latitude, longitude], zoom);
        // Set min zoom after some time to fly in
        setTimeout(function () {
            map.setMinZoom(12);
            map.setZoom(zoom);
        }, 1000);
    }

    return map;
}