will/osm-import-tools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Grayscale OSM base tiles, mobile-friendly dashboard and map with touch multi-select and box select, wider road click radius, and strip internal properties from JOSM export

Browse Source
This commit is contained in:
zyphlar
2026-10-15 12:44:48 -07:00
parent 7e5b3dc2ee
commit 9b8752eef5
6 changed files with 457 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/map.html
+68 -1
View File
@@ -67,6 +67,64 @@
z-index: 1000;
}
.multiselect-fab {
display: none;
position: absolute;
top: 64px;
right: 10px;
z-index: 998; /* above the map, below the drawer's overlay (999) */
width: 44px;
height: 44px;
border: none;
border-radius: 4px;
background: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.multiselect-fab svg {
fill: none;
stroke: #333;
stroke-width: 2;
}
.multiselect-fab.active {
background: #007bff;
}
.multiselect-fab.active svg {
stroke: white;
}
.multiselect-fab .fab-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 10px;
background: #ffc107;
color: #222;
font-size: 11px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.multiselect-fab .fab-count:empty {
display: none;
}
@media (max-width: 768px) {
.multiselect-fab {
display: flex;
}
}
/* Crosshair cursor in multi-select mode */
.leaflet-container.multi-select-active,
.leaflet-container.multi-select-active.leaflet-grab {
@@ -84,6 +142,15 @@
<span></span>
</button>
<!-- Floating multi-select toggle (mobile only; desktop uses the panel button) -->
<button class="multiselect-fab" id="multiSelectFab" aria-pressed="false" aria-label="Toggle multi-select">
<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
<rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/>
<rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/>
</svg>
<span class="fab-count"></span>
</button>
<!-- Overlay for mobile -->
<div class="overlay" id="overlay"></div>
@@ -142,7 +209,7 @@
Multi-Select: OFF
</button>
<div style="margin-top: 5px; padding: 5px; background: #e7f3ff; border-radius: 4px; font-size: 10px; color: #004085;">
<strong>Tip:</strong> Enable multi-select or hold Shift to select multiple features by clicking or dragging a box
<strong>Tip:</strong> Enable multi-select or hold Shift to select multiple features by clicking or dragging a box. On touch screens, turn on multi-select (the grid button on the map), then drag a finger to draw a box or tap features to add or remove them; use two fingers to pan and zoom.
</div>
<h3 style="margin-top: 10px;">Load Data</h3>