summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/vector-formats.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/vector-formats.html')
-rw-r--r--misc/openlayers/examples/vector-formats.html240
1 files changed, 0 insertions, 240 deletions
diff --git a/misc/openlayers/examples/vector-formats.html b/misc/openlayers/examples/vector-formats.html
deleted file mode 100644
index 2b45b54..0000000
--- a/misc/openlayers/examples/vector-formats.html
+++ /dev/null
@@ -1,240 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <title>Vector Formats</title>
- <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
- <!--[if lte IE 6]>
- <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
- <![endif]-->
- <link rel="stylesheet" href="style.css" type="text/css">
- <style type="text/css">
- input, select, textarea {
- font: 0.9em Verdana, Arial, sans-serif;
- }
- #leftcol {
- position: absolute;
- top: 0;
- left: 1em;
- padding: 0;
- width: 517px;
- }
- #map {
- width: 512px;
- height: 225px;
- border: 1px solid #ccc;
- }
- #input {
- width: 512px;
- }
- #text {
- font-size: 0.85em;
- margin: 1em 0 1em 0;
- width: 100%;
- height: 10em;
- }
- #info {
- position: relative;
- padding: 2em 0;
- margin-left: 540px;
- }
- #output {
- font-size: 0.8em;
- width: 100%;
- height: 512px;
- border: 0;
- }
- p {
- margin: 0;
- padding: 0.75em 0 0.75em 0;
- }
- </style>
- <script src="../lib/Firebug/firebug.js"></script>
- <script src="../lib/OpenLayers.js"></script>
- <script type="text/javascript">
- var map, vectors, formats;
- function updateFormats() {
- var in_options = {
- 'internalProjection': map.baseLayer.projection,
- 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("inproj").value)
- };
- var out_options = {
- 'internalProjection': map.baseLayer.projection,
- 'externalProjection': new OpenLayers.Projection(OpenLayers.Util.getElement("outproj").value)
- };
- var gmlOptions = {
- featureType: "feature",
- featureNS: "http://example.com/feature"
- };
- var gmlOptionsIn = OpenLayers.Util.extend(
- OpenLayers.Util.extend({}, gmlOptions),
- in_options
- );
- var gmlOptionsOut = OpenLayers.Util.extend(
- OpenLayers.Util.extend({}, gmlOptions),
- out_options
- );
- var kmlOptionsIn = OpenLayers.Util.extend(
- {extractStyles: true}, in_options);
- formats = {
- 'in': {
- wkt: new OpenLayers.Format.WKT(in_options),
- geojson: new OpenLayers.Format.GeoJSON(in_options),
- georss: new OpenLayers.Format.GeoRSS(in_options),
- gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
- gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
- kml: new OpenLayers.Format.KML(kmlOptionsIn),
- atom: new OpenLayers.Format.Atom(in_options),
- gpx: new OpenLayers.Format.GPX(in_options),
- encoded_polyline: new OpenLayers.Format.EncodedPolyline(in_options)
- },
- 'out': {
- wkt: new OpenLayers.Format.WKT(out_options),
- geojson: new OpenLayers.Format.GeoJSON(out_options),
- georss: new OpenLayers.Format.GeoRSS(out_options),
- gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
- gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
- kml: new OpenLayers.Format.KML(out_options),
- atom: new OpenLayers.Format.Atom(out_options),
- gpx: new OpenLayers.Format.GPX(out_options),
- encoded_polyline: new OpenLayers.Format.EncodedPolyline(out_options)
- }
- };
- }
- function init(){
- map = new OpenLayers.Map('map');
- var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
- "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
-
- vectors = new OpenLayers.Layer.Vector("Vector Layer");
-
- map.addLayers([wms, vectors]);
- map.addControl(new OpenLayers.Control.MousePosition());
- map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
-
- var options = {
- hover: true,
- onSelect: serialize
- };
- var select = new OpenLayers.Control.SelectFeature(vectors, options);
- map.addControl(select);
- select.activate();
-
- updateFormats();
-
- map.setCenter(new OpenLayers.LonLat(0, 0), 1);
- }
-
- function serialize(feature) {
- var type = document.getElementById("formatType").value;
- // second argument for pretty printing (geojson only)
- var pretty = document.getElementById("prettyPrint").checked;
- var str = formats['out'][type].write(feature, pretty);
- // not a good idea in general, just for this demo
- str = str.replace(/,/g, ', ');
- document.getElementById('output').value = str;
- }
-
- function deserialize() {
- var element = document.getElementById('text');
- var type = document.getElementById("formatType").value;
- var features = formats['in'][type].read(element.value);
- var bounds;
- if(features) {
- if(features.constructor != Array) {
- features = [features];
- }
- for(var i=0; i<features.length; ++i) {
- if (!bounds) {
- bounds = features[i].geometry.getBounds();
- } else {
- bounds.extend(features[i].geometry.getBounds());
- }
-
- }
- vectors.addFeatures(features);
- map.zoomToExtent(bounds);
- var plural = (features.length > 1) ? 's' : '';
- element.value = features.length + ' feature' + plural + ' added';
- } else {
- element.value = 'Bad input ' + type;
- }
- }
-
- // preload images
- (function() {
- var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
- var onImages = [];
- var offImages = [];
- for(var i=0; i<roots.length; ++i) {
- onImages[i] = new Image();
- onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
- offImages[i] = new Image();
- offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
- }
- })();
-
- </script>
- </head>
- <body onload="init()">
- <div id="leftcol">
- <h1 id="title">Vector Formats Example</h1>
-
- <div id="tags">
- vector, geojson, atom, kml, georss, gml, wkt, advanced, spherical, mercator
- </div>
- <p id="shortdesc">
- Shows the wide variety of vector formats that open layers supports.
- </p>
-
- <div id="map" class="smallmap"></div>
- <div id="input">
- <p>Use the drop-down below to select the input/output format
- for vector features. New features can be added by using the drawing
- tools above or by pasting their text representation below.</p>
- <label for="formatType">Format</label>
- <select name="formatType" id="formatType">
- <option value="geojson" selected="selected">GeoJSON</option>
- <option value="atom">Atom</option>
- <option value="kml">KML</option>
- <option value="georss">GeoRSS</option>
- <option value="gml2">GML (v2)</option>
- <option value="gml3">GML (v3)</option>
- <option value="wkt">Well-Known Text (WKT)</option>
- <option value="gpx">GPX</option>
- <option value="encoded_polyline">Encoded Polyline</option>
- </select>
- &nbsp;
- <label for="prettyPrint">Pretty print</label>
- <input id="prettyPrint" type="checkbox"
- name="prettyPrint" value="1" />
- <br>
- Input Projection: <select id="inproj" onchange='updateFormats()'>
- <option value="EPSG:4326" selected="selected">EPSG:4326</option>
- <option value="EPSG:900913">Spherical Mercator</option>
- </select> <br>
- Output Projection: <select id="outproj" onchange='updateFormats()'>
- <option value="EPSG:4326" selected="selected">EPSG:4326</option>
- <option value="EPSG:900913">Spherical Mercator</option>
- </select>
- <br>
- <textarea id="text">paste text here...</textarea>
- <br>
- <input type="button" value="add feature" onclick="deserialize();" />
- </div>
-
- <div id="docs">
- </div>
-
- </div>
- <div id="info">
- <p>Use the tools to the left to draw new polygons, lines, and points.
- After drawing some new features, hover over a feature to see the
- serialized version below.</p>
- <textarea id="output"></textarea>
- </div>
-
- </body>
-</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-22 19:37:54 +0000