To help you get started, we've collected the most common ways that mapbox is being used within popular public projects.

AutoLingo / autolingo / app / components / Map.jsx View on Github

componentDidMount() {

    // Since we are creating a new map instance, the code below within componentDidMount can only be run once. So, the code needs to remain here, and can't be in the MapContainer file (since each change in state would re-run the code).
    L.mapbox.accessToken = 'pk.eyJ1IjoiYWRhbTIyMjIiLCJhIjoiY2l5dGJhaW96MDAwcDJ3bzM0MXk2aTB0bSJ9.kgHNRDiGEmq12toljp2-kA'
    var map = L.mapbox.map('map').setView([16.541430, 7.558594], 3);
    // map.setMaxBounds([
    //     [83, 190],
    //     [-83, -210]
    //   ])


    this.map = map;
    // Use styleLayer to add a Mapbox style created in Mapbox Studio
    L.mapbox.styleLayer('mapbox://styles/adam2222/ciyucouor002e2rpl7gut7p81').addTo(map);

    // map.dragging.disable();
    // map.touchZoom.disable();
    // map.doubleClickZoom.disable();
    // map.scrollWheelZoom.disable();
    // map.zoomControl.remove();

View more ways to use mapbox

mapbox-sdk-js

A node.js and browser JavaScript client to Mapbox services.

Services

Generally Available

• Geocoding
  • Forward (place names ⇢ longitude, latitude)
  • Reverse (longitude, latitude ⇢ place names)
• Upload API
  • Upload data to be processed and hosted by Mapbox.
• Directions
  • Profiles for driving, walking, and cycling
  • GeoJSON & Polyline formatting
  • Instructions as text or HTML
• Datasets
  • Retrieve, add, and edit datasets.
• Styles
  • Retrieve, add and edit styles, fonts and icons.
• Tilesets
  • List tilesets.
• Tokens
  • Retrieve, add and edit access tokens.
• Matrix
  • Travel-time tables between coordinates up to 25 pairs
  • Profiles for driving, walking and cycling
• Map Matching
  • Aligns GPS trace data to roads and paths from OpenStreetMap data

Installation

$ npm install --save mapbox

Usage

Setup via node:

var MapboxClient = require('mapbox');

Setup via script tag:

Initializing:

var client = new MapboxClient('YOUR_ACCESS_TOKEN');

Basic usage of the geocoder:

client.geocodeForward('Chester, NJ', function(err, data, res) {
  // data is the geocoding result as parsed JSON
  // res is the http response, including: status, headers and entity properties
});

As an alternative to callbacks, each method also returns a Promise:

client.geocodeForward('Chester, NJ')
  .then(function(res) {
    // res is the http response, including: status, headers and entity properties
    var data = res.entity; // data is the geocoding result as parsed JSON
  })
  .catch(function(err) {
    // handle errors
  });

pagination

Listing resources may return a subset of the entire listing. If more pages are available the res object will contain a .nextPage() method. This method requires no arguments, other than an optional callback function, otherwise a Promise is returned.

sub-requiring individual services

Each service is available as a sub-require if you'd only like to include only its functionality and not the entire bundle. The returned MapboxClient will have the same constructor style but only include functions necessary for that service's support.

Available sub-requires:

• geocoding: require('mapbox/lib/services/geocoding')
• surface: require('mapbox/lib/services/surface')
• matching: require('mapbox/lib/services/matching')
• directions: require('mapbox/lib/services/directions')
• matrix: require('mapbox/lib/services/matrix')
• datasets: require('mapbox/lib/services/datasets')
• styles: require('mapbox/lib/services/styles')
• uploads: require('mapbox/lib/services/uploads')
• tilestats: require('mapbox/lib/services/tilestats')
• static: require('mapbox/lib/services/static')
• tilesets: require('mapbox/lib/services/tilesets')
• tokens: require('mapbox/lib/services/tokens')

API