Docs & Demos GitHub

jQuery Geo - an interactive mapping plugin

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!

This project is considered alpha only because it does not yet fully implement the feature set of our scheduled beta release. Alpha releases are stable and should not change much as we port technology from our internal library to the open source one.

You can check back here, 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.7.1.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.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!

Alpha 4 released!

It's been a long three months but we're very happy to announce the release of jQuery Geo 1.0a4! Here are some highlights and details:

At the service level

In alpha 3, you could append and interact with shapes on the map. In alpha 4, this is extended to services! Service-level shapes have their own shapeStyle apart from the map's and hide when their service is hidden.

More modes!

There are new modes to let you measure distance & area, and a static mode for when you want to display a map but not let users interact with it. Apart from the three new built-in modes, you can also create custom modes to help organize your app.

What's that? CSS labels!

You can now give any shape a label when you append it. You can style the label from your regular style sheet using the .geo-label class which opens labeling up to all the design power of CSS3. There's even more potential if you put a class or id on your map service because you can target labels on different services using CSS rules. Also, labels can be any HTML which opens them up to new features in HTML5!

More service src options

The old getUrl property has been renamed to src (see Breaking below) and you can now set it to a string template. jQuery Geo will stick your tile row, column, zoom, or image bbox in for you. Services defined as a string are a little easier on the eyes than a function and can be stored as JSON data.

You can still use a function and the function can now return a jQuery Promise to delay loading of the map image or tile. Want to calculate a Mandlebrot image in a JavaScript web worker without blocking user interaction? Return a new jQuery.Deferred() and call resolve when you're done!

Mobile

This version has better mobile support including pinch zoom on iOS and Android 3+ as well as other bug fixes for mobile devices.

Don't worry about $.geo.proj so much

You can now send either geodetic (lon, lat) or projected (x, y) coordinates to any library function and it will return accordingly if you stay on the default web mercator projection. You should still set it to null or implement the (to|from)GeodeticPos functions if you need to change projections.

Breaking

There is one deprecation (a service object property will be renamed in beta) and one minor breaking change.

To align this API with HTML itself, the getUrl property on service objects will be renamed to src. Using either src or getUrl will work for this alpha release but getUrl will be removed for beta. Please update any map services to use the new src property when you're defining them.

Also on service objects, the initial opacity and visibility are in a property of the service object itself named style. Your old services will still function but ones you may expect to be hidden initially will be visible until you update the service object.

To exemplify both of these changes, instead of: 

{
  type: "tiled",
  getUrl: function( view ) { return ""; },
  visibility: "hidden"
}
you should write: 
{
  type: "tiled",
  src: function( view ) { return ""; },
  style: { visibility: "hidden" }
}

Everything else

With over 60 commits, there are more features and bug fixes to write about. If you dare to click the link below (or read the README file on the project's GitHub page) you can get a better idea of what went into this build. This is the last alpha release (!) and the path to beta will add unit testing, a better build process, and smaller, more refined source code. Thanks for all your support!

Show changelog

Alpha 3 released!

jQuery Geo 1.0 Alpha 3 is mostly about sketching!

It's also about geometry functions!

Many examples have more class and now link to jsFiddles to further explain what's going on!

And a tiny bit about size

jQuery Geo is now hosted on a CDN with gzip enabled bringing the entire library to your neighborhood at under 18k.

Breaking

There are some minor breaking changes to make the API more consistent.

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!