diff options
Diffstat (limited to 'retiolum/scripts/adv_graphgen/tinc_graphs/static/map.html')
| -rw-r--r-- | retiolum/scripts/adv_graphgen/tinc_graphs/static/map.html | 88 | 
1 files changed, 88 insertions, 0 deletions
| diff --git a/retiolum/scripts/adv_graphgen/tinc_graphs/static/map.html b/retiolum/scripts/adv_graphgen/tinc_graphs/static/map.html new file mode 100644 index 00000000..ef8a0565 --- /dev/null +++ b/retiolum/scripts/adv_graphgen/tinc_graphs/static/map.html @@ -0,0 +1,88 @@ + + +<!DOCTYPE html> +<html> +  <head> +    <title>Simple Map</title> +    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> +    <meta charset="utf-8"> +    <style> +      html, body, #map-canvas { +        margin: 0; +        padding: 0; +        height: 100%; +      } +    </style> +    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> +    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> +    <script type="text/javascript" src="jquery.ui.map.js"></script> +    <script> +      var map; +      var markerlist ={}; +      function addInfoWindow(marker, message) { +        var info = message; + +        var infoWindow = new google.maps.InfoWindow({ +          content: message +        }); + +        google.maps.event.addListener(marker, 'click', function () { + +          // close all the infowindows +          $.each(markerlist,function (k,v){ +            v["infowin"].close() +          }); +          infoWindow.open(map, marker); +        }); +        return infoWindow; +      } +      function initialize() { +        var mapOptions = { +          zoom: 5, +          center: new google.maps.LatLng(51,9), +          mapTypeId: google.maps.MapTypeId.ROADMAP +        }; +        map = new google.maps.Map(document.getElementById('map-canvas'), +        mapOptions); + +        $.getJSON("marker.json",function (data){ +          $.each(data,function (k,v) { + +            // add initial marker +            var pt=new google.maps.LatLng(v["latitude"],v["longitude"]) +            var marker= new google.maps.Marker({ +              id: k,map:map,title: k,position:pt,content:k}) + +            // add edges +            $.each(v["to"],function(iter,val){ +              var line = [ +              pt, +              new google.maps.LatLng(val['latitude'],val['longitude']) +        ] +               +              var  connector = new google.maps.Polyline({ +                path:line, +                strokeColor: "#FF0000", +                strokeOpacity: 1.0, +                strokeWeight: 2 +              }) +              connector.setMap(map); +              val["line"]=connector + +            }) + +           +            marker["infowin"]=addInfoWindow(marker,k+'<br/>'+v["city"]); +            markerlist[k] = marker; +          });  +        }) +      };  + +      google.maps.event.addDomListener(window, 'load', initialize); + +    </script> +  </head> +  <body> +    <div id="map-canvas"></div> +  </body> +</html> | 
