[OpenLayers-Commits] r12459 - addins/timedpointtrack/trunk/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Jan 30 18:16:33 EST 2012
Author: ahocevar
Date: 2012-01-30 15:16:32 -0800 (Mon, 30 Jan 2012)
New Revision: 12459
Added:
addins/timedpointtrack/trunk/examples/time-select-control-geojson.html
Log:
Adding example
Added: addins/timedpointtrack/trunk/examples/time-select-control-geojson.html
===================================================================
--- addins/timedpointtrack/trunk/examples/time-select-control-geojson.html (rev 0)
+++ addins/timedpointtrack/trunk/examples/time-select-control-geojson.html 2012-01-30 23:16:32 UTC (rev 12459)
@@ -0,0 +1,103 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
+ <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="../theme/default/timedpointtrack.css" type="text/css" />
+ <style type="text/css">
+ #map {
+ width: 800px;
+ height: 400px;
+ border: 1px solid black;
+ }
+ </style>
+ <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
+ <script src="../lib/TimedPointTrack.js"></script>
+<!--<script src="http://www.javascripttoolbox.com/libsource.php/date/source/date.js"></script>-->
+ <script type="text/javascript">
+ var map, geojson, popup, timeBar, timepos;
+
+ OpenLayers.ProxyHost = "proxy.cgi?url=";
+ function init(){
+ map = new OpenLayers.Map('map', {allOverlays: true, maxResolution:'auto'});
+ map.addControl(new OpenLayers.Control.LayerSwitcher());
+ timeBar = new OpenLayers.Control.TimeSliderBar( {continuous: true} );
+ map.addControl(timeBar);
+ timepos = new OpenLayers.Control.TimeDisplay();
+ if (Date.$VERSION){ // to use Date formatting functions from javascripttoolbox just uncomment the <script> statement above
+ timepos.formatOutput = function (d) {
+ if (d) return d.format('MMM d, yyyy, hhmm');
+ }
+ }
+ map.addControl(timepos);
+ map.addControl(new OpenLayers.Control.MousePosition());
+ }
+
+ function addUrl() {
+ var urlObj = OpenLayers.Util.getElement('url');
+ var value = urlObj.value;
+ var parts = value.split("/");
+ geojson = new OpenLayers.Layer.TimedPointTrack(parts[parts.length-1], value, {
+ format: new OpenLayers.Format.GeoJSON({ignoreExtraDims: true}),
+ styleMap: new OpenLayers.StyleMap({
+ "default": OpenLayers.Util.applyDefaults({
+ cursor: "pointer",
+ pointRadius: 10,
+ graphicOpacity: 1,
+ externalGraphic: "http://openlayers.org/dev/img/marker.png",
+ graphicYOffset: -19
+ }, OpenLayers.Feature.Vector.style["default"]),
+ "select": {
+ externalGraphic: "http://openlayers.org/dev/img/marker-gold.png",
+ strokeColor: "yellow",
+ strokeWidth: 2
+ }
+ })
+ });
+ map.addLayer(geojson);
+
+ // SelectFeature control for popups
+ var selectFeature = new OpenLayers.Control.SelectFeature(geojson, {
+ onSelect: function(feature) {
+ popup = new OpenLayers.Popup.FramedCloud("event",
+ feature.geometry.getBounds().getCenterLonLat(),
+ new OpenLayers.Size(100,100),
+ "<h2>"+feature.attributes.title + "</h2>" + feature.attributes.description,
+ null, true, OpenLayers.Function.bind(
+ function(){this.unselect(feature);}, this));
+ feature.popup = popup;
+ map.addPopup(popup);
+ },
+ onUnselect: function(feature) {
+ map.removePopup(feature.popup);
+ feature.popup.destroy();
+ feature.popup = null;
+ }
+ });
+ map.addControl(selectFeature);
+ selectFeature.activate();
+
+ geojson.events.register("loadend", null, function() {
+ timeBar.rangeFromTrack(geojson.features[0].geometry);
+ map.zoomToExtent(geojson.getDataExtent());
+ });
+ }
+
+ function setTime() {
+ var targetdate = OpenLayers.Date.smartParse(OpenLayers.Util.getElement('date').value);
+ map.setTime(targetdate);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1>Select time in time-aware layers</h1>
+ <p style="font-size:.9em;">This demo uses OpenLayers.Control.TimeSliderBar with OpenLayers.Layer.TimedPointTrack. The track is created from GeoJSON, and the vertices can be tracked based on their temporal attribute.</a></p>
+ <form onsubmit="return false;">
+ Load GeoRSS URL: <input type="text" id="url" size="50" value="json/track1.json" /><input type="submit" onclick="addUrl(); return false;" value="Load JSON" onsubmit="addUrl(); return false;" />
+ </form> <form onsubmit="return false;">
+ Selected time: <input type="text" id="date" value="1995-12-12T09:20:00Z" > <input type="submit" onSubmit="setTime(); return false;" onClick="setTime(); return false;">
+ </form>
+ <p>The above input box allows the input of a URL to a GeoJSON file. This can be local to the HTML page -- for example, entering 'json/track1.json' will work by default.</p>
+ <p>The example shows a track, displayed as a line. The time-select control in the lower right can be used to select a certain time for the displayed layers, either roughly by dragging the bar, or step by step pressing the + and - icons.</p>
+ <div id="map"></div>
+ </body>
+</html>
More information about the Commits
mailing list