markers overview - pin markers

Author: Azgaar

index.html

@@ -3564,7 +3564,7 @@
     <div id="loadMapData" style="display: none" class="dialog">
       <div>
         <strong>Load map from</strong>
-        <button onclick="mapToLoad.click()" data-tip="Load .map file from local disk">local disk</button>
+        <button onclick="mapToLoad.click()" data-tip="Load .map file from your local disk">machine</button>
         <button onclick="loadURL()" data-tip="Load .map file from URL (server should allow CORS)">URL</button>
         <button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
       </div>

modules/ui/layers.js

@@ -1535,7 +1535,10 @@ function toggleMarkers(event) {
 
 function drawMarkers() {
   const rescale = +markers.attr("rescale");
-  const html = pack.markers.map(marker => drawMarker(marker, rescale));
+  const pinned = +markers.attr("pinned");
+
+  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
+  const html = markersData.map(marker => drawMarker(marker, rescale));
   markers.html(html.join(""));
 }
 

modules/ui/markers-overview.js

@@ -38,6 +38,7 @@ function overviewMarkers() {
 
     if (el.classList.contains("icon-pencil")) return openEditor(i);
     if (el.classList.contains("icon-dot-circled")) return focusOnMarker(i);
+    if (el.classList.contains("icon-pin")) return pinMarker(el, i);
     if (el.classList.contains("locks")) return toggleLockStatus(el, i);
     if (el.classList.contains("icon-trash-empty")) return triggerRemove(i);
     // TODO: hidden attribute
@@ -50,6 +51,7 @@ function overviewMarkers() {
         <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
         <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
         <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
+        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin inactive pointer"></span>
         <span style="padding-right:.1em" class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove marker" class="icon-trash-empty"></span>
       </div>`;
@@ -75,6 +77,20 @@ function overviewMarkers() {
     highlightElement(document.getElementById(`marker${i}`), 2);
   }
 
+  function pinMarker(el, i) {
+    const marker = pack.markers.find(marker => marker.i === i);
+    if (marker.pinned) {
+      delete marker.pinned;
+      const anyPinned = pack.markers.some(marker => marker.pinned);
+      if (!anyPinned) markerGroup.removeAttribute("pinned");
+    } else {
+      marker.pinned = true;
+      markerGroup.setAttribute("pinned", 1);
+    }
+    el.classList.toggle("inactive");
+    drawMarkers();
+  }
+
   function toggleLockStatus(el, i) {
     const marker = pack.markers.find(marker => marker.i === i);
     if (marker.lock) {