1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <html> <head> <title>OpenLayers Feature Info Example</title> <script src="../lib/OpenLayers.js"></script> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <style type="text/css"> ul, li { padding-left: 0px; margin-left: 0px; } </style> </head> <body> <h1 id="title">Feature Info Example</h1> <div id="tags"></div> <p id="shortdesc"> Demonstrates sending a GetFeatureInfo query to an OWS. Returns information about a map feature in the side DIV. </p> <a id="permalink" href="">Permalink</a><br /> <div style="float:right;width:28%"> <h1 style="font-size:1.3em;">CIA Factbook</h1> <p style="font-size:.8em;">Click a country to see statistics about the country below.</p> <div id="nodeList"> </div> </div> <div id="map" class="smallmap"></div> <script defer="defer" type="text/javascript"> OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url="; var map = new OpenLayers.Map('map', {'maxResolution':'auto'}); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} ); map.addLayer(wms); map.addControl(new OpenLayers.Control.Permalink('permalink')); map.zoomToMaxExtent(); map.events.register('click', map, function (e) { OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait..."; var url = wms.getFullRequestString({ REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: wms.map.getExtent().toBBOX(), X: e.xy.x, Y: e.xy.y, INFO_FORMAT: 'text/html', QUERY_LAYERS: wms.params.LAYERS, WIDTH: wms.map.size.w, HEIGHT: wms.map.size.h}); OpenLayers.loadURL(url, '', this, setHTML); OpenLayers.Event.stop(e); }); function setHTML(response) { OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText; } </script> <div id="docs"> </div> </body> </html> |