mirror of https://github.com/jlelse/GoBlog
On map page load locations and tracks using seperate JSON request
This commit is contained in:
parent
a9c9c6bc46
commit
315fd45955
129
geoMap.go
129
geoMap.go
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue