Add Leaflet.EasyButton and add show_markers toggle to map.

assets/main.coffee

@@ -154,27 +154,9 @@ window.initUI = ->
     $('#configCollapse').on 'hide.bs.collapse', (e) ->
         $('#configButton').addClass('btn-default').removeClass('btn-primary').removeClass('active')
 
-    # set button state
-    show_markers = Cookies.get 'show_markers'
-    console.log 'show_markers cookie value is: %o', show_markers
-    if show_markers is '1'
-        $('#show_markers').removeClass('btn-default').addClass('btn-primary').addClass('active')
-
     # setup history popupstate event handler
     window.onpopstate = window.handlePopState
 
-window.showHideMarkers = ->
-    console.log 'showHideMarkers'
-    # $('#show_markers').change(function() {
-    if $('#show_markers').hasClass 'btn-default'
-        window.mymap.showMarkers()
-        $('#show_markers').removeClass('btn-default').addClass('btn-primary').addClass('active')
-        return true
-    else
-        window.mymap.hideMarkers()
-        $('#show_markers').removeClass('btn-primary').removeClass('active').addClass('btn-default')
-        return true
-
 window.resetZoom = ->
     console.log 'resetZoom'
     window.mymap.resetZoom()

assets/ownmap.coffee

@@ -58,6 +58,27 @@ class window.OwnMap
             layers: [layers['OpenStreetMap']]
 
         L.control.layers(layers, overlays).addTo @mymap
+
+        btn_showhide = L.easyButton
+            states: [{
+                stateName: 'show-markers'
+                icon: 'fa-map-marker-alt'
+                title: 'Show Markers'
+                onClick: (btn, map) =>
+                    @showMarkers()
+                    btn.state 'hide-markers'
+                }, {
+                stateName: 'hide-markers'
+                icon: 'fa-map-marker-alt'
+                title: 'Hide Markers'
+                onClick: (btn, map) =>
+                    @hideMarkers()
+                    btn.state 'show-markers'
+            }]
+        if not @markermgr.startstop_only
+            btn_showhide.state 'hide-markers'
+        btn_showhide.addTo @mymap
+
         @fetchMarkers()
 
     fetchMarkers: ->

assets/style.css

@@ -11,3 +11,7 @@ body {
   cursor: default;
   opacity: 0.5;
 }
+
+button.hide-markers-active {
+  color: #007bff !important;
+}

bower.json

@@ -22,7 +22,8 @@
     "js-cookie": "^2.2.0",
     "leaflet": "^1.3.1",
     "leaflet-hotline": "https://github.com/iosphere/Leaflet.hotline.git#v0.4.0",
-    "leaflet-awesome-markers": "^2.0.2"
+    "leaflet-awesome-markers": "^2.0.2",
+    "Leaflet.EasyButton": "^2.3.0"
   },
   "ignore": [
     "**/.*",

templates/index.mustache

@@ -55,12 +55,6 @@
     <div class="collapse" id="configCollapse"><br/>
       <div class="well">
         <div class="row">
-          <div class="col-2 text-left">
-            <a href="#" onclick="showHideMarkers();" class="btn btn-default" id="show_markers">
-              <span class="d-none d-sm-block">Show markers</span>
-              <span class="d-block d-sm-none"><span class="fas fa-map-marker"></span></span>
-            </a>
-          </div>
           <div class="col-2 text-left">
             <a href="#" onclick="setLiveMap();" class="btn btn-default" id="livemap_on">
               <span class="d-none d-sm-block">Live map</span>

templates/partials/index_assets.mustache

@@ -15,5 +15,7 @@
   <script type="text/javascript" src="bower_components/leaflet-hotline/dist/leaflet.hotline.min.js"></script>
   <script type="text/javascript" src="bower_components/leaflet-awesome-markers/dist/leaflet.awesome-markers.min.js"></script>
   <link rel="stylesheet" href="bower_components/leaflet-awesome-markers/dist/leaflet.awesome-markers.css"/>
+  <script type="text/javascript" src="bower_components/Leaflet.EasyButton/src/easy-button.js"></script>
+  <link rel="stylesheet" href="bower_components/Leaflet.EasyButton/src/easy-button.css"/>
 
   <script type="text/javascript" src="bower_components/js-cookie/src/js.cookie.js"></script>