zyphlar
259 lines
9.6 KiB
HTML
259 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>GeoJSON Map Viewer</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='map-ui.css') }}">
|
|
<style>
|
|
.layer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 4px 0;
|
|
padding: 3px 5px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
cursor: move;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.layer-item.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.layer-item input[type="checkbox"] {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.file-input-group {
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.file-input-group:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-input-group label {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-input-group input[type="file"],
|
|
.file-input-group select {
|
|
width: 100%;
|
|
font-size: 11px;
|
|
padding: 3px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.load-button {
|
|
background: #28a745 !important;
|
|
}
|
|
|
|
.load-button:hover {
|
|
background: #218838 !important;
|
|
}
|
|
|
|
.selection-box {
|
|
position: absolute;
|
|
border: 2px dashed #007bff;
|
|
background: rgba(0, 123, 255, 0.1);
|
|
pointer-events: none;
|
|
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 {
|
|
cursor: crosshair !important;
|
|
}
|
|
/* One line per road in a multi-select popup; hover highlights it on the map */
|
|
.conn-row:hover { background: #e0f7fa; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<!-- Hamburger menu button for mobile -->
|
|
<button class="hamburger-button" id="hamburgerButton" aria-label="Toggle menu">
|
|
<span></span>
|
|
<span></span>
|
|
<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>
|
|
|
|
<div class="controls" id="controls">
|
|
<a href="/" class="btn-back">← Back</a>
|
|
<h3>Layer Controls (top to bottom)</h3>
|
|
<div id="layerList">
|
|
<div class="layer-item" draggable="true" data-layer="diff">
|
|
<input type="checkbox" id="diffToggle" checked>
|
|
<span>Diff Layer</span>
|
|
</div>
|
|
<div class="layer-item" draggable="true" data-layer="osm">
|
|
<input type="checkbox" id="osmToggle">
|
|
<span>OSM Layer (Gray)</span>
|
|
</div>
|
|
<div class="layer-item" draggable="true" data-layer="county">
|
|
<input type="checkbox" id="countyToggle">
|
|
<span>County Layer (Purple)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 style="margin-top: 10px;">Diff Filters</h3>
|
|
<label>
|
|
<input type="checkbox" id="showAdded" checked>
|
|
Show Added (Green; darker = possible rename/reroute)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showConflicted" checked>
|
|
Show Possibly Conflicted (Yellow)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showRemoved">
|
|
Show Removed (Red; darker = possible rename)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="hideService">
|
|
Hide service & track
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="hideUnclassified">
|
|
Hide unclassified
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showSnapPreview" checked>
|
|
Show snap preview
|
|
</label>
|
|
<label>
|
|
Snap distance:
|
|
<input type="number" id="snapDistance" value="10" min="1" max="500" step="1"
|
|
style="width:42px;margin:0 3px;padding:1px 3px;border:1px solid #ccc;border-radius:3px;font-size:11px;">
|
|
m
|
|
</label>
|
|
|
|
<h3 style="margin-top: 10px;">Selection Mode</h3>
|
|
<button id="multiSelectToggle" style="width: 100%; padding: 8px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px;">
|
|
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. 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>
|
|
<div class="file-input-group">
|
|
<label for="countySelect">County:</label>
|
|
<select id="countySelect">
|
|
<option value="lake">Lake</option>
|
|
<option value="sumter" selected>Sumter</option>
|
|
</select>
|
|
</div>
|
|
<div class="file-input-group">
|
|
<label for="dataTypeSelect">Data Type:</label>
|
|
<select id="dataTypeSelect">
|
|
<option value="roads" selected>Roads</option>
|
|
<option value="paths">Multi-Use Paths</option>
|
|
<option value="addresses">Addresses</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button id="loadButton" class="load-button">Load from Server</button>
|
|
<button id="saveButton" disabled>Save GeoJSON</button>
|
|
<button id="exportOsmButton" disabled style="background:#6f42c1;">Export to JOSM (.osm)</button>
|
|
|
|
<div id="status" class="status hidden"></div>
|
|
</div>
|
|
|
|
<!-- Auto-fix preview modal -->
|
|
<div id="autoFixModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.55);z-index:10000;align-items:center;justify-content:center;">
|
|
<div style="background:white;border-radius:8px;padding:20px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 4px 24px rgba(0,0,0,0.35);">
|
|
<h3 style="margin:0 0 8px;font-size:15px;">Review Auto-Fix Plans</h3>
|
|
<p style="font-size:12px;color:#555;margin:0 0 12px;">These removed roads need splitting. Uncheck any to skip (old way excluded from export).</p>
|
|
<div id="autoFixModalBody"></div>
|
|
<div style="margin-top:16px;display:flex;gap:8px;justify-content:flex-end;">
|
|
<button id="autoFixCancel" style="padding:8px 16px;background:#6c757d;color:white;border:none;border-radius:4px;cursor:pointer;font-size:13px;">Cancel</button>
|
|
<button id="autoFixExport" style="padding:8px 16px;background:#6f42c1;color:white;border:none;border-radius:4px;cursor:pointer;font-size:13px;">Export</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="{{ url_for('static', filename='map-ui.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='map.js') }}"></script>
|
|
</body>
|
|
</html>
|