zyphlar
364 lines
10 KiB
HTML
364 lines
10 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" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#map {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 1000;
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
min-width: 200px;
|
|
}
|
|
|
|
.controls h3 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.controls label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 8px 0;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.layer-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 8px 0;
|
|
padding: 5px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
cursor: move;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.layer-item.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.layer-item input[type="checkbox"] {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.controls input[type="checkbox"] {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.controls button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-top: 10px;
|
|
background: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.controls button:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
.controls button:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.status {
|
|
margin-top: 10px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.status.success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.status.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.file-input-group {
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.file-input-group:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.file-input-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-input-group input[type="file"],
|
|
.file-input-group select {
|
|
width: 100%;
|
|
font-size: 11px;
|
|
padding: 5px;
|
|
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;
|
|
}
|
|
|
|
.hamburger-button {
|
|
display: none;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 1001;
|
|
background: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
|
width: 44px;
|
|
height: 44px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.hamburger-button span {
|
|
display: block;
|
|
width: 24px;
|
|
height: 3px;
|
|
background: #333;
|
|
border-radius: 2px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hamburger-button.active span:nth-child(1) {
|
|
transform: rotate(45deg) translate(6px, 6px);
|
|
}
|
|
|
|
.hamburger-button.active span:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hamburger-button.active span:nth-child(3) {
|
|
transform: rotate(-45deg) translate(6px, -6px);
|
|
}
|
|
|
|
.close-button {
|
|
display: none;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
line-height: 1;
|
|
color: #666;
|
|
}
|
|
|
|
.close-button:hover {
|
|
color: #333;
|
|
}
|
|
|
|
/* Mobile styles */
|
|
@media (max-width: 768px) {
|
|
.hamburger-button {
|
|
display: flex;
|
|
}
|
|
|
|
.close-button {
|
|
display: block;
|
|
}
|
|
|
|
.controls {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100%;
|
|
width: 80%;
|
|
max-width: 320px;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
transition: right 0.3s ease;
|
|
border-radius: 0;
|
|
box-shadow: -2px 0 10px rgba(0,0,0,0.2);
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.controls.open {
|
|
right: 0;
|
|
}
|
|
|
|
.controls h3 {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.controls label {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* Overlay for mobile */
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 999;
|
|
}
|
|
|
|
.overlay.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 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">
|
|
<button class="close-button" id="closeButton" aria-label="Close menu">×</button>
|
|
<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" checked>
|
|
<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: 15px;">Diff Filters</h3>
|
|
<label>
|
|
<input type="checkbox" id="showAdded" checked>
|
|
Show Added (Green)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="showRemoved" checked>
|
|
Show Removed (Red)
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="hideService">
|
|
Hide service & track
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="hideUnclassified">
|
|
Hide unclassified
|
|
</label>
|
|
|
|
<h3 style="margin-top: 15px;">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: 8px; padding: 8px; background: #e7f3ff; border-radius: 4px; font-size: 11px; 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: 15px;">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 Accepted Items</button>
|
|
|
|
<div id="status" class="status hidden"></div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="{{ url_for('static', filename='map.js') }}"></script>
|
|
</body>
|
|
</html>
|