4 <meta charset="utf-8" />
5 <title>jQuery Geo - JavaScript mapping API</title>
6 <meta name="description" content="jQuery Geo - a JavaScript mapping and spatial API as a jQuery plugin" />
7 <meta name="author" content="Ryan Westphal" />
8 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/blitzer/jquery-ui.css" />
10 <style type="text/css">
11 html { font:13px/1.231 sans-serif; }
13 body, h1 { margin: 0; padding: 0; }
15 body, select, input, textarea
22 white-space: pre-wrap;
23 white-space: pre-line;
57 vertical-align: bottom;
62 display: inline-block;
97 box-shadow: 2px 2px #555;
104 list-style-type: none;
109 display: inline-block;
125 <img src="apple-touch-icon.png" alt="" />
126 <h1><span class="framework">jQuery Geo</span><span class="subtitle">write less, map more</span></h1>
129 <div class="container">
130 <div class="main" role="main">
132 <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
134 <g:plusone></g:plusone>
136 <div class="nav project-links">
137 <a href="http://jquerygeo.com/1.0b1/" title="Documentation and demos">Docs & Demos</a>
138 <a href="https://github.com/AppGeo/geo/" title="Source code on GitHub">GitHub</a>
141 <h2>jQuery Geo - a JavaScript mapping API</h2>
143 <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>
145 <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>
149 <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>
150 <pre><div id="map" style="height: 320px;"></div>
151 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
152 <script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
153 <script>$(function() { $( "#map" ).geomap( ); });</script></pre>
155 <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>
157 <h2>Beta 1 released!</h2>
158 <time>2012-07-30</time>
160 <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>
162 <p>The highlights are mentioned here and you can follow the link at the end to read more details.</p>
164 <h3>New interaction engine</h3>
166 <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>
168 <h3>Wicked fast mobile</h3>
170 <p>Using CSS3 features on modern mobile devices brings tremendous speed improvements to iOS and Android.</p>
172 <h3>New default map</h3>
174 <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>
176 <h3>New build environment</h3>
178 <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>
182 <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>
186 <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>
188 <h3>Forcing refresh</h3>
190 <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>
192 <h3>Zoom level constraints</h3>
194 <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>
198 <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>
202 <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>
204 <p><a href="index-full.html">Click here to checkout the full changelog</a></p>
207 <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>
208 <a data-role="button" href="http://jquerygeo.com/test/" title="jQuery Geo test build">Test docs & demos</a>
215 <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>
220 <a href="http://jquery.com"><img id="jQueryLogo" title="jQuery" alt="" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" /></a>
225 <img title="HTML5" alt="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_64.png" />
230 <a href="http://mediatemple.net"><img title="Media Temple" alt="" src="http://mediatemple.net/_images/partnerlogos/mt-120x60-dk.png" /></a>
235 <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>
242 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
243 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
244 <script type="text/javascript" src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
245 <script type="text/javascript">
249 $(".nav").buttonset();
250 $("a").filter("[data-role='button']").button();
252 if (navigator.geolocation) {
253 navigator.geolocation.getCurrentPosition(function (p) {
254 initMap([p.coords.longitude, p.coords.latitude]);
255 }, function (error) {
262 function initMap(center) {
263 map = $(".geomap").geomap({
264 center: center || [-71.0597732, 42.3584308],
268 $( ".osm" ).geomap("opacity", .5);
273 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
275 <script type="text/javascript">
277 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
278 po.src = 'https://apis.google.com/js/plusone.js';
279 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
283 <script type="text/javascript">
284 var _gaq = [['_setAccount', 'UA-26084853-1'], ['_trackPageview']];
286 var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
287 g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
288 s.parentNode.insertBefore(g, s);
289 } (document, 'script'));