Refactor map code to allow for multiple maps in app

www/assets/css/app.css

@@ -74,7 +74,7 @@ Framework7 and FontAwesome both have a .fab class
     -webkit-app-region: no-drag;
 }
 
-#mapbox .package-marker {
+.mapbox .package-marker {
     width: 32px;
     height: 32px;
     background-image: url(../images/package-icon.png);

www/assets/js/Map.class.js

@@ -0,0 +1,78 @@
+/*
+ * 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 Map {
+    constructor(mapboxElement) {
+        this.mapObj = null;
+        this.mapEl = mapboxElement;
+    }
+
+    createMap() {
+        if (mapboxgl.supported()) {
+            $(this.mapEl).css("display", "");
+            this.mapObj = maplibreMap(this.mapEl);
+        } else {
+            console.log("maplibre-gl not supported, disabling map");
+            $(this.mapEl).css("display", "none");
+        }
+    }
+
+    clearOldMarkersAndCenterMapOnNewMarker(classname) {
+        var latitude = $(this.mapEl).data("latitude");
+        var longitude = $(this.mapEl).data("longitude");
+        var accurate = $(this.mapEl).data("accurate") == true;
+
+        this.mapObj.removeMarkers();
+        this.mapObj.addMarker(latitude, longitude, classname);
+        this.mapObj.animateMapIn(latitude, longitude, (accurate ? 13 : 10));
+    }
+
+    /**
+     * 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 (mapObj == null) {
+            return;
+        }
+        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);
+    }
+}

www/assets/js/map.js

@@ -4,71 +4,5 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-var map = null;
 
-function createMap() {
+///var trackingMap = new Map(document.getElementById("mapbox-track"));
-    if (mapboxgl.supported()) {
-        $("#mapbox").css("display", "");
-        map = maplibreMap();
-        centerMapOnPackage();
-    } else {
-        console.log("maplibre-gl not supported, disabling map");
-        $("#mapbox").css("display", "none");
-    }
-}
-
-function centerMapOnPackage() {
-    var latitude = $("#mapbox").data("latitude");
-    var longitude = $("#mapbox").data("longitude");
-    var accurate = $("#mapbox").data("accurate") == true;
-
-    map.removeMarkers();
-    map.addMarker(latitude, longitude);
-    map.animateMapIn(latitude, longitude, (accurate ? 13 : 10));
-}
-
-/**
- * Destroy and re-create the map.
- * @returns {undefined}
- */
-function reloadMap() {
-    try {
-        if (map != null && typeof map != 'undefined') {
-            map.off();
-            map.remove();
-            map = null;
-
-            if (document.getElementById("mapbox") != null) {
-                createMap();
-            } else {
-                console.log("Info", "Not re-creating map because #mapbox is not in DOM. Creation will be automatically triggered when map page is loaded.");
-            }
-        } else {
-            createMap();
-        }
-    } catch (ex) {
-        // oh well ¯\(°_o)/¯
-        console.log(ex);
-        $("#mapbox").css("display", "none");
-    }
-}
-
-function setMapLocation(latitude, longitude) {
-    if (map == null) {
-        return;
-    }
-    map.setMapLocation(latitude, longitude);
-}
-
-function animateMapIn(latitude, longitude, zoom, heading) {
-    if (map == null) {
-        return;
-    }
-    if (typeof zoom == 'undefined') {
-        zoom = 10;
-    }
-    if (typeof heading == 'undefined') {
-        heading = 0;
-    }
-    map.animateMapIn(latitude, longitude, zoom, heading);
-}

www/assets/js/map_maplibre.js

@@ -4,17 +4,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-function maplibreMap() {
+function maplibreMap(containerEl) {
 
     var theme = "liberty";
     if ($("#app").hasClass("theme-dark")) {
         theme = "libertydark";
     }
 
-    $("#mapbox").css("background-color", SETTINGS.maptileurls[theme].bgcolor);
+    $(containerEl).css("background-color", SETTINGS.maptileurls[theme].bgcolor);
 
     var map = new mapboxgl.Map({
-        container: 'mapbox',
+        container: containerEl.id,
         style: SETTINGS.maptileurls[theme].json,
         //attributionControl: false,
         interactive: false,
@@ -65,10 +65,10 @@ function maplibreMap() {
         });
     };
 
-    map.addMarker = function (latitude, longitude) {
+    map.addMarker = function (latitude, longitude, classname) {
         var el = document.createElement("div");
 
-        el.className = "package-marker";
+        el.className = classname;
         new mapboxgl.Marker(el).setLngLat([longitude, latitude]).addTo(map);
     };
 

www/index.html

@@ -47,6 +47,7 @@
 <script src="assets/js/platform.js"></script>
 
 <script src="assets/js/map_maplibre.js"></script>
+<script src="assets/js/Map.class.js"></script>
 <script src="assets/js/map.js"></script>
 <script src="assets/js/util.js"></script>
 <script src="assets/js/track.js"></script>

www/pages/trackresult.html

@@ -30,7 +30,7 @@
                     <ul>
                         {{#if map.enabled}}
                         <li>
-                            <div style="width: 100%; min-height: 200px; max-height: 500px; height: 30vh;" id="mapbox" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
+                            <div class="mapbox" style="width: 100%; min-height: 200px; max-height: 500px; height: 30vh;" id="mapbox-track" data-latitude="{{map.latitude}}" data-longitude="{{map.longitude}}" data-accurate="{{map.accurate}}"></div>
                         </li>
                         {{/if}}
                         {{#js_if "this.info != []"}}

www/routes.js

@@ -188,7 +188,9 @@ var routes = [
         async: trackOpenAsync,
         on: {
             pageAfterIn: function () {
-                reloadMap();
+                var trackingMap = new Map(document.getElementById("mapbox-track"));
+                trackingMap.reloadMap();
+                trackingMap.clearOldMarkersAndCenterMapOnNewMarker("package-marker");
             }
         }
     },