1 <html xmlns="http://www.w3.org/1999/xhtml">
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;
20 border: 1px solid #ccc;
44 padding: 0.75em 0 0.75em 0;
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() {
53 'internalProjection': map.baseLayer.projection,
54 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
57 'internalProjection': map.baseLayer.projection,
58 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
61 featureType: "feature",
62 featureNS: "http://example.com/feature"
64 var gmlOptionsIn = OpenLayers.Util.extend(
65 OpenLayers.Util.extend({}, gmlOptions),
68 var gmlOptionsOut = OpenLayers.Util.extend(
69 OpenLayers.Util.extend({}, gmlOptions),
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)
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)
92 map = new OpenLayers.Map('map');
93 var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
94 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
96 vectors = new OpenLayers.Layer.Vector("Vector Layer");
98 map.addLayers([wms, vectors]);
99 map.addControl(new OpenLayers.Control.MousePosition());
100 map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
106 var select = new OpenLayers.Control.SelectFeature(vectors, options);
107 map.addControl(select);
112 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
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;
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);
131 if(features.constructor != Array) {
132 features = [features];
134 for(var i=0; i<features.length; ++i) {
136 bounds = features[i].geometry.getBounds();
138 bounds.extend(features[i].geometry.getBounds());
142 vectors.addFeatures(features);
143 map.zoomToExtent(bounds);
144 var plural = (features.length > 1) ? 's' : '';
145 element.value = features.length + ' feature' + plural + ' added'
147 element.value = 'Bad input ' + type;
153 var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
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";
166 <body onload="init()">
168 <h1 id="title">Vector Formats Example</h1>
173 Shows the wide variety of vector formats that open layers supports.
176 <div id="map" class="smallmap"></div>
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>
191 <label for="prettyPrint">Pretty print</label>
192 <input id="prettyPrint" type="checkbox"
193 name="prettyPrint" value="1" />
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>
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>
204 <textarea id="text">paste text here...</textarea>
206 <input type="button" value="add feature" onclick="deserialize();" />
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>