zyphlar
190 lines
7.2 KiB
HTML
190 lines
7.2 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;
|
|
}
|
|
|
|
/* Crosshair cursor in multi-select mode */
|
|
.leaflet-container.multi-select-active,
|
|
.leaflet-container.multi-select-active.leaflet-grab {
|
|
cursor: crosshair !important;
|
|
}
|
|
</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>
|
|
|
|
<!-- 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)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showConflicted" checked>
|
|
Show Possibly Conflicted (Yellow)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showRemoved">
|
|
Show Removed (Red)
|
|
</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
|
|
</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>
|