Highlight selected map icon (close #55)

www/assets/css/app.css

@@ -49,13 +49,28 @@ Framework7 and FontAwesome both have a .fab class
     font-size: var(--f7-block-font-size);
 }
 
-#mapbox .package-marker {
+#mapbox .package-marker.selected {
+    border: 4px solid #2196f3;
+    border-radius: 50%;
+}
+
+#mapbox .package-marker-mapbox {
     width: 25px;
     height: 25px;
     background-image: url(../images/box.png);
     background-size: contain;
 }
 
+#mapbox .package-marker-leaflet {
+
+}
+
+#mapbox .package-marker-leaflet.selected {
+    /* Keep the icons from shifting when they have a border */
+    margin-top: -16.5px !important;
+    margin-left: -16.5px !important;
+}
+
 /* Allow tapping/clicking on package markers
  * when the location dot is overlapping them
  */

www/assets/js/map.js

@@ -76,6 +76,10 @@ $("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li
     openPackageInfoSheet($(this).data("coordid"), true);
 });
 
+$("#app").on("sheet:close", "#package-info-sheet", function () {
+    $(".package-marker").removeClass("selected");
+});
+
 function openPackageInfoSheet(coordid, refreshOnly) {
     if (typeof refreshOnly == "undefined") {
         refreshOnly = false;
@@ -83,6 +87,9 @@ function openPackageInfoSheet(coordid, refreshOnly) {
 
     //console.log("Packages array: ", packages);
 
+    $(".package-marker").removeClass("selected"); // prevent multiple highlights when switching icons in tablet mode
+    $(".package-marker#marker-" + coordid).addClass("selected");
+
     for (var i = 0; i < packages.length; i++) {
         if (packages[i].id == coordid) {
             package = packages[i];

www/assets/js/map_leaflet.js

@@ -89,13 +89,17 @@ function leafletMap() {
                             datai.coords[1]
                         ],
                         {
-                            icon: icon
+                            icon: icon,
                         })
                         .on("click", function () {
-                            openPackageInfoSheet(datai.id)
+                            marker._icon.id = "marker-" + datai.id;
+                            marker._icon.classList.add('package-marker');
+                            marker._icon.classList.add('package-marker-leaflet');
+                            openPackageInfoSheet(datai.id);
                         });
 
                 map.packagelayer.addLayer(marker);
+                //L.DomUtil.addClass(marker._icon, 'package-marker'); // enable selected CSS to work correctly
             })(data[i]);
         }
     }

www/assets/js/map_mapbox.js

@@ -102,7 +102,9 @@ function mapboxMap() {
                 //console.log(iconName);
 
                 var el = document.createElement("div");
-                el.className = "package-marker";
+                el.className = "package-marker package-marker-mapbox";
+
+                el.id = "marker-" + datai.id;
 
                 el.style = "background-image: url(assets/images/" + iconName + ".png);";