Getting Started

Including WiggleMaps

WiggleMaps requires jQuery 1.7 or higher to run. Include jQuery before WiggleMaps in the head of the document

<script type="text/javascript" src="wigglemaps/js/utils/jquery-1.7.min.js"></script>
<script type="text/javascript" src="wigglemaps/wigglemaps.js"></script> 

Getting a Map onto Your Page

Putting a new map one a web page is easy. Maps can either be full screen or fit to some div. The following will insert a map onto a page:

wiggle.ready (function () { 
    var map = new wiggle.Map ();
});

Embedding a Map in a div

Adding a selector for the div, such as '#map', will cause the map to be placed in there. Make sure that the div is already placed into the document when you add the map, since it will expand to fit the entire contents of the div. (If the div is not in the document, it will automatically have a 0 width and 0 height.) Also make sure that the div has a height set somehow. (An empty div will have a 0 height unless otherwise specified, causing the map to have a 0 height.) The following two snippets add a map to a page in a div.

The HTML:

<div id="map" style="width: 500px; height: 500px"></div>

The Javascript:

wiggle.ready (function () {
    var map = new wiggle.Map ('#map');
});

Adding a Layer

Now that you've got a map up and running, probably the first thing you want to do is show some data on it. Let's say that you have a map of each of the states in the US, in GeoJSON format, called states.json. To make it more flexible, WiggleMaps doesn't handle any IO. You need to get the map into Javascript environment yourself. Fortunately, that part's not very difficult. After that it's a few simple steps for loading the map:

$.ajax ({
    url: 'states.json',
    dataType: 'json',
    success: function (data) {
        var states = wiggle.io.GeoJSON (data);
        map.append (states);
    }),
    error: function (xhr, message) {
        console.log (message);
    }
});

And that's it! All you have to do is pass the JSON object to the GeoJSON function and append it to the map.

Next Steps

Probably, there's a lot more you want to besides just loading a layer onto the map. Check out some of the [tutorials] (https://github.com/dotskapes/wigglemaps/wiki/Tutorials) to see some of WiggleMaps more interesting features in action. The API and style reference contain a good resource for building applications with WiggleMaps.