Add day navigation map buttons.

assets/main.coffee

@@ -55,16 +55,20 @@ window.updateDateNav = (_dateFrom, _dateTo) ->
     if objNextFrom > today
         console.log 'Disabling NEXT button because %o is in the future. (Today is %o)', objNextFrom, today
         $('#nextButton').addClass 'disabled'
+        window.mymap?.buttonNext.disable()
     else
         $('#nextButton').removeClass 'disabled'
+        window.mymap?.buttonNext.enable()
 
     # disable today button if dateFrom isn't today
     if _dateFrom is today.toISOString()[...10]
         $('#todayButton').addClass 'disabled'
         $('#livemap_on').removeClass 'disabled'
+        window.mymap?.buttonToday.disable()
     else
         $('#todayButton').removeClass 'disabled'
         $('#livemap_on').addClass 'disabled'
+        window.mymap?.buttonToday.enable()
 
 window.gotoDate = (_dateFrom, _dateTo, pushState) ->
     console.log 'gotoDate: %o, %o, %o', _dateFrom, _dateTo, pushState

assets/ownmap.coffee

@@ -88,6 +88,32 @@ class window.OwnMap
             btn_showhide.state 'hide-markers'
         btn_showhide.addTo @mymap
 
+        @buttonPrev = L.easyButton
+            states: [
+                onClick: (btn, map) =>
+                    window.goPrevious()
+                title: 'Previous day'
+                icon: 'fa-arrow-circle-left'
+            ]
+        @buttonToday = L.easyButton
+            states: [
+                onClick: (btn, map) =>
+                    window.gotoDate()
+                title: 'Today'
+                icon: 'fa-hand-point-down'
+            ]
+        @buttonNext = L.easyButton
+            states: [
+                onClick: (btn, map) =>
+                    window.goNext()
+                title: 'Next day'
+                icon: 'fa-arrow-circle-right'
+            ]
+
+        L.easyBar [@buttonPrev, @buttonToday, @buttonNext],
+            position: 'bottomleft'
+        .addTo @mymap
+
         @fetchMarkers()
 
     setLayerOpacity: (opacity) ->

assets/style.css

@@ -15,3 +15,26 @@ body {
 button.hide-markers-active {
   color: #007bff !important;
 }
+
+.leaflet-bottom.leaflet-left .leaflet-control {
+  clear: none;
+}
+
+.leaflet-bottom.leaflet-left .leaflet-bar button {
+  display: inline-block;
+  border-right: 1px solid #ccc;
+  border-bottom: none;
+}
+
+.leaflet-bottom.leaflet-left .leaflet-bar button:first-of-type {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0;
+}
+
+.leaflet-bottom.leaflet-left .leaflet-bar button:last-of-type {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-right: none;
+}