| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 5 | <title>OpenLayers: WRS Feature Example</title> |
|---|
| 6 | |
|---|
| 7 | <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script> |
|---|
| 8 | <script type="text/javascript"> |
|---|
| 9 | var map; |
|---|
| 10 | var geojson = { "type": "FeatureCollection", |
|---|
| 11 | "features": [ |
|---|
| 12 | $parameters:{ p | |
|---|
| 13 | \{ "type": "Feature", |
|---|
| 14 | "geometry": \{ |
|---|
| 15 | "type": "Point", |
|---|
| 16 | "coordinates": $p.point$ |
|---|
| 17 | \}, |
|---|
| 18 | "crs": \{ |
|---|
| 19 | "type": "EPSG", |
|---|
| 20 | "properties": \{"code": "$p.srid$"\} |
|---|
| 21 | \}, |
|---|
| 22 | "properties": \{ |
|---|
| 23 | "address": "$p.address$", |
|---|
| 24 | "AddressDetails": \{ |
|---|
| 25 | "Country": \{ |
|---|
| 26 | "CountryNameCode": "$p.country$", |
|---|
| 27 | "AdministrativeArea": \{ |
|---|
| 28 | "AdministrativeAreaName": "$p.area$", |
|---|
| 29 | "SubAdministrativeArea": \{ |
|---|
| 30 | "SubAdministrativeAreaName": "$p.subarea$", |
|---|
| 31 | "Locality": \{ |
|---|
| 32 | "LocalityName": "$p.locality$", |
|---|
| 33 | "Thoroughfare": \{ |
|---|
| 34 | "ThoroughfareName": "$p.thouroughfare$" |
|---|
| 35 | \}, |
|---|
| 36 | "PostalCode": \{ |
|---|
| 37 | "PostalCodeNumber": "$p.postal$" |
|---|
| 38 | \} |
|---|
| 39 | \} |
|---|
| 40 | \} |
|---|
| 41 | \} |
|---|
| 42 | \}, |
|---|
| 43 | "Accuracy": "$p.precision$" |
|---|
| 44 | \} |
|---|
| 45 | \} |
|---|
| 46 | \} |
|---|
| 47 | };separator=","$ |
|---|
| 48 | ], |
|---|
| 49 | "status": { |
|---|
| 50 | "code": 200, |
|---|
| 51 | "request": "geocode" |
|---|
| 52 | }, |
|---|
| 53 | "user": { |
|---|
| 54 | "request_id": "$p.request_id$" |
|---|
| 55 | }, |
|---|
| 56 | } |
|---|
| 57 | |
|---|
| 58 | function init() { |
|---|
| 59 | map = new OpenLayers.Map('map'); |
|---|
| 60 | |
|---|
| 61 | map.addLayer(new OpenLayers.Layer.WMS( |
|---|
| 62 | "OpenLayers WMS", |
|---|
| 63 | "http://labs.metacarta.com/wms/vmap0", |
|---|
| 64 | {layers: 'basic'} |
|---|
| 65 | ) |
|---|
| 66 | ); |
|---|
| 67 | |
|---|
| 68 | var vectors = new OpenLayers.Layer.Vector("WRS Feature"); |
|---|
| 69 | map.addLayer(vectors); |
|---|
| 70 | |
|---|
| 71 | var features = new OpenLayers.Format.GeoJSON().read(geojson); |
|---|
| 72 | var bounds; |
|---|
| 73 | |
|---|
| 74 | if(features) { |
|---|
| 75 | if(features.constructor != Array) { |
|---|
| 76 | features = [features]; |
|---|
| 77 | } |
|---|
| 78 | for(var i=0; i<features.length; ++i) { |
|---|
| 79 | if(!bounds) { |
|---|
| 80 | bounds = features[i].geometry.getBounds(); |
|---|
| 81 | } else { |
|---|
| 82 | bounds.extend(features[i].geometry.getBounds()); |
|---|
| 83 | } |
|---|
| 84 | |
|---|
| 85 | } |
|---|
| 86 | vectors.addFeatures(features); |
|---|
| 87 | map.zoomToExtent(bounds); |
|---|
| 88 | |
|---|
| 89 | var feature = features[0]; |
|---|
| 90 | var content = '<div style="padding:5px;font-size:.8em;font-weight:bold;">' + feature.data.address + '</div>' |
|---|
| 91 | content += '<div style="padding:5px;font-size:.8em;">Accuracy: ' + feature.data.AddressDetails.Accuracy + '</div>' |
|---|
| 92 | content += '<div style="padding:5px;font-size:.8em;">Location: ' + feature.geometry.toShortString() + '</div>' |
|---|
| 93 | |
|---|
| 94 | var popup = new OpenLayers.Popup.FramedCloud("chicken", |
|---|
| 95 | feature.geometry.getBounds().getCenterLonLat(), |
|---|
| 96 | null, content, null, false, false); |
|---|
| 97 | |
|---|
| 98 | map.addPopup(popup); |
|---|
| 99 | popup.show(); |
|---|
| 100 | } |
|---|
| 101 | else { |
|---|
| 102 | map.setCenter(new OpenLayers.LonLat(0, 0), 5); |
|---|
| 103 | } |
|---|
| 104 | } |
|---|
| 105 | </script> |
|---|
| 106 | |
|---|
| 107 | <style type="text/css"> |
|---|
| 108 | body { |
|---|
| 109 | margin: 5px; |
|---|
| 110 | } |
|---|
| 111 | #map { |
|---|
| 112 | width: 600px; |
|---|
| 113 | height: 400px; |
|---|
| 114 | border: 1px solid #ccc; |
|---|
| 115 | } |
|---|
| 116 | </style> |
|---|
| 117 | </head> |
|---|
| 118 | |
|---|
| 119 | <body onload="init()"> |
|---|
| 120 | <h1 id="title">WRS Feature Example</h1> |
|---|
| 121 | <p>This map draws the result of a WRS request.</p> |
|---|
| 122 | <div id="map"></div> |
|---|
| 123 | </body> |
|---|
| 124 | </html> |
|---|
| 125 | |
|---|
