Name: mapzen.js
Owner: Mapzen
Description: Javascript SDK for Mapzen products
Created: 2015-07-09 14:03:21.0
Updated: 2018-01-12 23:52:45.0
Pushed: 2017-11-16 21:00:34.0
Size: 1643
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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.
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 -->
k rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
latest minified version of mapzen.js -->
ipt src="https://mapzen.com/js/mapzen.min.js"></script>
And add a height and width for the map:
le>
ap {
height: 300px;
width: 600px;
yle>
Step 2: In the <body> of your HTML page, add a “map” div:
id="map"></div>
Step 3: At the bottom of your page, add a JavaScript section to set up the map:
ipt>
Add a Mapzen API key
To generate your key, go to https://mapzen.com/developers/
Mapzen.apiKey = 'your-mapzen-api-key';
Add a map to the 'map' div
r map = L.Mapzen.map('map');
Set the center of the map to be the San Francisco Bay Area at zoom level 12
p.setView([37.7749, -122.4194], 12);
ript>
Tip: Don't forget to generate your API key at https://mapzen.com/developers/
Done!
See the full tutorial: Get started with mapzen.js
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.
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:
ipt src="https://mapzen.com/js/0.5.0/mapzen.min.js"></script>
See the full list of releases and release notes here.
There are a few different mapzen.js builds to meet specific needs:
Minified: Use the minified build for most use cases.
ipt src="https://mapzen.com/js/mapzen.min.js"></script>
Debugging: Use the unminified version for help with debugging.
ipt 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 -->
k rel="stylesheet" href="https://mapzen.com/js/mapzen.standalone.css">
latest version of stasndalone mapzen.js-->
ipt src="https://mapzen.com/js/mapzen.standalone.js"></script>
latest minified version of standalone mapzen.js -->
ipt src="https://mapzen.com/js/mapzen.standalone.min.js"></script>
See BUILD.md if you want to build locally (requires npm).
mapzen.js can be imported as a module using npm:
install mapzen.js
mapzen.js includes components from these awesome open-source projects: