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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Geo</title>
<meta name="description" content="jQuery Geo - A spatial mapping plugin for jQuery" />
<meta name="author" content="Ryan Westphal" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
<style type="text/css">
html { font:13px/1.231 sans-serif; }
body, h1 { margin: 0; padding: 0; }
body, select, input, textarea
{
color: #444;
}
pre
{
white-space: pre-wrap;
white-space: pre-line;
}
.geomap
{
background: #444;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.container
{
position: relative;
margin: 32px auto;
width: 80%;
}
.project-links
{
float: right;
}
.header
{
margin: 32px 0 0 10%;
}
.header img
{
height: 64px;
width: 64px;
vertical-align: bottom;
}
.header h1
{
display: inline-block;
}
.header h1 .framework
{
color: #fff;
font-size: 32px;
}
.header h1 .subtitle
{
color: #faa;
display: block;
font-size: 14px;
font-style: italic;
margin-left: 48px;
}
h2
{
clear: both;
margin-bottom: 8px;
}
time
{
font-size: 8pt;
font-style: italic;
margin: 2px;
}
.main
{
background: #fff;
border-radius: 8px;
box-shadow: 2px 2px #555;
margin-top: 128px;
padding: 32px;
}
.thanks
{
list-style-type: none;
}
.thanks li
{
display: inline-block;
margin: 1em;
}
#jQueryLogo
{
background: #39414A;
border-radius: 8px;
padding: .5em;
}
</style>
</head>
<body>
<div class="geomap">
<div class="header">
<img src="apple-touch-icon.png" alt="" />
<h1><span class="framework">jQuery Geo</span><span class="subtitle">write less, map more</span></h1>
</div>
</div>
<div class="container">
<div class="main" role="main">
<div class="nav project-links">
<a href="http://jquerygeo.com/1.0b1/" title="Documentation and demos">Docs & Demos</a>
<a href="https://github.com/AppGeo/geo/" title="Source code on GitHub">GitHub</a>
</div>
<h2>jQuery Geo - an interactive mapping plugin</h2>
<p>jQuery Geo, an open-source geospatial mapping project from Applied Geographics, provides a streamlined JavaScript API for a large percentage of your online mapping needs. Whether you just want to display a map on a wep page as quickly as possible or you are a more advanced GIS user, jQuery Geo can help!</p>
<p>You can check back here or follow <a href="https://twitter.com/jQueryGeo">@jQueryGeo</a> on Twitter for release announcements. Also, head over to the lead developer's Twitter account, <a href="https://twitter.com/ryanttb">@ryanttb</a>, for development info, links, or to ask questions.</p>
<h2>Download</h2>
<p>Using jQuery Geo requires adding one element, including one script (apart from jQuery itself) and calling one function. The following copy-and-paste snippet will help you get started.</p>
<pre><div id="map" style="height: 320px;"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
<script>$(function() { $( "#map" ).geomap( ); });</script></pre>
<p>code.jquerygeo.com is on the CloudFlare Content Delivery Network (CDN) so our minified, gzipped library will get to your client as fast as possible!</p>
<h2>Beta 1 released!</h2>
<time>2012-07-30</time>
<p>Over 120 commits and five months after the release of alpha 4, jQuery Geo is now feature complete with what we planned for version 1.0!</p>
<p>The highlights are mentioned here and you can follow the link at the end to read more details.</p>
<h3>New interaction engine</h3>
<p>User interaction is a big part of an interactive map widget, obviously!, and in beta 1 we have optimized panning, zooming, and how they work together. Your maps should feel more responsive overall.</p>
<h3>Wicked fast mobile</h3>
<p>Using CSS3 features on modern mobile devices brings tremendous speed improvements to iOS and Android.</p>
<h3>New default map</h3>
<p>Probably the most noticable change, jQuery Geo is still using OpenStreetMap data by default but in the form of tiles rendered by <a href="http://open.mapquest.com/" target="_blank">mapquest open</a>. It's your same open data but the servers are faster and the cartography is nicer.</p>
<h3>New build environment</h3>
<p>jQuery Geo now builds with <a href="https://github.com/cowboy/grunt" target="_blank">grunt</a> from Ben Alman making it 100% lint free, smaller, and supporting the next generation of the jQuery Plugins website.</p>
<h3>Drag modes</h3>
<p>There is a whole new mode style called drag. Previously, draw modes such as drawPoint and drawPolygon, allow the user to perform individual clicks or taps to create shapes. New modes have been added that trigger shape events on a single motion: dragBox and dragCircle. They disable map panning and allow quick digitization of rectangles and circles, great for spatial queries and selecting! They both send GeoJSON Polygon objects as the geo argument to your shape event handler.</p>
<h3>Load events</h3>
<p>Two new events, loadstart and loadend, allow you to display indicators or give feedback to users while map tiles or other images are downloading.</p>
<h3>Forcing refresh</h3>
<p>Sometimes you have time-dependent, continuously updated data and images coming from a map server. New arguments to refresh allow you to get updated images even if the map's viewport (and thus, image URLs) hasn't changed. You can also refresh only specific services that you know will have changed, leaving other more static images in place.</p>
<h3>Zoom level constraints</h3>
<p>Whether you have a tiled or non-tiled (all shingled) map, you can now limit how far in and/or out a user can zoom with the new zoomMax and zoomMin options.</p>
<h3>Breaking</h3>
<p>There is one, small breaking change in how all template strings are processed. This is due to a change (and finalization in the API) to jsRender, which jQuery Geo uses for a service's src template strings and measureLabels template strings. In short, use {{:variable}} where you used to use {{=variable}}. You can read more about this change on Boris Moore's blog post: <a href="http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html" target="_blank">http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html</a>.</p>
<h3>Enjoy!</h3>
<p>Thanks for checking out jQuery Geo! We hope you find it useful and will keep you updated as we press on to a 1.0 release!</p>
<p><a href="index-full.html">Click here to checkout the full changelog</a></p>
<h2>Edge</h2>
<p>The links above will always point to the latest stable release. However, you can test the most recently committed docs, code & demos by heading over to the test release.</p>
<a data-role="button" href="http://jquerygeo.com/test/" title="jQuery Geo test build">Test docs & demos</a>
<h2>Thanks!</h2>
<ul class="thanks">
<li>
<!-- AppGeo -->
<a href="http://www.appgeo.com"><img width="180" height="48" title="Applied Geographics" alt="" src="data:image/png;base64,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" /></a>
</li>
<li>
<!-- jQuery -->
<a href="http://jquery.com"><img id="jQueryLogo" title="jQuery" alt="" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></a>
</li>
<li>
<!-- html5 -->
<img title="HTML5" alt="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_64.png" />
</li>
<li>
<!-- (mt) -->
<a href="http://mediatemple.net"><img title="Media Temple" alt="" src="http://mediatemple.net/_images/partnerlogos/mt-120x60-dk.png" /></a>
</li>
<li>
<!-- CloudFlare -->
<a href="http://www.cloudflare.com"><img title="CloudFlare" alt="" src="https://www.cloudflare.com/media/images/web-badges/cf-web-badges-a-gray-on.png" /></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
<script type="text/javascript">
$(function () {
var map;
$(".nav").buttonset();
$("a").filter("[data-role='button']").button();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
initMap([p.coords.longitude, p.coords.latitude]);
}, function (error) {
initMap();
});
} else {
initMap();
}
function initMap(center) {
map = $(".geomap").geomap({
center: center || [-71.0597732, 42.3584308],
zoom: 7
});
$( ".osm" ).geomap("opacity", .5);
}
});
</script>
<script type="text/javascript">
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>
|
