Add basic MapBox integration.
It's just a demo at this point.
This commit is contained in:
parent
fc40309dd0
commit
a6fe8f9027
4 changed files with 29 additions and 5 deletions
2
html.go
2
html.go
|
|
@ -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,
|
||||
|
|
|
|||
7
main.go
7
main.go
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue