Add basic MapBox integration.

It's just a demo at this point.
This commit is contained in:
Eli Ribble 2025-11-13 17:48:38 +00:00
parent fc40309dd0
commit a6fe8f9027
No known key found for this signature in database
4 changed files with 29 additions and 5 deletions

View file

@ -81,6 +81,7 @@ type ContentDashboard struct {
CountInspections int
CountMosquitoSources int
CountServiceRequests int
MapboxToken string
LastSync *time.Time
Org string
RecentRequests []ServiceRequestSummary
@ -214,6 +215,7 @@ func htmlDashboard(ctx context.Context, w http.ResponseWriter, user *models.User
CountMosquitoSources: int(sourceCount),
CountServiceRequests: int(serviceCount),
LastSync: lastSync,
MapboxToken: MapboxToken,
Org: org.Name.MustGet(),
RecentRequests: requests,
User: userContent,

View file

@ -18,7 +18,7 @@ import (
var sessionManager *scs.SessionManager
var BaseURL, ClientID, ClientSecret, Environment string
var BaseURL, ClientID, ClientSecret, Environment, MapboxToken string
func main() {
ClientID = os.Getenv("ARCGIS_CLIENT_ID")
@ -49,6 +49,11 @@ func main() {
slog.Error("ENVIRONMENT should be either DEVELOPMENT or PRODUCTION", slog.String("ENVIRONMENT", Environment))
os.Exit(2)
}
MapboxToken = os.Getenv("MAPBOX_TOKEN")
if MapboxToken == "" {
slog.Error("You must specify a non-empty MAPBOX_TOKEN")
os.Exit(1)
}
pg_dsn := os.Getenv("POSTGRES_DSN")
if pg_dsn == "" {
slog.Error("You must specify a non-empty POSTGRES_DSN")

View file

@ -8,9 +8,7 @@
<link href="/static/vendor/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
{{template "style" .}}
</style>
{{block "extraheader" .}} {{end}}
</head>
<body>
{{if .User}}

View file

@ -1,7 +1,24 @@
{{template "authenticated.html" .}}
{{define "title"}}Dash{{end}}
{{define "style"}}
{{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>
function onLoad() {
console.log("Setting up the map...");
mapboxgl.accessToken = {{ .MapboxToken }};
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9, // starting zoom
});
console.log("done.");
}
window.addEventListener("load", onLoad);
</script>
<style>
body {
background-color: #f8f9fa;
}
@ -58,6 +75,7 @@ body {
font-size: 2rem;
font-weight: bold;
}
</style>
{{end}}
{{define "content"}}
<div class="container dashboard-container">
@ -151,6 +169,7 @@ body {
<div class="row">
<div class="col-12">
<div class="map-container" id="mosquito-heatmap">
<div id='map' style='width: 400px; height: 300px;'></div>
<div class="text-center">
<i class="fas fa-map-marked-alt fa-4x text-muted mb-3"></i>
<h4>Mosquito Activity Heatmap</h4>