Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
volpino committed Aug 5, 2011
1 parent c207561 commit d6e3ab2
Show file tree
Hide file tree
Showing 9 changed files with 1,018 additions and 268 deletions.
661 changes: 661 additions & 0 deletions LICENSE

Large diffs are not rendered by default.

Empty file removed README
Empty file.
29 changes: 29 additions & 0 deletions README.textile
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.h2 OpenLayers Timeline

OpenLayers Timeline is a simple library to create a time related map with OpenLayers.
Currently it supports source data from GeoJSON or GeoRSS.

See a demo at http://volpino.github.com/openlayers-timeline/


.h3 Deps

* jQuery
* jQuery-UI Slider


.h3 Basic Usage

* Include dependancies
* create a OpenLayers Timeline object
* initialize Timeline and enjoy!


.h3 API Documentation

Write me!


.h3 Contribute!

Feel free to fork, report bugs, send patches or suggestions :D
75 changes: 75 additions & 0 deletions geojson.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!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">
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="lib/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="lib/OpenLayers.Format.GeoJSONTimeline.js" type="text/javascript"></script>
<script src="timeline.js" type="text/javascript"></script>

<script type="text/javascript">
var map, timeline;

function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}, {numZoomLevels: 5});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
timeline = new OpenLayers.Timeline({map: map,
timeline: "#timeline",
date_key: "when",
format: OpenLayers.Format.GeoJSONTimeline});

var url = "http://toolserver.org/~sonet/api_geojson.php?article=OpenLayers&callback=?";
$.getJSON(url, function(data) {
$("#status").text("Data loaded");
timeline.initTimeline(data);
});
}

function toggleCumulative() {
if ($("#cumulative").attr("checked")) {
timeline.cumulative = true;
}
else {
timeline.cumulative = false;
}
timeline.update();
}

$(document).ready(function() {
init();
timeline.cumulative = true;
$("#cumulative").attr("checked", "checked");
});
</script>
</head>
<body>
<h1 id="title">OpenLayers Timeline GeoJSON Demo</h1>
<div id="container">
<p>
The source of the data is <a href="http://toolserver.org/~sonet/api_geojson.php">Toolserver</a>.
It represents anonymous edits on the OpenLayers Wikipedia page.
</p>
<p id="status">Loading...</p>
<div id="controls">
<input type="button" onclick="timeline.togglePlay();" value="Play/Pause" />
<input type="button" onclick="timeline.fasterAnimation();" value="Faster" />
<input type="button" onclick="timeline.slowerAnimation();" value="Slower" />
<label for="cumulative">Cumulative</label>
<input id="cumulative" type="checkbox" onChange="toggleCumulative();" />
</div>
<div id="timeline"></div>
<div id="map" class="smallmap"></div>
</div>
</body>
</html>

8 changes: 5 additions & 3 deletions georss.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,17 @@
<script src="lib/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="lib/OpenLayers.Format.GeoRSSTimeline.js" type="text/javascript"></script>
<script src="timeline.js" type="text/javascript"></script>

<script type="text/javascript">
var map, timeline;

function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
{layers: 'basic'}, {numZoomLevels: 5});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
var ts_funct = function(d) {
Expand Down Expand Up @@ -60,8 +61,9 @@
</script>
</head>
<body>
<h1 id="title">OpenLayers Timeline Demo</h1>
<h1 id="title">OpenLayers Timeline GeoRSS Demo</h1>
<div id="container">
<p>You're are seeing the timeline of <a href="flickr.xml">this GeoRSS</a> taken from the GeoTagging group on Flickr</p>
<p id="status">Loading...</p>
<div id="controls">
<input type="button" onclick="timeline.togglePlay();" value="Play/Pause" />
Expand Down
58 changes: 5 additions & 53 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,16 @@
<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">
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.13.custom.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="lib/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="timeline.js" type="text/javascript"></script>

<script type="text/javascript">
var map, timeline;

function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 2);
timeline = new OpenLayers.Timeline(map, "#timeline", "when",
OpenLayers.Format.GeoJSONTimeline);

var url = "http://toolserver.org/~sonet/api_geojson.php?article=OpenLayers&callback=?";
$.getJSON(url, function(data) {
$("#status").text("Data loaded");
timeline.initTimeline(data);
});
}

function toggleCumulative() {
if ($("#cumulative").attr("checked")) {
timeline.cumulative = true;
}
else {
timeline.cumulative = false;
}
timeline.update();
}

$(document).ready(function() {
init();
timeline.cumulative = true;
$("#cumulative").attr("checked", "checked");
});
</script>
</head>
<body>
<h1 id="title">OpenLayers Timeline Demo</h1>
<div id="container">
<p id="status">Loading...</p>
<div id="controls">
<input type="button" onclick="timeline.togglePlay();" value="Play/Pause" />
<input type="button" onclick="timeline.fasterAnimation();" value="Faster" />
<input type="button" onclick="timeline.slowerAnimation();" value="Slower" />
<label for="cumulative">Cumulative</label>
<input id="cumulative" type="checkbox" onChange="toggleCumulative();" />
</div>
<div id="timeline"></div>
<div id="map" class="smallmap"></div>
<p>OpenLayers Timeline currently supports these formats (click on the links to see a demo):</p>
<ul>
<li><a href="geojson.html">GeoJSON demo</a> (data from Toolserver)</li>
<li><a href="georss.html">GeoRSS demo</a> (data from Flickr)</li>
</ul>
</div>
</body>
</html>
Expand Down
130 changes: 130 additions & 0 deletions lib/OpenLayers.Format.GeoJSONTimeline.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/**
* Copyright (C) 2008, 2009 FBK Foundation, (http://www.fbk.eu)
* Author: Federico Scrinzi @ SoNet Group
*
* OpenLayers-Timeline is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation version 3 of the License.
*/

/**
* Class: OpenLayers.Format.GeoJSONTimeline
* This class represents a GeoJSON format with time support
*/
OpenLayers.Format.GeoJSONTimeline = OpenLayers.Class(OpenLayers.Format.GeoJSON, {
past_seconds: 0,
date_key: "when",
first: undefined,
lowerlimit: undefined,
timestamp_funct: undefined,

read: function(json, type, filter) {
type = (type) ? type : "FeatureCollection";
var results = null;
var obj = null;
if (typeof json == "string") {
obj = OpenLayers.Format.JSON.prototype.read.apply(this,
[json, filter]);
} else {
obj = json;
}
if(!obj) {
OpenLayers.Console.error("Bad JSON: " + json);
} else if(typeof(obj.type) != "string") {
OpenLayers.Console.error("Bad GeoJSON - no type: " + json);
} else if(this.isValidType(obj, type)) {
switch(type) {
case "Geometry":
try {
results = this.parseGeometry(obj);
} catch(err) {
OpenLayers.Console.error(err);
}
break;
case "Feature":
try {
results = this.parseFeature(obj);
results.type = "Feature";
} catch(err) {
OpenLayers.Console.error(err);
}
break;
case "FeatureCollection":
// for type FeatureCollection, we allow input to be any type
results = [];
switch(obj.type) {
case "Feature":
try {
var r = this.parseFeature(obj);
if (r) {
results.push(r);
}
} catch(err) {
results = null;
OpenLayers.Console.error(err);
}
break;
case "FeatureCollection":
for(var i=0, len=obj.features.length; i<len; ++i) {
try {
var r = this.parseFeature(obj.features[i]);
if (r) {
results.push(r);
}
} catch(err) {
results = null;
OpenLayers.Console.error(err);
}
}
break;
default:
try {
var geom = this.parseGeometry(obj);
results.push(new OpenLayers.Feature.Vector(geom));
} catch(err) {
results = null;
OpenLayers.Console.error(err);
}
}
break;
}
}
return results;
},

parseFeature: function(obj) {
var feature, geometry, attributes, bbox, when;
attributes = (obj.properties) ? obj.properties : {};
when = attributes[this.date_key];
if (this.timestamp_funct) {
when = this.timestamp_funct(when);
}
if (when) {
if (!this.first || this.first > when) {
this.first = when;
}
if (when > this.past_seconds) {
return;
}
if (this.lowerlimit && when < this.lowerlimit) {
return;
}
}
bbox = (obj.geometry && obj.geometry.bbox) || obj.bbox;
try {
geometry = this.parseGeometry(obj.geometry);
} catch(err) {
// deal with bad geometries
throw err;
}
feature = new OpenLayers.Feature.Vector(geometry, attributes);
if(bbox) {
feature.bounds = OpenLayers.Bounds.fromArray(bbox);
}
if(obj.id) {
feature.fid = obj.id;
}
return feature;
},
CLASS_NAME: "OpenLayers.Format.GeoJSONTimeline"
});
Loading

0 comments on commit d6e3ab2

Please sign in to comment.