Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
@mapbox/mapbox-sdk
Advanced tools
@mapbox/mapbox-sdk is a JavaScript library that provides a set of tools for interacting with Mapbox APIs. It allows developers to integrate various Mapbox services such as maps, geocoding, directions, and more into their applications.
Static Maps
This feature allows you to generate static map images. The code sample demonstrates how to create a static map image centered on specific coordinates.
const mbxClient = require('@mapbox/mapbox-sdk');
const mbxStatic = require('@mapbox/mapbox-sdk/services/static');
const baseClient = mbxClient({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' });
const staticClient = mbxStatic(baseClient);
staticClient.getStaticImage({
ownerId: 'mapbox',
styleId: 'streets-v11',
width: 600,
height: 400,
position: { coordinates: [-122.42, 37.78], zoom: 14 }
}).send().then(response => {
const image = response.body;
// Do something with the image
});
Geocoding
This feature allows you to convert addresses into geographic coordinates. The code sample demonstrates how to perform forward geocoding to get coordinates for a given address.
const mbxClient = require('@mapbox/mapbox-sdk');
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const baseClient = mbxClient({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' });
const geocodingClient = mbxGeocoding(baseClient);
geocodingClient.forwardGeocode({
query: '1600 Pennsylvania Ave NW, Washington, DC 20500',
limit: 2
}).send().then(response => {
const match = response.body;
// Do something with the geocoding result
});
Directions
This feature allows you to get driving, walking, or cycling directions between multiple waypoints. The code sample demonstrates how to get driving directions between two sets of coordinates.
const mbxClient = require('@mapbox/mapbox-sdk');
const mbxDirections = require('@mapbox/mapbox-sdk/services/directions');
const baseClient = mbxClient({ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN' });
const directionsClient = mbxDirections(baseClient);
directionsClient.getDirections({
profile: 'driving',
waypoints: [
{ coordinates: [-122.42, 37.78] },
{ coordinates: [-77.03, 38.91] }
]
}).send().then(response => {
const directions = response.body;
// Do something with the directions
});
Leaflet is an open-source JavaScript library for interactive maps. While it does not provide direct API services like geocoding or directions, it is highly customizable and can be integrated with various mapping services, including Mapbox. It is more focused on rendering and interacting with maps in the browser.
OpenLayers is another open-source JavaScript library for displaying map data in web browsers. It supports a wide range of map services and formats. Unlike @mapbox/mapbox-sdk, it does not provide direct API services but is highly flexible for creating custom map applications.
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.
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:
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.
MapiRequest
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
.
MapiRequest
s also expose other properties and methods that you might use from time to time.
For example:
MapiRequest#abort
aborts the request.MapiRequest#eachPage
executes a callback for each page of a paginated API response.MapiRequest.emitter
exposes an event emitter that fires events like downloadProgress
and uploadProgress
.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 => {..});
MapiResponse
When you send
a MapiRequest
, the returned Promise
resolves with a MapiResponse
.
Typically, you'll use MapiResponse.body
to access the parsed API response.
MapiResponse
s also expose other properties and methods.
For example:
MapiResponse#hasNextPage
indicates if there is another page of results.MapiResponse#nextPage
creates a MapiRequest
that you can send
to get that next page.MapiResponse.headers
exposes 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 => {..});
MapiError
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
.
MapiError
s expose the information you'll need to handle and respond to the error.
For example:
MapiError.type
exposes the type of error, so you'll know if it was an HTTP error from the server or the request was aborted.MapiError.statusCode
exposes the status code of HTTP errors.MapiError.body
exposes the body of the HTTP response, parsed as JSON if possible.MapiError.message
tells 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
.
0.16.1
session_token
as optional parameter in the geocoding servicesFAQs
JS SDK for accessing Mapbox APIs
The npm package @mapbox/mapbox-sdk receives a total of 104,845 weekly downloads. As such, @mapbox/mapbox-sdk popularity was classified as popular.
We found that @mapbox/mapbox-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 28 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.