-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
115 lines (108 loc) · 5.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Cartagen</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!--[if IE]><script type="text/javascript" src="cartagen/excanvas.js"></script><![endif]-->
<script src="cartagen.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<script type="text/javascript" charset="utf-8">
Cartagen.setup({
stylesheet: "style.gss",
static_map: true,
static_map_layers: [
"samples/rome/park.js",
"samples/rome/rail.js",
"samples/rome/waterway.js",
"samples/rome/primary.js",
"samples/rome/secondary.js",
"samples/rome/building.js",
"samples/rome/area.js",
// "more.json"
],
lat: 41.891,
lng: 12.4902,
// debug: true
})
</script>
</head>
<body>
<div id="google" style="display:none;">Cartagen is a set of tools for mapping, enabling users to view and configure live streams of geographic data in a dynamic, personally relevant way. Today's mapping software is largely based on static data sets, and neither incorporates the time dimension in its display nor provides for real-time data streams. Cartagen helps users to analyze and view collected and shared geographic and temporal data from multiple sources.</div>
<div id="browsers" style="display:none;">
<h3>WHOOPS</h3>
<p>Cartagen is built on standards-compliant HTML 5 and Canvas, but is in beta stage right now. It works best in Firefox, Chrome, or Safari, but IE8/9, Mobile Safari, and Android would not be hard to implement.</p>
</div>
<div id="canvas"></div>
<div class="overlay" id="gss" style="display:none;">
<h3>Import GSS:</h3>
<form action="javascript:void(0);" method="get" accept-charset="utf-8" onSubmit="Style.load_styles($('import_gss').value)">
<p>
<input style="font-size:0.8em;" type="text" name="import_gss" value="http://" id="import_gss">
<input type="submit" value="Apply">
</p>
</form>
<h3>Edit GSS:</h3>
<form action="javascript:void(0);" method="get" accept-charset="utf-8" onSubmit="Style.apply_gss($('gss_textarea').value, true)">
<textarea tabindex="1" id="gss_textarea" rows="30" cols="40"></textarea>
<p><input tabindex="2" type="submit" value="Apply style"> <a href="javascript:void(0);" onClick="$('gss').toggle();Cartagen.live_gss = false;">cancel</a> | <a href="http://wiki.cartagen.org/wiki/show/GssUsage">GSS Usage »</a></p>
</form>
</div>
<div id="brief">
<script type="text/javascript" charset="utf-8">
if (Prototype.Browser.MobileSafari) {$('brief').hide()}
</script>
<div class="column first" id="brief_first">
<h2><img src="images/cartagen.png" alt="Cartagen"><br />
<small>a framework for dynamic mapping<br />
by <a href="http://unterbahn.com">Jeffrey Warren</a>
<br />
<a href="https://github.com/jywarren/cartagen/wiki">More Info</a> |
<a href="https://github.com/jywarren/cartagen/">Source</a> |
<a href="groups.google.com/group/cartagen-dev">Mailing list</a>
</small></h2>
<script type="text/javascript" charset="utf-8">
function find(q) {
q = q.replace(' ','-')
document.location = "/find/"+q
}
</script>
<p><form action="javascript:void(0);" method="get" accept-charset="utf-8" onSubmit="find($('find_field').value)">
Go somewhere: <br />
<input id="find_field" style="width:170px;" tabindex="3" type="text" name="id" value="">
<input type="button" name="some_name" tabindex="4" value="Go">
</form></p>
<p><a href="javascript:void(0);" onClick="Cartagen.show_gss_editor()">Edit GSS »</a><br />
<a href="javascript:void(0);" onClick="Cartagen.redirect_to_image()">Download image »</a><br />
<a href="javascript:void(0);" onClick="Interface.download_bbox()">Download data »</a></p>
</div>
<div id="description">
<div style="float:right;margin:5px;"><a href="javascript:void(0);" onClick="$('description').hide();$('brief').style.width = '28%';$('brief_first').style.width = '92%';">[hide]</a></div>
<div class="column">
<h3>GSS: geo style sheets</h3>
<p>Just like CSS for styling web pages, GSS is a specification for designing maps. Adapted for dynamic data sources, GSS can define changing geographic elements, display multiple datasets, and even respond to contextual tags like "condition:poor".</p>
<p><a href="samples/rome/style.gss" target="_blank">Click here</a> to view styles for the above map.</p>
</div>
<div class="column">
<h3>Vector web mapping</h3>
<p>Instead of sending pre-rendered tiles for every zoom level, Cartagen draws maps dynamically on the client side. This means maps can move, adapt, and redraw, and can include as many layers of data as needed. Vector mapping is done in native HTML 5, which runs on the iPhone and the Android platforms, and uses less bandwidth overall. Data displayed here is from <a href="http://openstreetmap.org">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)</p>
</div>
<div class="column">
<h3>Stylesheet Gallery</h3>
<p>See a variety of stylesheets demonstrating Cartagen's abilities:</p>
<a href="?gss=/styles/authors.gss"><img src="http://farm3.static.flickr.com/2594/3966967238_7a7bfffac3_s.jpg"/></a>
<a href="?gss=/styles/warcraft.gss"><img src="http://farm3.static.flickr.com/2510/3753496047_fe4565959b_s.jpg"/></a>
<ul>
<li><a href="?gss=/styles/authors.gss">Color by author</a></li>
<li><a href="?gss=/styles/localization.gss">Language by param</a> (if exists)</li>
<li><a href="?gss=/styles/roads.gss">Road quality</a> (if exists)</li>
<li><a href="?gss=/styles/width.gss">Road width</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>