jlelse
/
GoBlog
mirror of https://github.com/jlelse/GoBlog
1
Fork 0
Code Packages Releases Activity

On map page load locations and tracks using seperate JSON request

This commit is contained in:
Jan-Lukas Else 2022-07-03 10:42:26 +02:00
parent a9c9c6bc46
commit 315fd45955
3 changed files with 152 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
geoMap.go
View File

@ -2,7 +2,11 @@ package main
import (
"encoding/json"
"io"
"net/http"
"go.goblog.app/app/pkgs/bufferpool"
"go.goblog.app/app/pkgs/contenttype"
)
const defaultGeoMapPath = "/map"
@ -13,7 +17,7 @@ func (a *goBlog) serveGeoMap(w http.ResponseWriter, r *http.Request) {
mapPath := bc.getRelativePath(defaultIfEmpty(bc.Map.Path, defaultGeoMapPath))
canonical := a.getFullAddress(mapPath)
allPostsWithLocation, err := a.getPosts(&postsRequestConfig{
allPostsWithLocation, err := a.db.countPosts(&postsRequestConfig{
blog: blog,
status: statusPublished,
parameters: []string{a.cfg.Micropub.LocationParam, gpxParameter},
@ -24,7 +28,7 @@ func (a *goBlog) serveGeoMap(w http.ResponseWriter, r *http.Request) {
return
}
if len(allPostsWithLocation) == 0 {
if allPostsWithLocation == 0 {
a.render(w, r, a.renderGeoMap, &renderData{
Canonical: canonical,
Data: &geoMapRenderData{
@ -34,10 +38,32 @@ func (a *goBlog) serveGeoMap(w http.ResponseWriter, r *http.Request) {
return
}
type templateLocation struct {
Lat float64
Lon float64
Post string
a.render(w, r, a.renderGeoMap, &renderData{
Canonical: canonical,
Data: &geoMapRenderData{
locations: "url:" + canonical + geoMapLocationsSubpath,
tracks: "url:" + canonical + geoMapTracksSubpath,
attribution: a.getMapAttribution(),
minZoom: a.getMinZoom(),
maxZoom: a.getMaxZoom(),
},
})
}
const geoMapTracksSubpath = "/tracks.json"
func (a *goBlog) serveGeoMapTracks(w http.ResponseWriter, r *http.Request) {
blog, _ := a.getBlog(r)
allPostsWithTracks, err := a.getPosts(&postsRequestConfig{
blog: blog,
status: statusPublished,
parameters: []string{gpxParameter},
withOnlyParameters: []string{gpxParameter},
})
if err != nil {
a.serveError(w, r, err.Error(), http.StatusInternalServerError)
return
}
type templateTrack struct {
@ -46,16 +72,8 @@ func (a *goBlog) serveGeoMap(w http.ResponseWriter, r *http.Request) {
Post string
}
var locations []*templateLocation
var tracks []*templateTrack
for _, p := range allPostsWithLocation {
for _, g := range a.geoURIs(p) {
locations = append(locations, &templateLocation{
Lat: g.Latitude,
Lon: g.Longitude,
Post: p.Path,
})
}
for _, p := range allPostsWithTracks {
if t, err := a.getTrack(p); err == nil && t != nil {
tracks = append(tracks, &templateTrack{
Paths: t.Paths,
@ -65,34 +83,57 @@ func (a *goBlog) serveGeoMap(w http.ResponseWriter, r *http.Request) {
}
}
locationsJson := ""
if len(locations) > 0 {
locationsJsonBytes, err := json.Marshal(locations)
if err != nil {
a.serveError(w, r, err.Error(), http.StatusInternalServerError)
return
}
locationsJson = string(locationsJsonBytes)
buf := bufferpool.Get()
defer bufferpool.Put(buf)
err = json.NewEncoder(buf).Encode(tracks)
if err != nil {
a.serveError(w, r, "", http.StatusInternalServerError)
return
}
tracksJson := ""
if len(tracks) > 0 {
tracksJsonBytes, err := json.Marshal(tracks)
if err != nil {
a.serveError(w, r, err.Error(), http.StatusInternalServerError)
return
}
tracksJson = string(tracksJsonBytes)
}
a.render(w, r, a.renderGeoMap, &renderData{
Canonical: canonical,
Data: &geoMapRenderData{
locations: locationsJson,
tracks: tracksJson,
attribution: a.getMapAttribution(),
minZoom: a.getMinZoom(),
maxZoom: a.getMaxZoom(),
},
})
w.Header().Set(contentType, contenttype.JSONUTF8)
_, _ = io.Copy(w, buf)
}
const geoMapLocationsSubpath = "/locations.json"
func (a *goBlog) serveGeoMapLocations(w http.ResponseWriter, r *http.Request) {
blog, _ := a.getBlog(r)
allPostsWithLocations, err := a.getPosts(&postsRequestConfig{
blog: blog,
status: statusPublished,
parameters: []string{a.cfg.Micropub.LocationParam},
withOnlyParameters: []string{a.cfg.Micropub.LocationParam},
})
if err != nil {
a.serveError(w, r, err.Error(), http.StatusInternalServerError)
return
}
type templateLocation struct {
Lat float64
Lon float64
Post string
}
var locations []*templateLocation
for _, p := range allPostsWithLocations {
for _, g := range a.geoURIs(p) {
locations = append(locations, &templateLocation{
Lat: g.Latitude,
Lon: g.Longitude,
Post: p.Path,
})
}
}
buf := bufferpool.Get()
defer bufferpool.Put(buf)
err = json.NewEncoder(buf).Encode(locations)
if err != nil {
a.serveError(w, r, "", http.StatusInternalServerError)
return
}
w.Header().Set(contentType, contenttype.JSONUTF8)
_, _ = io.Copy(w, buf)
}

5
httpRouters.go
View File

@ -409,8 +409,11 @@ func (a *goBlog) blogBlogrollRouter(conf *configBlog) func(r chi.Router) {
func (a *goBlog) blogGeoMapRouter(conf *configBlog) func(r chi.Router) {
return func(r chi.Router) {
if mc := conf.Map; mc != nil && mc.Enabled {
r.Use(a.privateModeHandler, a.cacheMiddleware)
mapPath := conf.getRelativePath(defaultIfEmpty(mc.Path, defaultGeoMapPath))
r.With(a.privateModeHandler, a.cacheMiddleware).Get(mapPath, a.serveGeoMap)
r.Get(mapPath, a.serveGeoMap)
r.Get(mapPath+geoMapTracksSubpath, a.serveGeoMapTracks)
r.Get(mapPath+geoMapLocationsSubpath, a.serveGeoMapLocations)
}
}
}

94
templates/assets/js/geomap.js
View File

@ -1,25 +1,39 @@
(function () {
function randomColor() {
// Generate a random but valid HEX color value
let color = '#'
for (let i = 0; i < 3; i++) {
color += Math.floor(Math.random() * 256).toString(16)
color += Math.floor(10 + Math.random() * 246).toString(16)
}
return color
}
function getMapJson(data, callback) {
if (!data) {
return
} else if (data.startsWith('url:')) {
let url = data.substring(4)
let req = new XMLHttpRequest()
req.open('GET', url)
req.onload = function () {
if (req.status == 200) {
let parsed = JSON.parse(req.responseText)
if (parsed && parsed.length > 0) {
callback(parsed)
}
}
}
req.send()
return
} else {
callback(JSON.parse(data))
return
}
}
function loadMap() {
// Get the map element
let mapEl = document.getElementById('map')
// Read the map data
// Map page
let locations = !mapEl.dataset.locations ? [] : JSON.parse(mapEl.dataset.locations)
let tracks = !mapEl.dataset.tracks ? [] : JSON.parse(mapEl.dataset.tracks)
// Post map
let paths = !mapEl.dataset.paths ? [] : JSON.parse(mapEl.dataset.paths)
let points = !mapEl.dataset.points ? [] : JSON.parse(mapEl.dataset.points)
// Create Leaflet map
let map = L.map('map', {
minZoom: mapEl.dataset.minzoom,
@ -31,35 +45,53 @@
attribution: mapEl.dataset.attribution,
}).addTo(map)
// Add features to the map
// Load map features
let features = []
locations.forEach(loc => {
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
window.open(loc.Post, '_blank').focus()
}))
})
tracks.forEach(track => {
track.Paths.forEach(path => {
// Use random color on map page for paths to better differentiate
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).addTo(map).on('click', function () {
window.open(track.Post, '_blank').focus()
function fitFeatures() {
// Make the map fit the features
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
}
// Map page
getMapJson(mapEl.dataset.locations, locations => {
locations.forEach(loc => {
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
window.open(loc.Post, '_blank').focus()
}))
})
track.Points.forEach(point => {
features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
window.open(track.Post, '_blank').focus()
}))
fitFeatures()
})
getMapJson(mapEl.dataset.tracks, tracks => {
tracks.forEach(track => {
track.Paths.forEach(path => {
// Use random color on map page for paths to better differentiate
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).addTo(map).on('click', function () {
window.open(track.Post, '_blank').focus()
}))
})
track.Points.forEach(point => {
features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
window.open(track.Post, '_blank').focus()
}))
})
})
fitFeatures()
})
paths.forEach(path => {
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map))
// Post map
getMapJson(mapEl.dataset.paths, paths => {
paths.forEach(path => {
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map))
})
fitFeatures()
})
points.forEach(point => {
features.push(L.marker([point.Lat, point.Lon]).addTo(map))
getMapJson(mapEl.dataset.points, points => {
points.forEach(point => {
features.push(L.marker([point.Lat, point.Lon]).addTo(map))
})
fitFeatures()
})
// Make the map fit the features
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
}
// Add Leaflet to the page