Create new project design plans
This commit is contained in:
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Boundary Tracer</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>
|
||||
.polygon-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 4px 0;
|
||||
padding: 4px 6px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.polygon-swatch {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.polygon-item .polygon-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.polygon-item button {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 2px 7px;
|
||||
font-size: 10px;
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.polygon-item button:hover {
|
||||
background: #b02a37;
|
||||
}
|
||||
|
||||
.draw-hint {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
margin: 4px 0 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d !important;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #565e64 !important;
|
||||
}
|
||||
|
||||
.controls input[type="text"] {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.overlay-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.overlay-row button {
|
||||
flex: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.overlay-opacity-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.overlay-opacity-row label {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.overlay-opacity-row input[type="range"] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.overlay-warning {
|
||||
font-size: 10px;
|
||||
color: #a15c00;
|
||||
background: #fff3cd;
|
||||
border-radius: 4px;
|
||||
padding: 5px 6px;
|
||||
margin: 4px 0 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<button class="hamburger-button" id="hamburgerButton" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="controls" id="controls">
|
||||
<a href="/" class="btn-back">← Back</a>
|
||||
<h3>Boundary Tracer</h3>
|
||||
<p style="font-size:11px;color:#666;margin-bottom:8px;">
|
||||
Open a reference map (e.g. thevillages.com/map) in another tab, then
|
||||
hand-trace its boundary here by clicking vertices. Tracing itself
|
||||
never fetches from any third-party site — you're just drawing on
|
||||
our own map based on what you see elsewhere. The optional overlay
|
||||
layer below is the exception: it fetches tiles live from whatever
|
||||
URL you give it.
|
||||
</p>
|
||||
|
||||
<h3>Overlay layer (optional)</h3>
|
||||
<p class="overlay-warning">
|
||||
This fetches tiles directly from the URL you paste in. Check that
|
||||
source's Terms of Use permit automated/robotic access first —
|
||||
thevillages.com's ToS, for example, explicitly prohibit it, so
|
||||
don't point this at their tile servers.
|
||||
</p>
|
||||
<p style="font-size:10px;color:#666;margin:-2px 0 6px;line-height:1.4;">
|
||||
Accepts a standard <code>{z}/{x}/{y}</code> tile URL, or the base
|
||||
URL of an ArcGIS tiled MapServer (e.g. <code>.../MapServer</code>)
|
||||
— its own tiling scheme (including a plain-geographic/WGS84 grid)
|
||||
is read automatically from that service's metadata.
|
||||
</p>
|
||||
<input type="text" id="overlayUrlInput" placeholder="https://.../{z}/{x}/{y}.png or .../MapServer">
|
||||
<div class="overlay-row">
|
||||
<button id="addOverlayBtn">Add overlay</button>
|
||||
<button id="removeOverlayBtn" class="btn-secondary" disabled>Remove</button>
|
||||
</div>
|
||||
<div class="overlay-opacity-row" id="overlayOpacityRow" style="display:none;">
|
||||
<label for="overlayOpacitySlider">Opacity</label>
|
||||
<input type="range" id="overlayOpacitySlider" min="0" max="100" value="70">
|
||||
</div>
|
||||
|
||||
<button id="newPolygonBtn" style="margin-top:12px;">New polygon</button>
|
||||
<button id="undoPointBtn" class="btn-secondary" disabled>Undo last point</button>
|
||||
<button id="finishPolygonBtn" disabled>Finish polygon</button>
|
||||
<button id="cancelPolygonBtn" class="btn-secondary" disabled>Cancel</button>
|
||||
<p class="draw-hint" id="drawHint">Click "New polygon" to start tracing.</p>
|
||||
|
||||
<h3 style="margin-top:10px;">Polygons</h3>
|
||||
<div id="polygonList"><p style="font-size:11px;color:#999;">None yet.</p></div>
|
||||
|
||||
<button id="saveBtn" style="background:#28a745;margin-top:12px;">Save to server</button>
|
||||
<button id="downloadBtn" class="btn-secondary">Download GeoJSON</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-ui.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='boundary-tracer.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>City Boundaries Report</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>
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.legend-item input[type="checkbox"] {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.legend-swatch {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.legend-count {
|
||||
color: #888;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.no-data-msg {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin: 6px 0 10px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
flex: 1;
|
||||
padding: 6px 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
border: 1px solid #ccc;
|
||||
background: #f8f9fa;
|
||||
color: #555;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: #6f42c1;
|
||||
color: white;
|
||||
border-color: #6f42c1;
|
||||
}
|
||||
|
||||
.view-toggle .view-btn {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
#boundaryLog {
|
||||
display: none;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
background: #1a1a2e;
|
||||
color: #ddd;
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
margin-top: 6px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.boundary-meta {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<button class="hamburger-button" id="hamburgerButton" aria-label="Toggle menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
|
||||
<div class="overlay" id="overlay"></div>
|
||||
|
||||
<div class="controls" id="controls">
|
||||
<a href="/reports" class="btn-back">← Back to Reports</a>
|
||||
<h3>City Boundaries</h3>
|
||||
<p style="font-size:11px;color:#666;margin-bottom:8px;">
|
||||
County source data vs matched OSM addresses.
|
||||
</p>
|
||||
|
||||
<div class="file-input-group">
|
||||
<label for="countySelect" style="display:block;margin-bottom:3px;font-weight:500;font-size:11px;">County:</label>
|
||||
<select id="countySelect">
|
||||
{% for county in counties %}
|
||||
<option value="{{ county.id }}" {% if county.id not in available_counties %}disabled{% endif %}>
|
||||
{{ county.name }}{% if county.id not in available_counties %} (no data){% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="file-input-group">
|
||||
<label for="fieldSelect" style="display:block;margin-bottom:3px;font-weight:500;font-size:11px;">Compare:</label>
|
||||
<select id="fieldSelect">
|
||||
<option value="postal_community" selected>Postal community (USPS mailing city)</option>
|
||||
<option value="city">City (legal/municipal jurisdiction)</option>
|
||||
</select>
|
||||
<span class="hint" style="font-size:10px;color:#999;">These two often differ — a parcel can be legally inside one city but addressed to another for mail.</span>
|
||||
</div>
|
||||
|
||||
<div class="view-toggle" id="viewToggle">
|
||||
<button class="view-btn active" data-view="agreement">Agreement Status</button>
|
||||
<button class="view-btn" data-view="city-names">City Names</button>
|
||||
<button class="view-btn" data-view="boundary-check">Boundary Check</button>
|
||||
</div>
|
||||
|
||||
<div id="agreementSection">
|
||||
<h3>Legend</h3>
|
||||
<div id="legend">
|
||||
<label class="legend-item" data-status="mismatch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#dc3545;"></span>
|
||||
<span class="legend-label">Mismatch</span>
|
||||
<span class="legend-count" id="count-mismatch">–</span>
|
||||
</label>
|
||||
<label class="legend-item" data-status="county_only">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#fd7e14;"></span>
|
||||
<span class="legend-label">Missing in OSM</span>
|
||||
<span class="legend-count" id="count-county_only">–</span>
|
||||
</label>
|
||||
<label class="legend-item" data-status="osm_only">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#17a2b8;"></span>
|
||||
<span class="legend-label">Missing in county</span>
|
||||
<span class="legend-count" id="count-osm_only">–</span>
|
||||
</label>
|
||||
<label class="legend-item" data-status="both_missing">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#6c757d;"></span>
|
||||
<span class="legend-label">Both missing</span>
|
||||
<span class="legend-count" id="count-both_missing">–</span>
|
||||
</label>
|
||||
<label class="legend-item" data-status="match">
|
||||
<input type="checkbox">
|
||||
<span class="legend-swatch" style="background:#28a745;"></span>
|
||||
<span class="legend-label">Match</span>
|
||||
<span class="legend-count" id="count-match">–</span>
|
||||
</label>
|
||||
</div>
|
||||
<p style="font-size:10px;color:#999;margin-top:4px;">"Match" is unchecked by default (usually the majority of points) — check it to see agreeing addresses too.</p>
|
||||
</div>
|
||||
|
||||
<div id="cityNameSection" style="display:none;">
|
||||
<p style="font-size:11px;color:#666;margin-bottom:8px;">
|
||||
What the source data thinks each address's city is — not an agreement check.
|
||||
Click any point for the exact name.
|
||||
</p>
|
||||
<div class="file-input-group">
|
||||
<label for="citySourceSelect" style="display:block;margin-bottom:3px;font-weight:500;font-size:11px;">Color by:</label>
|
||||
<select id="citySourceSelect">
|
||||
<option value="county" selected>County (source data)</option>
|
||||
<option value="osm">OpenStreetMap</option>
|
||||
</select>
|
||||
</div>
|
||||
<h3>Cities</h3>
|
||||
<div id="cityLegend"><!-- filled dynamically --></div>
|
||||
</div>
|
||||
|
||||
<div id="boundarySection" style="display:none;">
|
||||
<p style="font-size:11px;color:#666;margin-bottom:8px;">
|
||||
Point-in-polygon check against the traced/imported boundary at
|
||||
<code>map-checker/boundary.geojson</code> (see the Boundary
|
||||
Tracer tool) — precise, but only as good as that boundary.
|
||||
Independent of the county/OSM tag comparison above; spans all
|
||||
configured counties at once rather than one at a time.
|
||||
</p>
|
||||
|
||||
<button id="runBoundaryCheckBtn">Run boundary check</button>
|
||||
<div class="boundary-meta" id="boundaryMeta"></div>
|
||||
<pre id="boundaryLog"></pre>
|
||||
|
||||
<h3 style="margin-top:10px;">Legend</h3>
|
||||
<div id="boundaryLegend">
|
||||
<label class="legend-item" data-flag="__outline__">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:none;border-color:#6f42c1;border-width:2px;"></span>
|
||||
<span class="legend-label">Traced boundary</span>
|
||||
</label>
|
||||
<label class="legend-item" data-flag="inside_but_not_labeled">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#dc3545;"></span>
|
||||
<span class="legend-label">Inside, not labeled expected city</span>
|
||||
<span class="legend-count" id="count-inside_but_not_labeled">–</span>
|
||||
</label>
|
||||
<label class="legend-item" data-flag="outside_but_labeled">
|
||||
<input type="checkbox" checked>
|
||||
<span class="legend-swatch" style="background:#fd7e14;"></span>
|
||||
<span class="legend-label">Outside, labeled expected city</span>
|
||||
<span class="legend-count" id="count-outside_but_labeled">–</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="no-data-msg" id="boundaryNoData" style="display:none;">
|
||||
No boundary check has been run yet — click "Run boundary check" above.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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-ui.js') }}"></script>
|
||||
<script>
|
||||
const AVAILABLE_COUNTIES = {{ available_counties | tojson }};
|
||||
const PINNED_CITIES = {{ pinned_cities | tojson }};
|
||||
const IS_AUTHENTICATED = {{ 'true' if current_user else 'false' }};
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='report-map.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -361,6 +361,8 @@
|
||||
<a href="/counties" class="btn-topbar">Counties</a>
|
||||
<a href="/exceptions" class="btn-topbar">Street Exceptions</a>
|
||||
<a href="/exclusions" class="btn-topbar">Exclusions</a>
|
||||
<a href="/reports" class="btn-topbar">Reports</a>
|
||||
<a href="/map-checker" class="btn-topbar">Boundary Tracer</a>
|
||||
<a href="/map" class="btn-topbar purple">Open Map Viewer</a>
|
||||
<div class="topbar-sep"></div>
|
||||
{% if current_user %}
|
||||
@@ -488,6 +490,13 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step-num">5</div>
|
||||
<div class="step-label">Generate City Boundaries Report</div>
|
||||
<div class="step-actions">
|
||||
<button class="btn-run" onclick="runScript('generate-city-report')">Run</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /workflows -->
|
||||
|
||||
+2
-198
@@ -5,53 +5,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>
|
||||
* {
|
||||
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: 10px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||||
min-width: 175px;
|
||||
max-height: calc(100vh - 20px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.controls h3 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.controls label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 0;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -71,54 +26,6 @@
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.controls input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.controls button {
|
||||
width: 100%;
|
||||
padding: 7px;
|
||||
margin-top: 7px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.controls button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.controls button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 7px;
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.status.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-input-group {
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 8px;
|
||||
@@ -160,115 +67,11 @@
|
||||
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);
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 768px) {
|
||||
.hamburger-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
padding: 5px 10px;
|
||||
background: #1a1a2e;
|
||||
color: #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
.btn-back:hover { background: #2d2d4e; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -380,6 +183,7 @@
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reports — OSM Import Tools</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #eef0f3;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.topbar-sep {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #ffffff30;
|
||||
}
|
||||
|
||||
.btn-topbar {
|
||||
padding: 5px 12px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #ffffff18;
|
||||
color: #ddd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-topbar:hover { background: #ffffff30; }
|
||||
|
||||
.content {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 20px;
|
||||
}
|
||||
|
||||
.content h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
display: block;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
|
||||
padding: 16px 18px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.report-card:hover {
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.report-card h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #6f42c1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.report-card p {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="topbar">
|
||||
<h1>OSM Import Tools</h1>
|
||||
<div class="topbar-sep"></div>
|
||||
<a href="/" class="btn-topbar">← Back</a>
|
||||
<div style="flex:1"></div>
|
||||
{% if current_user %}
|
||||
<span style="font-size:11px;color:#888;">{{ current_user }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<h2>Reports</h2>
|
||||
<a class="report-card" href="/reports/city-boundaries">
|
||||
<h3>City Boundaries</h3>
|
||||
<p>Checks addr:city agreement between the county source data and OpenStreetMap for
|
||||
matched addresses, plotted on a map and color-coded by agreement status.</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user