On map page load locations and tracks using seperate JSON request

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 {
+	a.render(w, r, a.renderGeoMap, &renderData{
-		Lat  float64
+		Canonical: canonical,
-		Lon  float64
+		Data: &geoMapRenderData{
-		Post string
+			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 _, p := range allPostsWithTracks {
-		for _, g := range a.geoURIs(p) {
-			locations = append(locations, &templateLocation{
-				Lat:  g.Latitude,
-				Lon:  g.Longitude,
-				Post: p.Path,
-			})
-		}
 		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 := ""
+	buf := bufferpool.Get()
-	if len(locations) > 0 {
+	defer bufferpool.Put(buf)
-		locationsJsonBytes, err := json.Marshal(locations)
+	err = json.NewEncoder(buf).Encode(tracks)
-		if err != nil {
+	if err != nil {
-			a.serveError(w, r, err.Error(), http.StatusInternalServerError)
+		a.serveError(w, r, "", http.StatusInternalServerError)
-			return
+		return
-		}
-		locationsJson = string(locationsJsonBytes)
 	}
-
+	w.Header().Set(contentType, contenttype.JSONUTF8)
-	tracksJson := ""
+	_, _ = io.Copy(w, buf)
-	if len(tracks) > 0 {
+}
-		tracksJsonBytes, err := json.Marshal(tracks)
+
-		if err != nil {
+const geoMapLocationsSubpath = "/locations.json"
-			a.serveError(w, r, err.Error(), http.StatusInternalServerError)
+
-			return
+func (a *goBlog) serveGeoMapLocations(w http.ResponseWriter, r *http.Request) {
-		}
+	blog, _ := a.getBlog(r)
-		tracksJson = string(tracksJsonBytes)
+
-	}
+	allPostsWithLocations, err := a.getPosts(&postsRequestConfig{
-
+		blog:               blog,
-	a.render(w, r, a.renderGeoMap, &renderData{
+		status:             statusPublished,
-		Canonical: canonical,
+		parameters:         []string{a.cfg.Micropub.LocationParam},
-		Data: &geoMapRenderData{
+		withOnlyParameters: []string{a.cfg.Micropub.LocationParam},
-			locations:   locationsJson,
+	})
-			tracks:      tracksJson,
+	if err != nil {
-			attribution: a.getMapAttribution(),
+		a.serveError(w, r, err.Error(), http.StatusInternalServerError)
-			minZoom:     a.getMinZoom(),
+		return
-			maxZoom:     a.getMaxZoom(),
+	}
-		},
+
-	})
+	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)
 }

httpRouters.go

@@ -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)
 		}
 	}
 }

templates/assets/js/geomap.js

@@ -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 => {
+        function fitFeatures() {
-            features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
+            // Make the map fit the features
-                window.open(loc.Post, '_blank').focus()
+            map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
-            }))
+        }
-        })
+
-        tracks.forEach(track => {
+        // Map page
-            track.Paths.forEach(path => {
+        getMapJson(mapEl.dataset.locations, locations => {
-                // Use random color on map page for paths to better differentiate
+            locations.forEach(loc => {
-                features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).addTo(map).on('click', function () {
+                features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
-                    window.open(track.Post, '_blank').focus()
+                    window.open(loc.Post, '_blank').focus()
                 }))
             })
-            track.Points.forEach(point => {
+            fitFeatures()
-                features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
+        })
-                    window.open(track.Post, '_blank').focus()
+        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 => {
+        // Post map
-            features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(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 => {
+        getMapJson(mapEl.dataset.points, points => {
-            features.push(L.marker([point.Lat, point.Lon]).addTo(map))
+            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