Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Bastardize mapbox example to query points

Browse source 
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.
This commit is contained in:
Eli Ribble 2026-01-09 23:52:35 +00:00
parent acaeb2129e
commit eb24d871d0
No known key found for this signature in database
1 changed files with 121 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

123
public-report/template/search.html
View file

@ -51,8 +51,121 @@
<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() {
mapLoad(MAPBOX_ACCESS_TOKEN).then(() => {
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,
@ -63,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function() {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 13,
zoom: 8,
});
}).catch(error => {
console.error("Failed to get position", error);
@ -116,6 +229,12 @@ document.addEventListener('DOMContentLoaded', function() {
<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>