How to use @mapbox/mapbox-sdk - 9 common examples

// @flow
import mapboxDirections from '@mapbox/mapbox-sdk/services/directions';

import {
  MAPBOX_ACCESS_TOKEN,
  FOURSQUARE_CLIENT_ID,
  FOURSQUARE_CLIENT_SECRET,
  FOURSQUARE_API_URL
} from './config';

const directionsClient = mapboxDirections({ accessToken: MAPBOX_ACCESS_TOKEN });

// https://developer.foursquare.com/docs/api/venues/search
// https://developer.foursquare.com/docs/resources/categories
// Foursquare category ids:
// Bar: 4bf58dd8d48988d116941735
// Whisky bar: 4bf58dd8d48988d122941735
export const fetchVenues = ({ latitude, longitude }) => {
  const params = {
    client_id: FOURSQUARE_CLIENT_ID,
    client_secret: FOURSQUARE_CLIENT_SECRET,
    intent: 'browse',
    limit: 10,
    categoryId: '4bf58dd8d48988d116941735',
    radius: 1000,
    v: '20180323',
    ll: `${latitude},${longitude}`

import MapboxClient2 from 'mapbox'; // TODO remove dependency after QA

import { mapboxToken } from '../utils/mapboxToken';
import environments from '../../../platform/utilities/environment';

/**
 New: @mapbox/mapbox-sdk is initialized with the accessToken key as an object

 The conditional is for using the SDK version according to the environment ( New SDK in staging temporarily for QA)
 TODO: remove this logic after new sdk tested in staging

 MapboxClient1 : New SDK
 MapboxClient2 : Current SDK
*/
export const mapboxClient = environments.isStaging()
  ? new MapboxClient1({ accessToken: mapboxToken })
  : new MapboxClient2(mapboxToken);

export default mapboxClient;

import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css';

// import turfLength from '@turf/length';

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'

import mbxGeocoding from '@mapbox/mapbox-sdk/services/geocoding';

import { MAPBOX_ACCESS_TOKEN, IS_MOBILE } from './constants.js'

import './Map.css'


const geocodingClient = mbxGeocoding({ accessToken: MAPBOX_ACCESS_TOKEN });


class Map extends Component {
    map;
    popup;
    searchBar;
    hoverPopup;
    selectedCycleway;

    constructor(props) {
        super(props);

        this.onMapMoved = this.onMapMoved.bind(this);
    }

    showPopup(e) {

import MapiClient, { SdkConfig } from '@mapbox/mapbox-sdk/lib/classes/mapi-client';
import { MapiRequest } from '@mapbox/mapbox-sdk/lib/classes/mapi-request';
import { MapiResponse } from '@mapbox/mapbox-sdk/lib/classes/mapi-response';
import Directions, { DirectionsService, DirectionsResponse } from '@mapbox/mapbox-sdk/services/directions';
import Styles, { StylesService } from '@mapbox/mapbox-sdk/services/styles';
import StaticMap, { StaticMapService } from '@mapbox/mapbox-sdk/services/static';
import { LineString } from 'geojson';

const config: SdkConfig = {
    accessToken: 'access-token',
};
const client = new MapiClient(config);

const directionsService: DirectionsService = Directions(client);

const mapiRequest: MapiRequest = directionsService.getDirections({
    profile: 'walking',
    waypoints: [
        {
            coordinates: [1, 3],
        },
        {
            coordinates: [2, 4],
        },
    ],
});

mapiRequest.send().then((response: MapiResponse) => {
    const body = response.body as DirectionsResponse;
    const route = body.routes;

import MapiClient, { SdkConfig } from '@mapbox/mapbox-sdk/lib/classes/mapi-client';
import { MapiRequest } from '@mapbox/mapbox-sdk/lib/classes/mapi-request';
import { MapiResponse } from '@mapbox/mapbox-sdk/lib/classes/mapi-response';
import Directions, { DirectionsService, DirectionsResponse } from '@mapbox/mapbox-sdk/services/directions';
import Styles, { StylesService } from '@mapbox/mapbox-sdk/services/styles';
import StaticMap, { StaticMapService } from '@mapbox/mapbox-sdk/services/static';
import { LineString } from 'geojson';

const config: SdkConfig = {
    accessToken: 'access-token',
};
const client = new MapiClient(config);

const directionsService: DirectionsService = Directions(client);

const mapiRequest: MapiRequest = directionsService.getDirections({
    profile: 'walking',
    waypoints: [
        {
            coordinates: [1, 3],
        },
        {
            coordinates: [2, 4],
        },
    ],
});

mapiRequest.send().then((response: MapiResponse) => {

],
});

mapiRequest.send().then((response: MapiResponse) => {
    const body = response.body as DirectionsResponse;
    const route = body.routes;
});

const stylesService: StylesService = Styles(config);
stylesService.putStyleIcon({
    styleId: 'style-id',
    iconId: 'icon-id',
    file: 'path-to-file.file'
});

const staticMapService: StaticMapService = StaticMap(client);
const geoOverlay: LineString = {
    type: 'LineString',
    coordinates: [[0, 1], [2, 3]]
};
staticMapService.getStaticImage({
    ownerId: 'owner-id',
    styleId: 'some-style',
    width: 16,
    height: 16,
    position: 'auto',
    overlays: [
        {
            geoJson: geoOverlay
        }
    ]
});

waypoints: [
        {
            coordinates: [1, 3],
        },
        {
            coordinates: [2, 4],
        },
    ],
});

mapiRequest.send().then((response: MapiResponse) => {
    const body = response.body as DirectionsResponse;
    const route = body.routes;
});

const stylesService: StylesService = Styles(config);
stylesService.putStyleIcon({
    styleId: 'style-id',
    iconId: 'icon-id',
    file: 'path-to-file.file'
});

const staticMapService: StaticMapService = StaticMap(client);
const geoOverlay: LineString = {
    type: 'LineString',
    coordinates: [[0, 1], [2, 3]]
};
staticMapService.getStaticImage({
    ownerId: 'owner-id',
    styleId: 'some-style',
    width: 16,
    height: 16,

constructor(mapApi) {
        this.mapApi = mapApi;
        this.directionsClient = mbxDirections({accessToken: MapBox.accessToken});

        EventBus.addListener(RouteEvents.input_model_changed, this.handleInputModelChange, this);
        EventBus.addListener(RouteEvents.add_waypoint, this.handleAddWaypointEvent, this);
        EventBus.addListener(RouteEvents.route_selected_for_load, this.handleRouteSelectedForLoad, this);
    }