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

Show a map of the user's current location for setting a pool.

Browse source
This commit is contained in:
Eli Ribble 2026-01-08 23:20:41 +00:00
parent 12ad9fa483
commit 0cd6697fd4
No known key found for this signature in database
5 changed files with 239 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

6
public-report/template/component/location-geocode-header.html
View file

@ -36,9 +36,6 @@
}
</style>
<script>
// Replace with your actual Mapbox access token
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
// Display suggestions in the dropdown
function displaySuggestions(suggestions) {
const suggestionsContainer = document.getElementById('suggestions');
@ -85,6 +82,9 @@ function displaySuggestions(suggestions) {
// Fetch suggestions from Mapbox API
async function fetchGeocodingSuggestions(query) {
// Replace with your actual Mapbox access token
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
try {
const url = `https://api.mapbox.com/search/geocode/v6/forward?q=${encodeURIComponent(query)}&access_token=${MAPBOX_ACCESS_TOKEN}`;

103
public-report/template/component/map-header.html Normal file
View file

@ -0,0 +1,103 @@
{{define "map-header"}}
<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>
function onLoadMap() {
const MAPBOX_ACCESS_TOKEN = '{{.MapboxToken}}';
console.log("Setting up the map...");
mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
const map = new mapboxgl.Map({
container: "map",
center: {
lat: 36.2,
lng: -119.2
},
style: 'mapbox://styles/mapbox/streets-v12', // style URL
zoom: 15,
});
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true,
showUserHeading: true
}));
map.on("load", function() {
console.log("Map post-load...");
updateMapWithLocation(map);
console.log("Map post-load done.");
});
console.log("Map init done.");
}
function updateMapWithLocation(map) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// on success
function(position) {
console.log("Got location", position);
map.jumpTo({
center: {
lng: position.coords.longitude,
lat: position.coords.latitude,
},
zoom: 14,
});
const marker = new mapboxgl.Marker({
color: "#FF0000",
draggable: true
}).setLngLat({
lat: position.coords.latitude,
lng: position.coords.longitude,
}).addTo(map);
},
// on error
function(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
console.log("permission denied");
break;
case error.POSITION_UNAVAILABLE:
console.log("location unavailable");
break;
case error.TIMEOUT:
console.log("request timed out");
break;
}
},
// options
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0
}
);
} else {
console.log("location is not supported");
}
}
window.addEventListener("load", onLoadMap);
</script>
<style>
.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;
}
</style>
{{end}}

84
public-report/template/component/map.html Normal file
View file

@ -0,0 +1,84 @@
{{define "map"}}
<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>
const geojson = JSON.parse({{.GeoJSON}})
function addMarkers(map, markers) {
for (let i = 0; i < markers.length; i++) {
let marker = markers[i];
marker.addTo(map);
}
}
function mapMarkers() {
const markers = [
{{ range .Markers }}
new mapboxgl.Marker().setLngLat([{{.LatLng.Lng}}, {{.LatLng.Lat}}])
{{end}}
];
return markers;
}
function onLoad() {
console.log("Setting up the map...", geojson);
mapboxgl.accessToken = {{ .MapboxToken }};
const map = new mapboxgl.Map({
container: "map",
center: [{{.Center.Lng}}, {{.Center.Lat}}],
style: 'mapbox://styles/mapbox/streets-v12', // style URL
zoom: {{.Zoom}},
});
map.on("load", function() {
console.log("Map post-load...");
addMarkers(map, mapMarkers());
const sourceId = 'h3-hexes';
const layerId = 'h3-hexes-layer';
let source = map.getSource(sourceId);
if (!source) {
map.addSource(sourceId, {
type: 'geojson',
data: geojson
});
map.addLayer({
id: layerId,
source: sourceId,
type: 'fill',
interactive: false,
paint: {
'fill-color': '#F00000',
'fill-opacity': 0.3
}
});
source = map.getSource(sourceId);
}
source.setData(geojson);
console.log("Map post-load done.");
});
console.log("Map init done.");
}
window.addEventListener("load", onLoad);
</script>
<style>
.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;
}
</style>
{{end}}