/
index.html
151 lines (116 loc) · 8.52 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Geo docs</title>
<meta name="description" content="Documentation for jQuery Geo, a JavaScript geospatial mapping plugin from Applied Geographics">
<meta name="author" content="Ryan Westphal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css?v=2">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
</head>
<body>
<div id="index" data-role="page" data-theme="b">
<div data-role="header">
<h1><img src="images/$.geo-logo.png" alt="" />jQuery Geo docs</h1>
</div>
<div data-role="content">
<h2>Welcome!</h2>
<p>jQuery Geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, MapQuest, Yahoo! & Esri are generally free but not open.</p>
<ul data-role="listview" data-inset="true">
<li><a href="http://github.com/AppGeo/geo" rel="external">project source on GitHub</a></li>
</ul>
<p>Please read the following sections for more information and examples, and thank you for considering us! If you have any questions feel free to ask the lead developer on Twitter.</p>
<ul data-role="listview" data-inset="true">
<li><a href="https://twitter.com/#!/ryanttb" rel="external">ryanttb on Twitter</a></li>
</ul>
<h2>docs</h2>
<ul data-role="listview" data-inset="true">
<li><a href="what/index.html">what?</a></li>
<li><a href="quickstart/index.html">quickstart</a></li>
<li><a href="html/index.html">html</a></li>
<li><a href="geomap/index.html">geomap widget</a></li>
<li><a href="geo/index.html">geo namespace</a></li>
</ul>
<p>This project takes pride in having easy-to-use, up-to-date documentation. Before any code is committed, these docs are updated with any public API changes and sometimes internal design decisions. The side effect is that the documenation may be ahead of the code at times. Also, any undocumented features you find in the source should be ignored or asked about.</p>
<h2>examples</h2>
<p>Now that that's out of the way, here are some code examples! Use these as a suppliment to reading the above sections but above all, have fun!</p>
<h3>"everything" examples</h3>
<p>These first two examples attempt to let you test as many of jQuery Geo's features as possible on one page. The first link is a tiled map, i.e., it has a tilingScheme, set-in-stone zoom levels, and uses at least one tiled map service object. The second link is a dynamic map, i.e., it does not have a tilingScheme, displays fully dynamic data from MassGIS, and uses all shingled map service objects. The second type of map usually redraws slower but allows for more accurate zooming.</p>
<ul data-role="listview" data-inset="true">
<li><a href="examples/all-tiled.html" rel="external">tiled</a></li>
<li><a href="examples/all-shingled.html" rel="external">shingled</a></li>
</ul>
<p>You can find isolated examples of individual jQuery Geo features in the <a href="javascript:document.getElementById('component-examples').scrollIntoView();">component examples</a> section at the bottom of this page.<p>
<h3>demos</h3>
<p>The examples in this second set of use the features of jQuery Geo in a more interesting way. They attempt to show & test how you can use different parts jQuery Geo together to build apps and how we can integrate with external data and libraries.</p>
<ul data-role="listview" data-inset=true>
<li><a href="examples/inset.html" rel="external">Inset map</a></li>
<li><a href="examples/logo.html" rel="external">jQuery Geo logos!</a></li>
<li><a href="examples/usastates.html" rel="external">USA states</a></li>
<li><a href="examples/twitter-heat.html" rel="external">Twitter heat map</a></li>
<li><a href="examples/tracking.html" rel="external">GPS tracking</a></li>
<li><a href="examples/hurricane.html" rel="external">Hurricane tracking</a></li>
<li><a href="examples/voting.html" rel="external">MA Voting District Demographics</a></li>
</ul>
<h3>showcase</h3>
<p>This third set are more complete examples using jQuery Geo. These try to implement slimmed-down versions of an existing applications and test how jQuery Geo can be used in real-world situations.</p>
<ul data-role="listview" data-inset=true>
<li><a href="examples/utah/index.html" rel="external"><h3>Atlas Utah!</h3><p>implementation of Utah map cache viewer</p></a></li>
<li><a href="http://twheat.jquerygeo.com/" rel="external"><h3>Twheat !</h3><p>full implementation of our Twitter heat map demo</p></a></li>
</ul>
<h3 id="component-examples">component examples</h3>
<p>This last set of examples attempts to test various components of jQuery Geo in an insolated way.</p>
<ul data-role="listview" data-inset="true">
<li><a href="examples/simplest.html" rel="external">simplest</a></li>
<li><a href="examples/mobile.html" rel="external">mobile</a></li>
<li><a href="examples/proj.html" rel="external">proj</a></li>
<li><a href="examples/bbox.html" rel="external">bbox</a></li>
<li><a href="examples/center.html" rel="external">center, zoom, & pixelSize options</a></li>
<li><a href="examples/static.html" rel="external">static mode</a></li>
<li><a href="examples/mode-zoom.html" rel="external">zoom mode</a></li>
<li><a href="examples/zoom.html" rel="external">zoom method</a></li>
<li><a href="examples/panscroll.html" rel="external">pannable & scroll options</a></li>
<li><a href="examples/refresh.html" rel="external">refresh</a></li>
<li><a href="examples/destroy.html" rel="external">destroy</a></li>
<li><a href="examples/insetmap.html" rel="external">inset map (multiple maps)</a></li>
<li><a href="examples/tiledservices.html" rel="external">tiled services</a></li>
<li><a href="examples/shingled.html" rel="external">shingled (dynamic) services</a></li>
<li><a href="examples/stringsrc.html" rel="external">string service src</a></li>
<li><a href="examples/tilingScheme.html" rel="external">tilingScheme</a></li>
<li><a href="examples/opacity.html" rel="external">opacity & toggle</a></li>
<li><a href="examples/events.html" rel="external">events</a></li>
<li><a href="examples/append.html" rel="external">append</a></li>
<li><a href="examples/shapeStyle.html" rel="external">shapeStyle</a></li>
<li><a href="examples/find.html" rel="external">find</a></li>
<li><a href="examples/remove.html" rel="external">remove</a></li>
<li><a href="examples/empty.html" rel="external">empty</a></li>
<li><a href="examples/drag.html" rel="external">drag</a></li>
<li><a href="examples/draw.html" rel="external">draw</a></li>
<li><a href="examples/measure.html" rel="external">measure</a></li>
<li><a href="examples/drawStyle.html" rel="external">drawStyle</a></li>
<li><a href="examples/label.html" rel="external">label</a></li>
<li><a href="examples/geo-geometry.html" rel="external">geometry functions</a></li>
</ul>
<h2>internals</h2>
<p>Lastly, short of looking through the source code you can read a bit about the internal design decisions we made in the following section.</p>
<ul data-role="listview" data-inset=true>
<li><a href="internals/index.html">internals</a></li>
</ul>
<img src="images/bostonbuilt.png" alt="Boston Built badge"/>
</div>
</div> <!-- end of #container -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
<script src="js/script.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script>
var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s);
} (document, 'script'));
</script>
</body>
</html>