Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Highlight selected map icon (close #55)

Browse Source
This commit is contained in:
Skylar Ittner 2020-05-29 16:47:55 -06:00
parent a5132ff892
commit c81cc87e91
4 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
www/assets/css/app.css
View File

@ -49,13 +49,28 @@ Framework7 and FontAwesome both have a .fab class
font-size: var(--f7-block-font-size); 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; width: 25px;
height: 25px; height: 25px;
background-image: url(../images/box.png); background-image: url(../images/box.png);
background-size: contain; 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 /* Allow tapping/clicking on package markers
* when the location dot is overlapping them * when the location dot is overlapping them
*/ */

7
www/assets/js/map.js
View File

@ -76,6 +76,10 @@ $("#app").on("click", "#package-info-sheet #package-info-sheet-inner .list ul li
openPackageInfoSheet($(this).data("coordid"), true); openPackageInfoSheet($(this).data("coordid"), true);
}); });
$("#app").on("sheet:close", "#package-info-sheet", function () {
$(".package-marker").removeClass("selected");
});
function openPackageInfoSheet(coordid, refreshOnly) { function openPackageInfoSheet(coordid, refreshOnly) {
if (typeof refreshOnly == "undefined") { if (typeof refreshOnly == "undefined") {
refreshOnly = false; refreshOnly = false;
@ -83,6 +87,9 @@ function openPackageInfoSheet(coordid, refreshOnly) {
//console.log("Packages array: ", packages); //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++) { for (var i = 0; i < packages.length; i++) {
if (packages[i].id == coordid) { if (packages[i].id == coordid) {
package = packages[i]; package = packages[i];

8
www/assets/js/map_leaflet.js
View File

@ -89,13 +89,17 @@ function leafletMap() {
datai.coords[1] datai.coords[1]
], ],
{ {
icon: icon icon: icon,
}) })
.on("click", function () { .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); map.packagelayer.addLayer(marker);
//L.DomUtil.addClass(marker._icon, 'package-marker'); // enable selected CSS to work correctly
})(data[i]); })(data[i]);
} }
} }

4
www/assets/js/map_mapbox.js
View File

@ -102,7 +102,9 @@ function mapboxMap() {
//console.log(iconName); //console.log(iconName);
var el = document.createElement("div"); 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);"; el.style = "background-image: url(assets/images/" + iconName + ".png);";