simple google maps integration
parent
81b26edbf8
commit
8bb040ba90
|
@ -29,6 +29,10 @@
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#nodeinfo button.close {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
#controlpanel {
|
#controlpanel {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
|
@ -48,6 +52,10 @@
|
||||||
margin: 0 0 0.5em;
|
margin: 0 0 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#nodeinfo h2 {
|
||||||
|
font-size: 9pt;
|
||||||
|
}
|
||||||
|
|
||||||
#nodeinfo p {
|
#nodeinfo p {
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
|
@ -98,20 +98,43 @@ function fade(opacity) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function show_node_info(d) {
|
function show_node_info(d) {
|
||||||
if (typeof nodeinfo !== 'undefined')
|
d3.selectAll("#nodeinfo").remove()
|
||||||
nodeinfo.remove();
|
|
||||||
|
|
||||||
nodeinfo = d3.select("#chart")
|
nodeinfo = d3.select("#chart")
|
||||||
.append("div")
|
.append("div")
|
||||||
.attr("id", "nodeinfo")
|
.attr("id", "nodeinfo")
|
||||||
|
nodeinfo.append("button")
|
||||||
|
.attr("class", "close")
|
||||||
|
.text("x")
|
||||||
|
.on("click", function(d) {
|
||||||
|
nodeinfo.remove()
|
||||||
|
})
|
||||||
|
|
||||||
nodeinfo.append("h1")
|
nodeinfo.append("h1")
|
||||||
.text(d.name)
|
.text(d.name + " / " + d.id)
|
||||||
nodeinfo.append("p")
|
|
||||||
.text("primary: " + d.id)
|
|
||||||
nodeinfo.append("p")
|
nodeinfo.append("p")
|
||||||
|
.append("label")
|
||||||
.text("macs: " + d.macs)
|
.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() {
|
function update_graph() {
|
||||||
|
|
|
@ -9,6 +9,8 @@
|
||||||
<script type="text/javascript" src="jquery.min.js"></script>
|
<script type="text/javascript" src="jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="d3.v2.js"></script>
|
<script type="text/javascript" src="d3.v2.js"></script>
|
||||||
<script type="text/javascript" src="zigzag.js"></script>
|
<script type="text/javascript" src="zigzag.js"></script>
|
||||||
|
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
|
||||||
|
<script src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
|
|
Loading…
Reference in New Issue