//depot/projects/wardrive-map/map.html#3 – edit change 131 (text) ·revision history
| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| 2 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| 3 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 4 | <head> |
| 5 | <title>ttul wardrive map</title> |
| 6 | <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAA_FAKE_KEY_FOR_TTUL_ORG" type="text/javascript"></script> |
| 7 | <style type="text/css"> |
| 8 | body { font-family: Verdana, sans-serif; font-size: 80%; } |
| 9 | #map { width: 700px; height: 500px; border: 1px solid #999; } |
| 10 | </style> |
| 11 | </head> |
| 12 | <body> |
| 13 | <h1>Access points of Vancouver</h1> |
| 14 | <div id="map"></div> |
| 15 | <p id="status">loading...</p> |
| 16 | <script type="text/javascript"> |
| 17 | //<![CDATA[ |
| 18 | var map = new GMap(document.getElementById("map")); |
| 19 | map.addControl(new GLargeMapControl()); |
| 20 | map.centerAndZoom(new GPoint(-123.1207, 49.2827), 4); |
| 21 | |
| 22 | function getXHR() { |
| 23 | if (window.XMLHttpRequest) return new XMLHttpRequest(); |
| 24 | try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {} |
| 25 | return new ActiveXObject("Microsoft.XMLHTTP"); |
| 26 | } |
| 27 | |
| 28 | function pin(color) { |
| 29 | var icon = new GIcon(); |
| 30 | icon.image = "icons/" + color + ".png"; |
| 31 | icon.iconSize = new GSize(12, 20); |
| 32 | icon.iconAnchor = new GPoint(6, 20); |
| 33 | icon.infoWindowAnchor = new GPoint(5, 1); |
| 34 | return icon; |
| 35 | } |
| 36 | var openPin = pin("green"), wepPin = pin("red"); |
| 37 | |
| 38 | function makeMarker(p, icon, html) { |
| 39 | var m = new GMarker(p, icon); |
| 40 | GEvent.addListener(m, "click", function() { m.openInfoWindowHtml(html); }); |
| 41 | return m; |
| 42 | } |
| 43 | |
| 44 | var req = getXHR(); |
| 45 | req.open("GET", "nets.xml", true); |
| 46 | req.onreadystatechange = function() { |
| 47 | if (req.readyState != 4) return; |
| 48 | var nets = req.responseXML.documentElement.getElementsByTagName("net"); |
| 49 | for (var i = 0; i < nets.length; i++) { |
| 50 | var p = new GPoint(parseFloat(nets[i].getAttribute("lng")), |
| 51 | parseFloat(nets[i].getAttribute("lat"))); |
| 52 | var html = "<b>" + nets[i].getAttribute("ssid") + "</b><br/>ch " + |
| 53 | nets[i].getAttribute("chan"); |
| 54 | var icon = nets[i].getAttribute("wep") == "1" ? wepPin : openPin; |
| 55 | map.addOverlay(makeMarker(p, icon, html)); |
| 56 | } |
| 57 | document.getElementById("status").innerHTML = nets.length + " networks"; |
| 58 | }; |
| 59 | req.send(null); |
| 60 | //]]> |
| 61 | </script> |
| 62 | </body> |
| 63 | </html> |