diff options
| author | Gerald Combs <gerald@wireshark.org> | 2012-04-05 22:10:53 +0000 |
|---|---|---|
| committer | Gerald Combs <gerald@wireshark.org> | 2012-04-05 22:10:53 +0000 |
| commit | 81334e311aa9d417cbdccda7e48978befc85eae6 (patch) | |
| tree | 2cf360be85cb03cae2d40196dd41b36966bda639 /ipmap.html | |
| parent | ae62dc3bdbdda96a73ed5a289c8b579d6024b307 (diff) | |
Instead of loading our coordinates from a separate text file via
OpenLayers.Layer.Text, insert them into a JSON array and load them using
OpenLayers.Layer.Vector + OpenLayers.Format.GeoJSON. This should fix the
endpoint map feature on modern browsers.
Switch OpenStreetMap to a simpler map from OSGeo.
svn path=/trunk/; revision=41967
Diffstat (limited to 'ipmap.html')
| -rw-r--r-- | ipmap.html | 101 |
1 files changed, 80 insertions, 21 deletions
diff --git a/ipmap.html b/ipmap.html index e3e6eb7b76..0ea1864236 100644 --- a/ipmap.html +++ b/ipmap.html @@ -2,45 +2,104 @@ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Wireshark: IP Location Map</title> + <style type="text/css"> + body { + font-family: Arial, Helvetica, sans-serif; font-size: 13px; + line-height: 17px; + } + </style> <script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript" src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script> <script type="text/javascript"> <!-- - var map; + var map, layer; + var selectControl, selectedFeature; + + function onPopupClose(event) { + selectControl.unselect(this.feature); + } + + function EndpointSelected(event) { + var feature = event.feature; + popup = new OpenLayers.Popup.FramedCloud("endpoint", + feature.geometry.getBounds().getCenterLonLat(), + new OpenLayers.Size(25,25), + "<h3>"+ feature.attributes.title + "</h3>" + + feature.attributes.description, + null, true, onPopupClose); + feature.popup = popup; + popup.feature = feature; + map.addPopup(popup); + } + + function EndpointUnselected(event) { + var feature = event.feature; + if (feature.popup) { + popup.feature = null; + map.removePopup(feature.popup); + feature.popup.destroy(); + feature.popup = null; + } + } function init() { - var map = new OpenLayers.Map("map", { + var endpoints = { + "type": "FeatureCollection", + "features": [ // Start endpoint list - MUST match hostlist_table.c + ] + }; + map = new OpenLayers.Map('map', { controls: [ new OpenLayers.Control.PanZoomBar(), + new OpenLayers.Control.ZoomBox(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.MousePosition(), new OpenLayers.Control.MouseDefaults(), - new OpenLayers.Control.Attribution()], - projection: new OpenLayers.Projection("EPSG:900913"), - displayProjection: new OpenLayers.Projection("EPSG:4326"), - maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34), - numZoomLevels: 18, - maxResolution: 156543, - units: "m"} - ); - - map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik")); - map_file = "ipmap.txt"; - if (document.location.hash.length > 1) { - map_file = document.location.hash.substr(1); + new OpenLayers.Control.Attribution() + ], + //projection: new OpenLayers.Projection("EPSG:900913"), + //displayProjection: new OpenLayers.Projection("EPSG:4326"), + //maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34), + //numZoomLevels: 18, + //maxResolution: 156543, + //units: "m" + }); + layer = new OpenLayers.Layer.WMS("OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ); + map.addLayer(layer); + //map.addLayer(new OpenLayers.Layer.OSM.Mapnik("Mapnik")); + //map.addLayer(new OpenLayers.Layer.Text("IP Locations", { + // location: map_file, projection: new OpenLayers.Projection("EPSG:4326")} ) ); + // + //map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); + + var geojson_format = new OpenLayers.Format.GeoJSON(); + var vector_layer = new OpenLayers.Layer.Vector("IP Endpoints"); + map.addLayer(vector_layer); + vector_layer.addFeatures(geojson_format.read(endpoints)); + + if (endpoints.features.length < 1) { + document.getElementById("statusmsg").innerHTML = "No endpoints to map"; + } else { + map.zoomToExtent(vector_layer.getDataExtent()); } - map.addLayer(new OpenLayers.Layer.Text("IP Locations", { - location: map_file, projection: new OpenLayers.Projection("EPSG:4326")} ) ); - var lonlat = (new OpenLayers.LonLat(0.0, 0.0)); - lonlat.transform(map.displayProjection, map.projection); - map.setCenter(lonlat, 2); + selectControl = new OpenLayers.Control.SelectFeature(vector_layer); + map.addControl(selectControl); + selectControl.activate(); + + vector_layer.events.on({ + 'featureselected': EndpointSelected, + 'featureunselected': EndpointUnselected + }); } // --> </script> </head> <body onload="init()"> - <div id="map"></div> + <div id="statusmsg" style="float: right; z-index: 9999;"></div> + <div id="map" style="z-index: 0;"></div> </body> </html> |