mapzen.js

mapzen.js is an open-source JavaScript SDK and an extension of Leaflet for making maps for the web and mobile devices. mapzen.js simplifies the process of using Mapzen's maps within Leaflet.

mapzen.js builds upon Leaflet's functionality by providing tools for working with Mapzen maps and search. With mapzen.js you can add Mapzen map styles as basemaps, build a customizable geocoder with Mapzen Search, and share links to maps.

The current version of mapzen.js embeds Leaflet v1.0.1. If you need to use another version of Leaflet, please take a look at the standalone build below.

Demos

Eraser map
One Minute Map (blog post and demo)
Mapzen Turn by Turn demo (loading dynamic data)

Basic Usage

Set up a basic Leaflet map with the default Mapzen basemap in three steps.

Step 1: In the <head> of your HTML page, import the mapzen.js JavaScript and CSS files:

<!-- style sheet for mapzen.js -->
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">

<!-- latest minified version of mapzen.js -->
<script src="https://mapzen.com/js/mapzen.min.js"></script>

And add a height and width for the map:

<style>
  #map {
    height: 300px;
    width: 600px;
  }
</style>

Step 2: In the <body> of your HTML page, add a "map" div:

<div id="map"></div>

Step 3: At the bottom of your page, add a JavaScript section to set up the map:

<script>
  // Add a Mapzen API key
  // To generate your key, go to https://mapzen.com/developers/
  L.Mapzen.apiKey = 'your-mapzen-api-key';

  // Add a map to the 'map' div
  var map = L.Mapzen.map('map');

  // Set the center of the map to be the San Francisco Bay Area at zoom level 12
  map.setView([37.7749, -122.4194], 12);
</script>

Tip: Don't forget to generate your API key at https://mapzen.com/developers/

Done!

See the full tutorial: Get started with mapzen.js

Documentation

Read the full API documentation at https://mapzen.com/documentation/mapzen-js/.

The source files for the documentation are located in the /docs folder of this repository.

Releases

The most recent mapzen.js release relies on Leaflet v1.0.1 and Tangram v0.13.

Previous mapzen.js releases can be imported by referencing the specific version number:

<script src="https://mapzen.com/js/0.5.0/mapzen.min.js"></script>

See the full list of releases and release notes here.

Builds

There are a few different mapzen.js builds to meet specific needs:

Minified: Use the minified build for most use cases.

<script src="https://mapzen.com/js/mapzen.min.js"></script>

Debugging: Use the unminified version for help with debugging.

<script src="https://mapzen.com/js/mapzen.js"></script>

If you want to load the unminified version of Tangram.js, as well, use the debugTangram option when initializing the map.

Standalone: Use the standalone version if you want to use a different version of Leaflet. Currently, mapzen.js supports Leaflet v.0.7.x and v1.0.x. (Other versions of Leaflet may work, but are not actively tested or supported.)

The standalone build includes a standalone css file, as well.

<!-- style sheet for mapzen.js -->
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.standalone.css">

<!-- latest version of stasndalone mapzen.js-->
<script src="https://mapzen.com/js/mapzen.standalone.js"></script>

<!-- latest minified version of standalone mapzen.js -->
<script src="https://mapzen.com/js/mapzen.standalone.min.js"></script>

See BUILD.md if you want to build locally (requires npm).

Import as module

mapzen.js can be imported as a module using npm:

npm install mapzen.js

Component open-source projects 💕

mapzen.js includes components from these awesome open-source projects:

Anagraph/mapzen.js