[OpenLayers-Commits] r3619 - sandbox/tschaub/geojson/examples
commits at openlayers.org
commits at openlayers.org
Fri Jul 6 13:10:22 EDT 2007
Author: tschaub
Date: 2007-07-06 13:10:22 -0400 (Fri, 06 Jul 2007)
New Revision: 3619
Modified:
sandbox/tschaub/geojson/examples/geojson.html
Log:
give the geojson.html example some style
Modified: sandbox/tschaub/geojson/examples/geojson.html
===================================================================
--- sandbox/tschaub/geojson/examples/geojson.html 2007-07-06 17:09:52 UTC (rev 3618)
+++ sandbox/tschaub/geojson/examples/geojson.html 2007-07-06 17:10:22 UTC (rev 3619)
@@ -1,43 +1,59 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
- <title>GeoJSON</title>
+ <title>Vector Formats</title>
<style type="text/css">
- #info {
+ html, body {
+ margin: 0;
+ padding: 1em;
+ font: 0.9em Verdana, Arial, sans serif;
+ }
+ input, select, textarea {
+ font: 0.9em Verdana, Arial, sans serif;
+ }
+ h2 {
+ margin-top: 0.75em;
+ font-size: 1.6em;
+ }
+ #leftcol {
position: absolute;
- top: 70px;
- left: 550px;
- width: 350px;
- padding: 10px;
+ top: 0;
+ left: 1em;
+ padding: 0;
+ width: 455px;
}
#map {
- width: 512px;
- height: 256px;
+ width: 450px;
+ height: 225px;
border: 1px solid #ccc;
}
- #controls {
- width: 512px;
+ #input {
+ width: 450px;
}
- #geoJSONInput {
- float: right;
- margin-left: 1em;
+ #text {
+ font-size: 0.85em;
+ margin: 1em 0 1em 0;
+ width: 100%;
+ height: 10em;
}
- #controlToggle {
- margin: 0;
- padding-left: 0.5em;
+ #info {
+ position: relative;
+ padding: 2em 0;
+ margin-left: 470px;
}
- #controlToggle li {
- list-style: none;
+ #output {
+ padding-top: 1em;
+ font-size: 0.85em;
}
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 src="../lib/Firebug/DebugOpenLayers.js"></script>
<script type="text/javascript">
<!--
- var map, drawControls, geojson, vectors;
+ var map, vectors, drawControls, formats, select;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
@@ -46,117 +62,101 @@
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wms, vectors]);
- map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
+ map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
var options = {
hover: true,
- onSelect: displayGeoJSON
+ onSelect: serialize
};
-
- drawControls = {
- point: new OpenLayers.Control.DrawFeature(vectors,
- OpenLayers.Handler.Point),
- line: new OpenLayers.Control.DrawFeature(vectors,
- OpenLayers.Handler.Path),
- polygon: new OpenLayers.Control.DrawFeature(vectors,
- OpenLayers.Handler.Polygon),
- hover: new OpenLayers.Control.SelectFeature(vectors, options)
+ select = new OpenLayers.Control.SelectFeature(vectors, options);
+ map.addControl(select);
+ select.activate();
+
+ formats = {
+ wkt: new OpenLayers.Format.WKT(),
+ geojson: new OpenLayers.Format.GeoJSON()
};
- for(var key in drawControls) {
- map.addControl(drawControls[key]);
- }
-
- geojson = new OpenLayers.Format.GeoJSON();
-
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
- document.getElementById('noneToggle').checked = true;
}
-
- function toggleControl(element) {
- for(key in drawControls) {
- var control = drawControls[key];
- if(element.value == key && element.checked) {
- control.activate();
- } else {
- control.deactivate();
- }
- }
- }
- function displayGeoJSON(feature) {
- var json = geojson.write(feature);
+ function serialize(feature) {
+ var type = document.getElementById("formatType").value;
+ var str = formats[type].write(feature);
// not a good idea in general, just for this demo
- json = json.replace(/,/g, ', ');
- document.getElementById('info').innerHTML = json;
+ str = str.replace(/,/g, ', ');
+ str = str.replace(/(<)/g, '<');
+ str = str.replace(/>/g, '> ');
+ document.getElementById('output').innerHTML = str;
}
- function parseGeoJSON() {
- var element = document.getElementById('geojson');
- var features = geojson.read(element.value, "FeatureCollection");
+ function deserialize() {
+ var element = document.getElementById('text');
+ var type = document.getElementById("formatType").value;
+ var features = formats[type].read(element.value);
+ var bounds;
if(features) {
- var bounds;
+ 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 GeoJSON';
+ 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()">
- <h2>OpenLayers GeoJSON Example</h2>
- <div id="info"></div>
- <div id="map"></div>
- <div id="controls">
- <p>This example uses a GeoJSON parser that follows the proposed
- GeoJSON <a href="http://wiki.geojson.org/RFC-2">specification</a>.
- You can paste the <a href="http://wiki.geojson.org/RFC-2#Examples">example</a>
- GeoJSON objects below to see what they
- look like rendered.</p>
- <div id="geoJSONInput">
- <textarea id="geojson" rows="6" cols="30">paste GeoJSON here...</textarea>
+ <div id="leftcol">
+ <h2>OpenLayers Vector Formats Example</h2>
+ <div id="map"></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="wkt">Well-Known Text (WKT)</option>
+ </select>
<br />
- <input type="button" value="add feature" onclick="parseGeoJSON();" />
+ <textarea id="text">paste text here...</textarea>
+ <br />
+ <input type="button" value="add feature" onclick="deserialize();" />
</div>
- <ul id="controlToggle">
- <li>
- <input type="radio" name="type" value="none" id="noneToggle"
- onclick="toggleControl(this);" checked="checked" />
- <label for="noneToggle">navigate</label>
- </li>
- <li>
- <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
- <label for="pointToggle">draw point</label>
- </li>
- <li>
- <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
- <label for="lineToggle">draw line</label>
- </li>
- <li>
- <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
- <label for="polygonToggle">draw polygon</label>
- </li>
- <li>
- <input type="radio" name="type" value="hover" id="hoverToggle"
- onclick="toggleControl(this);" />
- <label for="hoverToggle">view GeoJSON (on hover)</label>
- </li>
- </ul>
- <br style="clear: both;">
- <p>Note that the GeoJSON objects displayed are all "Feature" type objects.
- All types of GeoJSON objects can be read & written with the parser.
</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>
+ <p id="output"></p>
+ </div>
</body>
</html>
More information about the Commits
mailing list