jQuery Geo, an open-source geospatial mapping project, 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 follow @geomappin on Twitter for release announcements & new demo links or head over to the lead developer’s account, @ryanttb, to ask questions.


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: 480px;"></div>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquerygeo.com/jquery.geo-1.0.0-rc1.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!

There are other ways to get started, too. You can download the code via npm and include in your web app with jspm. Check out the README for more examples.

What do you get?

Open source

jQuery Geo is a jQuery plugin, which means it is 100% JavaScript and ties into the popular jQuery library. It helps make interacting with various web mapping servers and tile sets such as OpenStreetMap, MapBox, WMS, Esri ArcGIS Server, various image servers, and single, large images, as simple as possible.

Our intention is to be a simple & fast approach to a decent percentage of the spatial web’s needs.

The geomap widget

The primary component of our geospatial plugin is a single user interface widget that pulls in tiled or dynamic map images from map servers. By default, this widget targets OpenStreetMap tiles but can be easily configured to use other cached tile sets and/or dynamic services.

The map widget includes only what is required to show mapping data and handle direct user interaction with the map. The rest can be handled programmatically by the web developer and any other UI framework they choose, e.g., showing and hiding services, changing the widget’s mode, hooking into an external zoom bar, etc.

The geo namespace

Apart from the widget, jQuery Geo has useful geospatial functions in the $.geo namespace. These functions help you calculate bounding boxes, measure the distance between geometries, determine if one geometry contains another, and other functions you might find in the well-known Java Topology Suite. They are all implemented in JavaScript and are included with the rest of jQuery Geo.