Getting Started

Mappa.js allows you to overlay a <canvas> on top of a tile map. It also provides a set of tools for working with static maps, interactive tile maps and geo-data among other tools useful when building geolocation-based visual representations.

Mappa was originally designed for , but it can be used with plain javascript or with other libraries that use the canvas element as the render object.

Usage

Download the full, minified or use the online version and add it to the head section of your HTML document. Mappa will automatically load the required map libraries when necessary.

<script src="mappa.min.js" type="text/javascript"></script>

or

<script src="https://unpkg.com/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>

If you are using npm:

npm install mappa-mundi

Then create a new Mappa instance with your preferred map provider.

// API key for map provider.
var key = 'abcd'

// Create a new Mappa instance.
var mappa = new Mappa('Map-Provider', key);

If you are new to web maps, check out the Introduction to Web Maps and the Simple Map Tutorial.

For tile maps you can use Google Maps, Mapbox, Mapbox GL and Leaflet with any set of custom tiles.

For static maps, Google Maps Static API, Mapbox Static API and Mapquest Static API are supported.