jQuery Geo - a JavaScript mapping API

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 web page as quickly as possible or you are a more advanced GIS user, jQuery Geo can help!

You can check back here or follow @jQueryGeo on Twitter for release announcements. Also, head over to the lead developer's Twitter account, @ryanttb, for development info, links, or to ask questions.

Download

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.

<div id="map" style="height: 320px;"></div>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-b1.5.min.js"></script>
<script>$(function() { $( "#map" ).geomap( ); });</script>

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!

Beta 1 released!

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!

The highlights are mentioned here and you can follow the link at the end to read more details.

New interaction engine

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.

Wicked fast mobile

Using CSS3 features on modern mobile devices brings tremendous speed improvements to iOS and Android.

New default map

Probably the most noticable change, jQuery Geo is still using OpenStreetMap data by default but in the form of tiles rendered by mapquest open. It's your same open data but the servers are faster and the cartography is nicer.

New build environment

jQuery Geo now builds with grunt from Ben Alman making it 100% lint free, smaller, and supporting the next generation of the jQuery Plugins website.

Drag modes

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.

Load events

Two new events, loadstart and loadend, allow you to display indicators or give feedback to users while map tiles or other images are downloading.

Forcing refresh

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.

Zoom level constraints

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.

Breaking

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: http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html.

Enjoy!

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!

Click here to checkout the full changelog

Edge

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.

Test docs & demos

Thanks!