Commit ae992d6f authored by zauberstuhl's avatar zauberstuhl

Combine map views and replace GET params with JS

parent ba541771
......@@ -65,12 +65,21 @@ type Location struct {
type Locations []Location
func (locations Locations) LatLngTimeJSON() template.JS {
func (locations Locations) LatLngJSON() template.JS {
var result string
var format = `[%f,%f,{
timestamp:%d,
venue:{
icon:"%s",
name:"%s",
url:"%s",
category:"%s"
}
}],`
for _, location := range locations {
result += fmt.Sprintf(
"{lng:%f,lat:%f,time:%d},",
location.Lng, location.Lat, location.CreatedAt.Unix())
result += fmt.Sprintf(format, location.Lat, location.Lng,
location.CreatedAt.Unix(), location.Icon,
location.Name, location.Url, location.Category)
}
// trim last comma
result = strings.TrimRight(result, ",")
......
......@@ -2,16 +2,8 @@ html, body {
height: 100%;
}
#mapid {
height: calc(100% - 56px);
height: -o-calc(100% - 56px);
height: -webkit-calc(100% - 56px);
height: -moz-calc(100% - 56px);
}
/* breakpoint-lg is 992px */
@media (max-width: 992px) {
.navbar-text {
display: block;
padding-top: .5rem;
padding-bottom: .5rem;
}
height: calc(100% - 96px);
height: -o-calc(100% - 96px);
height: -webkit-calc(100% - 96px);
height: -moz-calc(100% - 96px);
}
{{if gt .CurrentUser.ID 0}}
<footer class="footer bg-dark">
<div class="d-flex p-2">
<span class="text-muted mr-auto">
Checkins {{.CurrentUser.TotalCheckins}} Unique Beers {{.CurrentUser.TotalBeers}} Badges {{.CurrentUser.TotalBadges}}
</span>
<span class="text-muted">
Database checkins {{lenLoc .CurrentUser.Locations}} updated at {{.CurrentUser.UpdatedAt.Format "2006-01-02"}}
</span>
</div>
</footer>
{{end}}
<script src="/assets/vendor/js/popper.min.js"></script>
<script src="/assets/vendor/js/bootstrap.min.js"></script>
</body>
......
......@@ -12,6 +12,9 @@
<link rel="stylesheet" href="/assets/vendor/css/control.playback.css"/>
<link rel="stylesheet" href="/assets/vendor/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/assets/vendor/css/leaflet.css"/>
<!-- Leaflet Markercluster -->
<link rel="stylesheet" href="/assets/vendor/css/MarkerCluster.css"/>
<link rel="stylesheet" href="/assets/vendor/css/MarkerCluster.Default.css"/>
<!-- Custom CSS -->
<link rel="stylesheet" href="/assets/stylesheets/unmappd.css"/>
</head>
......@@ -42,20 +45,6 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
{{if gt .CurrentUser.ID 0}}
<span class="navbar-text">
Checkins {{.CurrentUser.TotalCheckins}}&nbsp;
</span>
<span class="navbar-text">
Unique Beers {{.CurrentUser.TotalBeers}}&nbsp;
</span>
<span class="navbar-text">
Badges {{.CurrentUser.TotalBadges}}&nbsp;
</span>
<span class="navbar-text ml-auto">
Database checkins {{lenLoc .CurrentUser.Locations}} updated at {{.CurrentUser.UpdatedAt.Format "2006-01-02"}}
</span>
{{end}}
<ul class="navbar-nav ml-auto">
{{if not .CurrentUser.Locations}}
<li class="nav-item">
......@@ -65,17 +54,13 @@
</li>
{{else}}
<li class="nav-item">
<script>
function playback() {
var href = window.location.href.replace(/#.*/g,'');
if (href.indexOf("&playback") > -1) {
window.location.href = href.replace('&playback','');
return;
}
window.location.href = href + "&playback";
}
</script>
<a class="nav-link" href="#" onClick="playback()">Playback</a>
<a class="nav-link" id="venues" href="#">Venues</a>
</li>
<li class="nav-item">
<a class="nav-link" id="clustered" href="#">Clustered venues</a>
</li>
<li class="nav-item">
<a class="nav-link" id="playback" href="#">Playback</a>
</li>
{{end}}
</ul>
......
......@@ -5,21 +5,31 @@
<script src="/assets/vendor/js/leaflet.js"></script>
<script src="/assets/vendor/js/control.trackplayback.js"></script>
<script src="/assets/vendor/js/leaflet.trackplayback.js"></script>
<script src="/assets/vendor/js/leaflet.markercluster.js"></script>
<script>
var mymap = L.map('mapid').setView([0,0], 2);
var mymapData = {{.CurrentUser.Locations.LatLngJSON}};
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: '{{.Viper.GetString "mapboxKey"}}'
}).addTo(mymap);
</script>
{{if .PlaybackOK}}
{{template "map_playback.html" .}}
{{else}}
{{template "map_venues.html" .}}
{{end}}
function resetMap() {
if (typeof trackplaybackControl !== 'undefined') {
trackplaybackControl.remove();
}
for (var i=0; i<venueMarkers.length; i++) {
mymap.removeLayer(venueMarkers[i]);
}
mymap.removeLayer(clusterMarkers);
}
{{template "map_playback.js" .}}
{{template "map_venues.js" .}}
{{template "map_venues_cluster.js" .}}
</script>
{{else}}
{{template "loading.html" .}}
{{end}}
......
<script>
var trackplayback = new L.TrackPlayBack({{.CurrentUser.Locations.LatLngTimeJSON}}, mymap, {
function loadPlayback() {
var trackData = [];
for (var i = 0; i < mymapData.length; i++) {
var poi = mymapData[i];
trackData.push({lat:poi[0],lng:poi[1],time:poi[2].timestamp});
}
var trackplayback = new L.TrackPlayBack(trackData, mymap, {
clockOptions: {
// the default speed
// caculate method: fpstime * Math.pow(2, speed - 1)
......@@ -30,8 +35,13 @@
fillColor: '#2881c3'
}
});
var trackplaybackControl = L.trackplaybackcontrol(trackplayback);
window.trackplaybackControl = L.trackplaybackcontrol(trackplayback);
trackplaybackControl.addTo(mymap);
// remove checkbox
$(".trackplayback-checkbox").hide();
</script>
}
$("#playback").click(function() {
resetMap();
loadPlayback();
});
<script>
{{range .CurrentUser.Locations}}
var marker = L.marker([{{.Lat}}, {{.Lng}}]).addTo(mymap);
marker.bindPopup(`
<table>
<tr>
<td><img src="{{.Icon}}" alt="{{.Name}}"/></td>
<td><b>{{.Name}}</b></td>
</tr>
<tr>
<td class="text-center pt-2" colspan="2">
Link: <a href="{{.Url}}">{{.Url}}</a><br>
Category: {{.Category}}
</td>
</tr>
</table>
`);
{{end}}
</script>
var venueMarkers = [];
for (var i = 0; i < mymapData.length; i++) {
var poi = mymapData[i];
var venue = poi[2].venue;
var marker = L.marker(new L.LatLng(poi[0], poi[1]));
marker.bindPopup(`
<table>
<tr>
<td><img src="`+venue.icon+`" alt="`+venue.name+`"/></td>
<td><b>`+venue.name+`</b></td>
</tr>
<tr>
<td class="text-center pt-2" colspan="2">
Link: <a href="`+venue.url+`">`+venue.url+`</a><br>
Category: `+venue.category+`
</td>
</tr>
</table>
`);
venueMarkers.push(marker);
}
function loadVenues() {
for (var i=0; i<venueMarkers.length; i++) {
venueMarkers[i].addTo(mymap);
}
}
loadVenues();
$("#venues").click(function() {
resetMap();
loadVenues();
});
var clusterMarkers = L.markerClusterGroup();
for (var i = 0; i < mymapData.length; i++) {
var poi = mymapData[i];
var venue = poi[2].venue;
var marker = L.marker(new L.LatLng(poi[0], poi[1]));
marker.bindPopup(`
<table>
<tr>
<td><img src="`+venue.icon+`" alt="`+venue.name+`"/></td>
<td><b>`+venue.name+`</b></td>
</tr>
<tr>
<td class="text-center pt-2" colspan="2">
Link: <a href="`+venue.url+`">`+venue.url+`</a><br>
Category: `+venue.category+`
</td>
</tr>
</table>
`);
clusterMarkers.addLayer(marker);
}
$("#clustered").click(function() {
resetMap();
clusterMarkers.addTo(mymap);
});
No preview for this file type
......@@ -34,7 +34,6 @@ type TemplateParams struct{
Viper *viper.Viper
CurrentUser User
Users Users
PlaybackOK bool
}
var TemplateFuncs = map[string]interface{}{
......@@ -82,11 +81,9 @@ func user_handler(w http.ResponseWriter, r *http.Request) {
}
tmpl := prepare_templates("map.html")
_, playbackOK := r.URL.Query()["playback"]
if err = tmpl.Execute(w, TemplateParams{
Viper: viper.GetViper(),
CurrentUser: user,
PlaybackOK: playbackOK,
}); err != nil {
log.Print(err)
return
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment