A JS SDK for working with Mapbox APIs.
Works in Node, the browser, and React Native.
As of 6/11/18, the codebase has been rewritten and a new npm package released.
The mapbox package is deprecated in favor of the new @mapbox/mapbox-sdk package.
Please read the documentation and open issues with questions or problems.
- Installation
- Usage
- Overview of requests, responses, and errors
- Services
- Pre-bundled files on unpkg.com
- Development
npm install @mapbox/mapbox-sdk
If you are supporting older browsers, you will need a Promise polyfill. es6-promise is a good one, if you're uncertain.
The documentation below assumes you're using a JS module system. If you aren't, read "Pre-bundled files on unpkg.com".
There are 3 basic steps to getting an API response:
- Create a client.
- Create a request.
- Send the request.
To create a service client, import the service's factory function from '@mapbox/mapbox-sdk/services/{service}' and provide it with your access token.
The service client exposes methods that create requests.
const mbxStyles = require('@mapbox/mapbox-sdk/services/styles');
const stylesService = mbxStyles({ accessToken: MY_ACCESS_TOKEN });
// stylesService exposes listStyles(), createStyle(), getStyle(), etc.You can also share one configuration between multiple services. To do that, initialize a base client and then pass that into service factory functions.
const mbxClient = require('@mapbox/mapbox-sdk');
const mbxStyles = require('@mapbox/mapbox-sdk/services/styles');
const mbxTilesets = require('@mapbox/mapbox-sdk/services/tilesets');
const baseClient = mbxClient({ accessToken: MY_ACCESS_TOKEN });
const stylesService = mbxStyles(baseClient);
const tilesetsService = mbxTilesets(baseClient);To create a request, invoke a method on a service client.
Once you've created a request, send the request with its send method.
It will return a Promise that resolves with a MapiResponse.
const mbxClient = require('@mapbox/mapbox-sdk');
const mbxStyles = require('@mapbox/mapbox-sdk/services/styles');
const mbxTilesets = require('@mapbox/mapbox-sdk/services/tilesets');
const baseClient = mbxClient({ accessToken: MY_ACCESS_TOKEN });
const stylesService = mbxStyles(baseClient);
const tilesetsService = mbxTilesets(baseClient);
// Create a style.
stylesService.createStyle({..})
.send()
.then(response => {..}, error => {..});
// List tilesets.
tilesetsService.listTilesets()
.send()
.then(response => {..}, error => {..})For more details, please read the full classes documentation.
Service methods return MapiRequest objects.
Typically, you'll create a MapiRequest then send it.
send returns a Promise that resolves with a MapiResponse or rejects with a MapiError.
MapiRequests also expose other properties and methods that you might use from time to time.
For example:
MapiRequest#abortaborts the request.MapiRequest#eachPageexecutes a callback for each page of a paginated API response.MapiRequest.emitterexposes an event emitter that fires events likedownloadProgressanduploadProgress.
For more details, please read the full MapiRequest documentation.
// Create a request and send it.
stylesService.createStyle({..})
.send()
.then(response => {..}, error => {..});
// Abort a request.
const req = tilesetsService.listTilesets();
req.send().then(response => {..}, error => {
// Because the request is aborted, an error will be thrown that we can
// catch and handle.
});
req.abort();
// Paginate through a response.
tilesetsService.listTilesets().eachPage((error, response, next) => {
// Do something with the page, then call next() to send the request
// for the next page.
// You can check whether there will be a next page using
// MapiResponse#hasNextPage, if you want to do something
// different on the last page.
if (!response.hasNextPage()) {..}
});
// Listen for uploadProgress events.
const req = stylesService.createStyleIcon({..});
req.on('uploadProgress', event => {
// Do something with the progress event information.
});
req.send().then(response => {..}, error => {..});When you send a MapiRequest, the returned Promise resolves with a MapiResponse.
Typically, you'll use MapiResponse.body to access the parsed API response.
MapiResponses also expose other properties and methods.
For example:
MapiResponse#hasNextPageindicates if there is another page of results.- If there is another page,
MapiResponse#nextPagecreates aMapiRequestthat you cansendto get that next page. MapiResponse.headersexposes the parsed HTTP headers from the API response.
For more details, please read the full MapiResponse documentation.
// Read a response body.
stylesService.getStyle({..})
.send()
.then(resp => {
const style = resp.body;
// Do something with the style.
}, err => {..});
// Get the next page of results.
tilesetsService.listTilesets()
.send()
.then(resp => {
if (resp.hasNextPage()) {
const nextPageReq = resp.nextPage();
nextPageReq.send().then(..);
}
}, err => {..});
// Check the headers.
tilesetsService.listTilesets()
.send()
.then(resp => {
console.log(resp.headers);
}, err => {..});If the server responds to your MapiRequest with an error, or if you abort the request, the Promise returned by send will reject with a MapiError.
MapiErrors expose the information you'll need to handle and respond to the error.
For example:
MapiError.typeexposes the type of error, so you'll know if it was an HTTP error from the server or the request was aborted.MapiError.statusCodeexposes the status code of HTTP errors.MapiError.bodyexposes the body of the HTTP response, parsed as JSON if possible.MapiError.messagetells you what went wrong.
For more details, please read the full MapiError documentation.
// Check the error.
stylesService.getStyle({..})
.send()
.then(response => {..}, error => {
if (err.type === 'RequestAbortedError') {
return;
}
console.error(error.message);
});Please read the full documentation for services.
If you aren't using a JS module system, you can use a <script> tag referencing pre-bundled files on the CDN unpkg.com.
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.js"></script>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>These files are a UMD build of the package, exposing a global mapboxSdk function that creates a client, initializes all the services, and attaches those services to the client.
Here's how you might use it.
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script>
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
mapboxClient.styles.getStyle(..)
.send()
.then(..);
mapboxClient.tilesets.listTilesets(..)
.send()
.then(..);
</script>Please read ./docs/development.md.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent