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

Begin sharing code with search page

Browse source 
This includes code for geocoding, building a map, and getting the user's
location.
This commit is contained in:
Eli Ribble 2026-01-09 23:32:39 +00:00
parent 28e4e88794
commit acaeb2129e
No known key found for this signature in database
6 changed files with 216 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,35 +2,73 @@
{{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>
.map-container {
height: 400px;
border-radius: 5px;
margin-bottom: 20px;
}
.clickable-row {
cursor: pointer;
transition: background-color 0.15s ease-in-out;
}
.clickable-row:hover {
background-color: rgba(13, 110, 253, 0.1);
}
.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;
}
}
.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 = [];
document.addEventListener('DOMContentLoaded', function() {
mapLoad(MAPBOX_ACCESS_TOKEN).then(() => {
getGeolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}).then(position => {
mapJumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 13,
});
}).catch(error => {
console.error("Failed to get position", error);
});
});
});
</script>
{{end}}
@ -75,10 +113,8 @@ document.addEventListener('DOMContentLoaded', function() {
<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">
<!-- Replace with actual map embed code -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12000!2d-122.4194!3d37.7749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDQ2JzI5LjYiTiAxMjLCsDI1JzEwLjAiVw!5e0!3m2!1sen!2sus!4v1627309456789!5m2!1sen!2sus"
width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div class="map-container" id="map-container">
<div id="map"></div>
</div>
</div>
</div>