diff --git a/html/force.css b/html/force.css
index 80e0615..234d561 100644
--- a/html/force.css
+++ b/html/force.css
@@ -29,6 +29,10 @@
left: 10px;
}
+#nodeinfo button.close {
+ float: right;
+}
+
#controlpanel {
top: 10px;
right: 10px;
@@ -48,6 +52,10 @@
margin: 0 0 0.5em;
}
+#nodeinfo h2 {
+ font-size: 9pt;
+}
+
#nodeinfo p {
font-size: 10pt;
margin: 0;
diff --git a/html/force.js b/html/force.js
index af24b91..956fb08 100644
--- a/html/force.js
+++ b/html/force.js
@@ -98,20 +98,43 @@ function fade(opacity) {
}
function show_node_info(d) {
- if (typeof nodeinfo !== 'undefined')
- nodeinfo.remove();
+ d3.selectAll("#nodeinfo").remove()
nodeinfo = d3.select("#chart")
.append("div")
.attr("id", "nodeinfo")
+ nodeinfo.append("button")
+ .attr("class", "close")
+ .text("x")
+ .on("click", function(d) {
+ nodeinfo.remove()
+ })
+
nodeinfo.append("h1")
- .text(d.name)
- nodeinfo.append("p")
- .text("primary: " + d.id)
+ .text(d.name + " / " + d.id)
+
nodeinfo.append("p")
+ .append("label")
.text("macs: " + d.macs)
- nodeinfo.append("p")
- .text(d.gps)
+
+ if (d.geo) {
+ nodeinfo.append("h2").text("Geodaten")
+
+ nodeinfo.append("p")
+ .text(d.geo)
+
+ url = GMaps.staticMapURL({
+ size: [300, 100],
+ lat: d.geo[0],
+ lng: d.geo[1],
+ markers: [
+ {lat: d.geo[0], lng: d.geo[1]},
+ ]
+ })
+
+ nodeinfo.append("img")
+ .attr("src", url)
+ }
}
function update_graph() {
diff --git a/html/nodes.html b/html/nodes.html
index 806a4d9..f3b0742 100644
--- a/html/nodes.html
+++ b/html/nodes.html
@@ -9,6 +9,8 @@
+
+