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>