]> dev.renevier.net Git - syp.git/blob - openlayers/examples/vector-formats.html
avoid html injection in item title
[syp.git] / openlayers / examples / vector-formats.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <title>Vector Formats</title>
4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5     <link rel="stylesheet" href="style.css" type="text/css" />
6     <style type="text/css">
7         input, select, textarea {
8             font: 0.9em Verdana, Arial, sans-serif;
9         }
10         #leftcol {
11             position: absolute;
12             top: 0;
13             left: 1em;
14             padding: 0;
15             width: 517px;
16         }
17         #map {
18             width: 512px;
19             height: 225px;
20             border: 1px solid #ccc;
21         }
22         #input {
23             width: 512px;
24         }
25         #text {
26             font-size: 0.85em;
27             margin: 1em 0 1em 0;
28             width: 100%;
29             height: 10em;
30         }
31         #info {
32             position: relative;
33             padding: 2em 0;
34             margin-left: 540px;
35         }
36         #output {
37             font-size: 0.8em;
38             width: 100%;
39             height: 512px;
40             border: 0;
41         }
42         p {
43             margin: 0;
44             padding: 0.75em 0 0.75em 0;
45         }
46     </style>
47     <script src="../lib/Firebug/firebug.js"></script>
48     <script src="../lib/OpenLayers.js"></script>
49     <script type="text/javascript">
50         var map, vectors, formats;
51         function updateFormats() {
52             var in_options = {
53                 'internalProjection': map.baseLayer.projection,
54                 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
55             };   
56             var out_options = {
57                 'internalProjection': map.baseLayer.projection,
58                 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
59             };
60             var gmlOptions = {
61                 featureType: "feature",
62                 featureNS: "http://example.com/feature"
63             };
64             var gmlOptionsIn = OpenLayers.Util.extend(
65                 OpenLayers.Util.extend({}, gmlOptions),
66                 in_options
67             );
68             var gmlOptionsOut = OpenLayers.Util.extend(
69                 OpenLayers.Util.extend({}, gmlOptions),
70                 out_options
71             );
72             formats = {
73               'in': {
74                 wkt: new OpenLayers.Format.WKT(in_options),
75                 geojson: new OpenLayers.Format.GeoJSON(in_options),
76                 georss: new OpenLayers.Format.GeoRSS(in_options),
77                 gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
78                 gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
79                 kml: new OpenLayers.Format.KML(in_options)
80               }, 
81               'out': {
82                 wkt: new OpenLayers.Format.WKT(out_options),
83                 geojson: new OpenLayers.Format.GeoJSON(out_options),
84                 georss: new OpenLayers.Format.GeoRSS(out_options),
85                 gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
86                 gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
87                 kml: new OpenLayers.Format.KML(out_options)
88               } 
89             };
90         }
91         function init(){
92             map = new OpenLayers.Map('map');
93             var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
94                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
95
96             vectors = new OpenLayers.Layer.Vector("Vector Layer");
97
98             map.addLayers([wms, vectors]);
99             map.addControl(new OpenLayers.Control.MousePosition());
100             map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
101
102             var options = {
103                 hover: true,
104                 onSelect: serialize
105             };
106             var select = new OpenLayers.Control.SelectFeature(vectors, options);
107             map.addControl(select);
108             select.activate();
109             
110             updateFormats();
111
112             map.setCenter(new OpenLayers.LonLat(0, 0), 1);
113         }
114
115         function serialize(feature) {
116             var type = document.getElementById("formatType").value;
117             // second argument for pretty printing (geojson only)
118             var pretty = document.getElementById("prettyPrint").checked;
119             var str = formats['out'][type].write(feature, pretty);
120             // not a good idea in general, just for this demo
121             str = str.replace(/,/g, ', ');
122             document.getElementById('output').value = str;
123         }
124
125         function deserialize() {
126             var element = document.getElementById('text');
127             var type = document.getElementById("formatType").value;
128             var features = formats['in'][type].read(element.value);
129             var bounds;
130             if(features) {
131                 if(features.constructor != Array) {
132                     features = [features];
133                 }
134                 for(var i=0; i<features.length; ++i) {
135                     if (!bounds) {
136                         bounds = features[i].geometry.getBounds();
137                     } else {
138                         bounds.extend(features[i].geometry.getBounds());
139                     }
140
141                 }
142                 vectors.addFeatures(features);
143                 map.zoomToExtent(bounds);
144                 var plural = (features.length > 1) ? 's' : '';
145                 element.value = features.length + ' feature' + plural + ' added'
146             } else {
147                 element.value = 'Bad input ' + type;
148             }
149         }
150
151         // preload images
152         (function() {
153             var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
154             var onImages = [];
155             var offImages = [];
156             for(var i=0; i<roots.length; ++i) {
157                 onImages[i] = new Image();
158                 onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
159                 offImages[i] = new Image();
160                 offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
161             }
162         })();
163
164     </script>
165   </head>
166   <body onload="init()">
167     <div id="leftcol">
168         <h1 id="title">Vector Formats Example</h1>
169
170         <div id="tags">
171         </div>
172         <p id="shortdesc">
173             Shows the wide variety of vector formats that open layers supports.
174         </p>
175
176         <div id="map" class="smallmap"></div>
177         <div id="input">
178             <p>Use the drop-down below to select the input/output format
179             for vector features.  New features can be added by using the drawing
180             tools above or by pasting their text representation below.</p>
181             <label for="formatType">Format</label>
182             <select name="formatType" id="formatType">
183                 <option value="geojson" selected="selected">GeoJSON</option>
184                 <option value="kml">KML</option>
185                 <option value="georss">GeoRSS</option>
186                 <option value="gml2">GML (v2)</option>
187                 <option value="gml3">GML (v3)</option>
188                 <option value="wkt">Well-Known Text (WKT)</option>
189             </select>
190             &nbsp;
191             <label for="prettyPrint">Pretty print</label>
192             <input id="prettyPrint" type="checkbox"
193                    name="prettyPrint" value="1" />
194             <br />
195             Input Projection: <select id="inproj" onchange='updateFormats()'>
196               <option value="EPSG:4326" selected="selected">EPSG:4326</option>
197               <option value="EPSG:900913">Spherical Mercator</option>
198             </select> <br /> 
199             Output Projection: <select id="outproj" onchange='updateFormats()'>
200               <option value="EPSG:4326" selected="selected">EPSG:4326</option>
201               <option value="EPSG:900913">Spherical Mercator</option>
202             </select> 
203             <br /> 
204             <textarea id="text">paste text here...</textarea>
205             <br />
206             <input type="button" value="add feature" onclick="deserialize();" />
207         </div>
208
209         <div id="docs">
210         </div>
211
212     </div>
213     <div id="info">
214         <p>Use the tools to the left to draw new polygons, lines, and points.
215         After drawing some new features, hover over a feature to see the
216         serialized version below.</p>
217         <textarea id="output"></textarea>
218     </div>
219
220   </body>
221 </html>