simple google maps integration

alfred-data
Nils Schneider 2012-06-07 00:25:42 +02:00
parent 81b26edbf8
commit 8bb040ba90
3 changed files with 40 additions and 7 deletions

View File

@ -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;

View File

@ -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)
if (d.geo) {
nodeinfo.append("h2").text("Geodaten")
nodeinfo.append("p") nodeinfo.append("p")
.text(d.gps) .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() {

View File

@ -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>