Eli Ribble
eb24d871d0
This is just to get the structure of what I need to integrate with Mapbox to query a tile server and try to find point locations. In this case, I'm getting the airport locations and barely showing them. This saves me time understanding the pertinent APIs. I need to adapt this to get our mosquito reports instead.
345 lines
12 KiB
HTML
345 lines
12 KiB
HTML
{{template "base.html" .}}
|
|
|
|
{{define "title"}}Status{{end}}
|
|
{{define "extraheader"}}
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.js'></script>
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v3.17.0-beta.1/mapbox-gl.css' rel='stylesheet' />
|
|
<script src="/static/js/geocode.js"></script>
|
|
<script src="/static/js/location.js"></script>
|
|
<script src="/static/js/map.js"></script>
|
|
<style>
|
|
.clickable-row {
|
|
cursor: pointer;
|
|
transition: background-color 0.15s ease-in-out;
|
|
}
|
|
.clickable-row:hover {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
}
|
|
.map-container {
|
|
background-color: #e9ecef;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
|
height: 500px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
#map {
|
|
height: 500px;
|
|
width:100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
#map img {
|
|
max-width: none;
|
|
min-width: 0px;
|
|
height: auto;
|
|
}
|
|
.report-type-badge {
|
|
font-size: 0.85rem;
|
|
}
|
|
.search-box {
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.map-container {
|
|
height: 300px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
|
|
var markers = [];
|
|
// Because features come from tiled vector data,
|
|
// feature geometries may be split
|
|
// or duplicated across tile boundaries.
|
|
// As a result, features may appear
|
|
// multiple times in query results.
|
|
function getUniqueFeatures(features, comparatorProperty) {
|
|
const uniqueIds = new Set();
|
|
const uniqueFeatures = [];
|
|
for (const feature of features) {
|
|
const id = feature.properties[comparatorProperty];
|
|
if (!uniqueIds.has(id)) {
|
|
uniqueIds.add(id);
|
|
uniqueFeatures.push(feature);
|
|
}
|
|
}
|
|
return uniqueFeatures;
|
|
}
|
|
function renderListings(features) {
|
|
console.log("render listings", features);
|
|
|
|
const filterEl = document.getElementById('feature-filter');
|
|
const listingEl = document.getElementById('feature-listing');
|
|
const empty = document.createElement('p');
|
|
// Clear any existing listings
|
|
listingEl.innerHTML = '';
|
|
if (features.length) {
|
|
for (const feature of features) {
|
|
const itemLink = document.createElement('a');
|
|
const label = `${feature.properties.name} (${feature.properties.abbrev})`;
|
|
itemLink.href = feature.properties.wikipedia;
|
|
itemLink.target = '_blank';
|
|
itemLink.textContent = label;
|
|
itemLink.addEventListener('mouseover', () => {
|
|
// Highlight corresponding feature on the map
|
|
popup
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.setText(label)
|
|
.addTo(map);
|
|
});
|
|
listingEl.appendChild(itemLink);
|
|
}
|
|
|
|
// Show the filter input
|
|
filterEl.parentNode.style.display = 'block';
|
|
} else if (features.length === 0 && filterEl.value !== '') {
|
|
empty.textContent = 'No results found';
|
|
listingEl.appendChild(empty);
|
|
} else {
|
|
empty.textContent = 'Drag the map to populate results';
|
|
listingEl.appendChild(empty);
|
|
|
|
// Hide the filter input
|
|
filterEl.parentNode.style.display = 'none';
|
|
|
|
// remove features filter
|
|
map.setFilter('airport', ['has', 'abbrev']);
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const filterEl = document.getElementById('feature-filter');
|
|
const listingEl = document.getElementById('feature-listing');
|
|
mapLoad(MAPBOX_ACCESS_TOKEN).then((map) => {
|
|
map.addSource('airports', {
|
|
'type': 'vector',
|
|
'url': 'mapbox://mapbox.04w69w5j',
|
|
});
|
|
map.addLayer({
|
|
'id': 'airport',
|
|
'source': 'airports',
|
|
'source-layer': 'ne_10m_airports',
|
|
'type': 'circle',
|
|
'paint': {
|
|
'circle-color': '#4264fb',
|
|
'circle-radius': 4,
|
|
'circle-stroke-width': 2,
|
|
'circle-stroke-color': '#ffffff'
|
|
}
|
|
});
|
|
map.on('movestart', () => {
|
|
// reset features filter as the map starts moving
|
|
map.setFilter('airport', ['has', 'abbrev']);
|
|
});
|
|
map.on('moveend', () => {
|
|
const features = map.queryRenderedFeatures({ layers: ['airport'] });
|
|
|
|
if (features) {
|
|
const uniqueFeatures = getUniqueFeatures(features, 'iata_code');
|
|
// Populate features for the listing overlay.
|
|
renderListings(uniqueFeatures);
|
|
|
|
// Clear the input container
|
|
filterEl.value = '';
|
|
|
|
// Store the current features in sn `airports` variable to
|
|
// later use for filtering on `keyup`.
|
|
airports = uniqueFeatures;
|
|
}
|
|
});
|
|
map.on('mousemove', 'airport', (e) => {
|
|
// Change the cursor style as a UI indicator.
|
|
map.getCanvas().style.cursor = 'pointer';
|
|
|
|
// Populate the popup and set its coordinates based on the feature.
|
|
const feature = e.features[0];
|
|
popup
|
|
.setLngLat(feature.geometry.coordinates)
|
|
.setText(
|
|
`${feature.properties.name} (${feature.properties.abbrev})`
|
|
)
|
|
.addTo(map);
|
|
});
|
|
map.on('mouseleave', 'airport', () => {
|
|
map.getCanvas().style.cursor = '';
|
|
popup.remove();
|
|
});
|
|
getGeolocation({
|
|
enableHighAccuracy: true,
|
|
timeout: 10000,
|
|
maximumAge: 0
|
|
}).then(position => {
|
|
mapJumpTo({
|
|
center: {
|
|
lng: position.coords.longitude,
|
|
lat: position.coords.latitude,
|
|
},
|
|
zoom: 8,
|
|
});
|
|
}).catch(error => {
|
|
console.error("Failed to get position", error);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|
|
{{define "content"}}
|
|
<div class="container my-4">
|
|
<!-- Search Box -->
|
|
<div class="card search-box mb-4">
|
|
<div class="card-body">
|
|
<form class="row g-3 align-items-center">
|
|
<div class="col-md-9">
|
|
<label for="addressSearch" class="visually-hidden">Search by address</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
<input type="text" class="form-control form-control-lg" id="addressSearch"
|
|
placeholder="Enter an address, neighborhood, or zip code">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="mosquitoNuisance" checked>
|
|
<label class="form-check-label" for="mosquitoNuisance">Mosquito Nuisance</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="greenPool" checked>
|
|
<label class="form-check-label" for="greenPool">Green Pool</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="checkbox" id="quickReport" checked>
|
|
<label class="form-check-label" for="quickReport">Quick Report</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Section -->
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>Reports Map</h5>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="map-container" id="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
<div class="map-overlay">
|
|
<fieldset>
|
|
<input id="feature-filter" type="text" placeholder="Filter results by name">
|
|
</fieldset>
|
|
<div id="feature-listing" class="listing"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results Section -->
|
|
<div class="card">
|
|
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0"><i class="fas fa-list me-2"></i>Reports Near You</h5>
|
|
<span class="badge bg-light text-dark">15 Reports Found</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col">Report ID</th>
|
|
<th scope="col">Reported</th>
|
|
<th scope="col">Type</th>
|
|
<th scope="col">Address</th>
|
|
<th scope="col">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample data rows - these would be generated dynamically -->
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12345'">
|
|
<td><strong>#12345</strong></td>
|
|
<td>2 days ago</td>
|
|
<td><span class="badge bg-danger report-type-badge">Mosquito Nuisance</span></td>
|
|
<td>456 Elm Street, Anytown, USA</td>
|
|
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12346'">
|
|
<td><strong>#12346</strong></td>
|
|
<td>3 days ago</td>
|
|
<td><span class="badge bg-success report-type-badge">Green Pool</span></td>
|
|
<td>789 Oak Avenue, Anytown, USA</td>
|
|
<td><span class="badge bg-success">Treated</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12347'">
|
|
<td><strong>#12347</strong></td>
|
|
<td>1 week ago</td>
|
|
<td><span class="badge bg-primary report-type-badge">Mosquito Nuisance</span></td>
|
|
<td>123 Pine Road, Anytown, USA</td>
|
|
<td><span class="badge bg-info">Visited</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12348'">
|
|
<td><strong>#12348</strong></td>
|
|
<td>1 day ago</td>
|
|
<td><span class="badge bg-secondary report-type-badge">Quick Report</span></td>
|
|
<td>567 Maple Lane, Anytown, USA</td>
|
|
<td><span class="badge bg-secondary">In Review</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12349'">
|
|
<td><strong>#12349</strong></td>
|
|
<td>2 weeks ago</td>
|
|
<td><span class="badge bg-success report-type-badge">Green Pool</span></td>
|
|
<td>890 Cedar Court, Anytown, USA</td>
|
|
<td><span class="badge bg-success">Treated</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12350'">
|
|
<td><strong>#12350</strong></td>
|
|
<td>5 days ago</td>
|
|
<td><span class="badge bg-danger report-type-badge">Mosquito Nuisance</span></td>
|
|
<td>234 Birch Blvd, Anytown, USA</td>
|
|
<td><span class="badge bg-warning text-dark">Scheduled</span></td>
|
|
</tr>
|
|
<tr class="clickable-row" onclick="window.location='report-status.html?id=12351'">
|
|
<td><strong>#12351</strong></td>
|
|
<td>3 hours ago</td>
|
|
<td><span class="badge bg-secondary report-type-badge">Quick Report</span></td>
|
|
<td>678 Spruce Street, Anytown, USA</td>
|
|
<td><span class="badge bg-secondary">In Review</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center mb-0">
|
|
<li class="page-item disabled">
|
|
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
|
|
</li>
|
|
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
|
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="#">Next</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Report Button (Fixed at bottom on mobile) -->
|
|
<div class="d-md-none position-fixed bottom-0 start-0 end-0 p-3" style="z-index: 1030;">
|
|
<button class="btn btn-primary btn-lg w-100" data-bs-toggle="modal" data-bs-target="#reportModal">
|
|
<i class="fas fa-plus-circle me-2"></i>Create New Report
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Desktop Create Report Button -->
|
|
<div class="d-none d-md-block text-center mt-4">
|
|
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#reportModal">
|
|
<i class="fas fa-plus-circle me-2"></i>Create New Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{{end}}
|