| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| 6 | <meta name="apple-mobile-web-app-capable" content="yes"> |
|---|
| 7 | <title>GetFeatureInfo Popup</title> |
|---|
| 8 | <script src="../lib/OpenLayers.js"></script> |
|---|
| 9 | <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> |
|---|
| 10 | <link rel="stylesheet" href="style.css" type="text/css"> |
|---|
| 11 | <script> |
|---|
| 12 | OpenLayers.ProxyHost = "proxy.cgi?url="; |
|---|
| 13 | |
|---|
| 14 | var map, info; |
|---|
| 15 | |
|---|
| 16 | function load() { |
|---|
| 17 | map = new OpenLayers.Map({ |
|---|
| 18 | div: "map", |
|---|
| 19 | maxExtent: new OpenLayers.Bounds(143.834,-43.648,148.479,-39.573) |
|---|
| 20 | }); |
|---|
| 21 | |
|---|
| 22 | var political = new OpenLayers.Layer.WMS("State Boundaries", |
|---|
| 23 | "http://demo.opengeo.org/geoserver/wms", |
|---|
| 24 | {'layers': 'topp:tasmania_state_boundaries', transparent: true, format: 'image/gif'}, |
|---|
| 25 | {isBaseLayer: true} |
|---|
| 26 | ); |
|---|
| 27 | |
|---|
| 28 | var roads = new OpenLayers.Layer.WMS("Roads", |
|---|
| 29 | "http://demo.opengeo.org/geoserver/wms", |
|---|
| 30 | {'layers': 'topp:tasmania_roads', transparent: true, format: 'image/gif'}, |
|---|
| 31 | {isBaseLayer: false} |
|---|
| 32 | ); |
|---|
| 33 | |
|---|
| 34 | var cities = new OpenLayers.Layer.WMS("Cities", |
|---|
| 35 | "http://demo.opengeo.org/geoserver/wms", |
|---|
| 36 | {'layers': 'topp:tasmania_cities', transparent: true, format: 'image/gif'}, |
|---|
| 37 | {isBaseLayer: false} |
|---|
| 38 | ); |
|---|
| 39 | |
|---|
| 40 | var water = new OpenLayers.Layer.WMS("Bodies of Water", |
|---|
| 41 | "http://demo.opengeo.org/geoserver/wms", |
|---|
| 42 | {'layers': 'topp:tasmania_water_bodies', transparent: true, format: 'image/gif'}, |
|---|
| 43 | {isBaseLayer: false} |
|---|
| 44 | ); |
|---|
| 45 | |
|---|
| 46 | var highlight = new OpenLayers.Layer.Vector("Highlighted Features", { |
|---|
| 47 | displayInLayerSwitcher: false, |
|---|
| 48 | isBaseLayer: false |
|---|
| 49 | }); |
|---|
| 50 | |
|---|
| 51 | map.addLayers([political, roads, cities, water, highlight]); |
|---|
| 52 | |
|---|
| 53 | info = new OpenLayers.Control.WMSGetFeatureInfo({ |
|---|
| 54 | url: 'http://demo.opengeo.org/geoserver/wms', |
|---|
| 55 | title: 'Identify features by clicking', |
|---|
| 56 | queryVisible: true, |
|---|
| 57 | eventListeners: { |
|---|
| 58 | getfeatureinfo: function(event) { |
|---|
| 59 | map.addPopup(new OpenLayers.Popup.FramedCloud( |
|---|
| 60 | "chicken", |
|---|
| 61 | map.getLonLatFromPixel(event.xy), |
|---|
| 62 | null, |
|---|
| 63 | event.text, |
|---|
| 64 | null, |
|---|
| 65 | true |
|---|
| 66 | )); |
|---|
| 67 | } |
|---|
| 68 | } |
|---|
| 69 | }); |
|---|
| 70 | map.addControl(info); |
|---|
| 71 | info.activate(); |
|---|
| 72 | |
|---|
| 73 | map.addControl(new OpenLayers.Control.LayerSwitcher()); |
|---|
| 74 | map.zoomToMaxExtent(); |
|---|
| 75 | } |
|---|
| 76 | |
|---|
| 77 | </script> |
|---|
| 78 | </head> |
|---|
| 79 | <body onload="load()"> |
|---|
| 80 | <h1 id="title">Feature Info in Popup</h1> |
|---|
| 81 | |
|---|
| 82 | <div id="tags"> |
|---|
| 83 | WMS, GetFeatureInfo, popup |
|---|
| 84 | </div> |
|---|
| 85 | |
|---|
| 86 | <p id="shortdesc"> |
|---|
| 87 | Demonstrates the WMSGetFeatureInfo control for fetching information |
|---|
| 88 | about a position from WMS (via GetFeatureInfo request). Results |
|---|
| 89 | are displayed in a popup. |
|---|
| 90 | </p> |
|---|
| 91 | |
|---|
| 92 | <div id="map" class="smallmap"></div> |
|---|
| 93 | |
|---|
| 94 | <div id="docs"></div> |
|---|
| 95 | </body> |
|---|
| 96 | </html> |
|---|
