marker highlighting

lib/map.js

@@ -6,6 +6,10 @@ define(function () {
      return function (d) {
        var m = L.circleMarker([d.nodeinfo.location.latitude, d.nodeinfo.location.longitude], iconFunc(d))
 
+       m.resetStyle = function () {
+         m.setStyle(iconFunc(d))
+       }
+
        m.on('click', gotoAnything.node(d, false))
        m.bindLabel(d.nodeinfo.hostname)
 
@@ -22,11 +26,17 @@ define(function () {
 
      var lines = graph.map( function (d) {
        var opts = { color: linkScale(d.tq).hex(),
-                    weight: 4
+                    weight: 4,
+                    opacity: 0.5,
+                    dashArray: "none"
                   }
 
        var line = L.polyline(d.latlngs, opts)
 
+       line.resetStyle = function () {
+         line.setStyle(opts)
+       }
+
        line.bindLabel(d.source.node.nodeinfo.hostname + " – " + d.target.node.nodeinfo.hostname + "<br><strong>" + showDistance(d) + " / " + showTq(d) + "</strong>")
        line.on('click', gotoAnything.link(d, false))
 
@@ -38,9 +48,9 @@ define(function () {
      return lines
    }
 
-   var iconOnline  = { color: "#1566A9", radius: 6, fillOpacity: 0.5 }
-   var iconOffline = { color: "#D43E2A", radius: 6, fillOpacity: 0.5 }
-   var iconNew     = { color: "#558020", radius: 6, fillOpacity: 0.5 }
+   var iconOnline  = { color: "#1566A9", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
+   var iconOffline = { color: "#D43E2A", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
+   var iconNew     = { color: "#558020", radius: 6, fillOpacity: 0.5, weight: 2, className: "stroke-first" }
 
    return function (sidebar) {
     var self = this
@@ -98,6 +108,16 @@ define(function () {
       map.fitBounds(bounds, {paddingTopLeft: [sidebar.getWidth(), 0]})
     }
 
+    function resetMarkerStyles(nodes, links) {
+      Object.keys(nodes).forEach( function (d) {
+        nodes[d].resetStyle()
+      })
+
+      Object.keys(links).forEach( function (d) {
+        links[d].resetStyle()
+      })
+    }
+
     function goto(dict, id) {
       var m = dict[id]
       if (m === undefined)
@@ -111,15 +131,26 @@ define(function () {
         bounds = L.latLngBounds([m.getLatLng()])
 
       setView(bounds)
-      m.openPopup(bounds.getCenter())
+
+      return m
     }
 
     self.gotoNode = function (d) {
-      goto(nodeDict, d.nodeinfo.node_id)
+      resetMarkerStyles(nodeDict, linkDict)
+
+      var m = goto(nodeDict, d.nodeinfo.node_id)
+
+      if (m)
+        m.setStyle({ fillColor: m.options.color, color: "orange", weight: 20, fillOpacity: 1, opacity: 0.7 })
     }
 
     self.gotoLink = function (d) {
-      goto(linkDict, linkId(d))
+      resetMarkerStyles(nodeDict, linkDict)
+
+      var m = goto(linkDict, linkId(d))
+
+      if (m)
+        m.setStyle({ weight: 7, opacity: 1, dashArray: "10, 10" })
     }
 
     return self