summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/vector-formats.html
diff options
context:
space:
mode:
authorChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
committerChris Schlaeger <chris@linux.com>2014-08-12 21:56:44 +0200
commitea346a785dc1b3f7c156f6fc33da634e1f1a627b (patch)
treeaf67530553d20b6e82ad60fd79593e9c4abf5565 /misc/openlayers/examples/vector-formats.html
parent59741cd535c47f25971bf8c32b25da25ceadc6d5 (diff)
downloadpostrunner-ea346a785dc1b3f7c156f6fc33da634e1f1a627b.zip
Adding jquery, flot and openlayers to be included with the GEM.v0.0.4
Diffstat (limited to 'misc/openlayers/examples/vector-formats.html')
-rw-r--r--misc/openlayers/examples/vector-formats.html240
1 files changed, 240 insertions, 0 deletions
diff --git a/misc/openlayers/examples/vector-formats.html b/misc/openlayers/examples/vector-formats.html
new file mode 100644
index 0000000..2b45b54
--- /dev/null
+++ b/misc/openlayers/examples/vector-formats.html
@@ -0,0 +1,240 @@
+<!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:22:33 +0000