map: show buttons along content buttons

lib/gui.js

@@ -14,6 +14,9 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
     var sidebar
 
+    var buttons = document.createElement("div")
+    buttons.classList.add("buttons")
+
     function dataTargetRemove(d) {
       dataTargets = dataTargets.filter( function (e) { return d !== e })
     }
@@ -32,7 +35,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     function addContent(K) {
       removeContent()
 
-      content = new K(config, linkScale, sidebar, router)
+      content = new K(config, linkScale, sidebar, router, buttons)
       contentDiv.appendChild(content.div)
 
       if (latestData)
@@ -54,21 +57,21 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
 
     sidebar = new Sidebar(document.body)
 
+    contentDiv.appendChild(buttons)
+
     var buttonToggle = document.createElement("button")
-    buttonToggle.classList.add("contenttoggle")
+    buttonToggle.textContent = ""
-    buttonToggle.classList.add("next-graph")
     buttonToggle.onclick = function () {
       if (content.constructor === Map) {
-        buttonToggle.classList.remove("next-graph")
+        buttonToggle.textContent = ""
-        buttonToggle.classList.add("next-map")
         router.view("g")
       } else {
-        buttonToggle.classList.remove("next-map")
+        buttonToggle.textContent = ""
-        buttonToggle.classList.add("next-graph")
         router.view("m")
       }
     }
-    contentDiv.appendChild(buttonToggle)
+
+    buttons.appendChild(buttonToggle)
 
     var title = new Title(config)
     var infobox = new Infobox(config, sidebar, router)

lib/map.js

@@ -18,6 +18,7 @@ define(["map/clientlayer", "map/labelslayer",
 
         onAdd: function () {
           var button = L.DomUtil.create("button", "add-layer")
+          button.textContent = ""
 
           L.DomEvent.disableClickPropagation(button)
           L.DomEvent.addListener(button, "click", this.f, this)
@@ -43,6 +44,7 @@ define(["map/clientlayer", "map/labelslayer",
 
         onAdd: function () {
           var button = L.DomUtil.create("button", "locate-user")
+          button.textContent = ""
 
           L.DomEvent.disableClickPropagation(button)
           L.DomEvent.addListener(button, "click", this.onClick, this)
@@ -118,7 +120,7 @@ define(["map/clientlayer", "map/labelslayer",
     var iconAlert   = { color: "#D43E2A", fillColor: "#D43E2A", radius: 6, fillOpacity: 0.8, opacity: 0.8, weight: 2, className: "stroke-first node-alert" }
     var iconNew     = { color: "#1566A9", fillColor: "#93E929", radius: 6, fillOpacity: 1.0, opacity: 0.5, weight: 2 }
 
-    return function (config, linkScale, sidebar, router) {
+    return function (config, linkScale, sidebar, router, buttons) {
       var self = this
       var barycenter
       var groupOnline, groupOffline, groupNew, groupLost, groupLines
@@ -135,6 +137,20 @@ define(["map/clientlayer", "map/labelslayer",
           disableTracking()
       })
 
+      var mybuttons = []
+
+      function addButton(button) {
+        var el = button.onAdd()
+        mybuttons.push(el)
+        buttons.appendChild(el)
+      }
+
+      function clearButtons() {
+        mybuttons.forEach( function (d) {
+          buttons.removeChild(d)
+        })
+      }
+
       function saveView() {
         savedView = {center: map.getCenter(),
                      zoom: map.getZoom()}
@@ -207,9 +223,9 @@ define(["map/clientlayer", "map/labelslayer",
       map.on("locationerror", locationError)
       map.on("dragend", saveView)
 
-      map.addControl(locateUserButton)
+      addButton(locateUserButton)
 
-      map.addControl(new AddLayerButton(function () {
+      addButton(new AddLayerButton(function () {
         /*eslint no-alert:0*/
         var layerName = prompt("Leaflet Provider:")
         addLayer(layerName)
@@ -400,6 +416,7 @@ define(["map/clientlayer", "map/labelslayer",
       }
 
       self.destroy = function () {
+        clearButtons()
         map.remove()
       }
 

scss/_map.scss

@@ -6,14 +6,6 @@
   width: 100%;
   height: 100%;
 
-  button.locate-user:after {
-    content: '\f2a7';
-  }
-
-  button.add-layer:after {
-    content: '\f217';
-  }
-
  .node-alert {
     -webkit-animation: blink 2s linear;
     -webkit-animation-iteration-count: infinite;

scss/main.scss

@@ -13,25 +13,24 @@ $buttondistance: 12pt;
 @import '_map';
 @import '_forcegraph';
 
-.contenttoggle {
-  z-index: 100;
-  position: absolute;
-  top: $buttondistance;
-  right: $buttondistance;
-}
-
-.contenttoggle.next-graph:after {
-  content: '\f341';
-}
-
-.contenttoggle.next-map:after {
-  content: '\f203';
-}
-
 .content {
   position: fixed;
   width: 100%;
   height: 100vh;
+
+  .buttons {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+
+    z-index: 100;
+    position: absolute;
+    top: $buttondistance;
+    right: $buttondistance;
+
+    button {
+      margin-left: $buttondistance;
+    }
+  }
 }
 
 .tabs {