Create new project design plans

This commit is contained in:
zyphlar
2026-08-28 14:23:26 -07:00
parent a7d6db8177
commit 7ce73f19c5
22 changed files with 2682 additions and 263 deletions
+173
View File
@@ -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">&#8592; 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>
+243
View File
@@ -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">&#8592; 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>
+9
View File
@@ -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
View File
@@ -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>
+115
View File
@@ -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">&#8592; 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>