Quickstart guide to Mapbox JavaScript API

Mapbox
No items found.

May 5, 2018

Quickstart guide to Mapbox JavaScript API

Mapbox

Guest

No items found.

Guest

May 5, 2018

Our GL JS library uses WebGL to render maps from vector tiles and Mapbox styles. It’s a go-to tool for fast web maps; and as the developer, you have full control of the map styling. It’s really easy to get started using our GL JS library. In this step-by-step guide, you’ll learn how to: create a web map, add a marker to it, and attach an interactive popup.

A note: If you’re currently working with the Google Maps JavaScript API, we have a more expansive side-by-side tutorial to make the switching easier.

Creating your account

It’s free to create an account. Once you do, grab an access token at the top of your dashboard.

Setting up your environment

This guide assumes that you are already familiar with basic front-end web development knowledge including HTML, CSS, and JavaScript, so we’re picking up where Mapbox comes in.

There are a few things you’ll need to get started once you’ve created a developer account:

An access token. The token is used to associate a map with your account

mapboxgl.accessToken = ‘pk.eyJ1IjoiZXF1aW5uMTAiLCJhIjoiY2lxdjFpa3M1MDBlY2Zzbmh3Mjk1MTl1NSJ9.JJwjExkgWnX3QUNiN8c_9Q’;

Mapbox GL JS. You’ll need the latest versions of our GL JS JavaScript and CSS files. You can link directly to the Mapbox hosted versions by copying this snippet into the head of your HTML document

<script src="https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css" rel="stylesheet" />

Your favorite text editor. You’ll be writing HTML, CSS, and JavaScript. Set up an HTML file and add the above JavaScript and CSS files to the head. Continue once you’ve got this set up.

Initializing a web map

The sample code below generates a map style initialized at a set zoom level (zoom ) and coordinates (center ). The style is set to one of our core styles, Mapbox Streets, using the style URL:


var map = new mapboxgl.Map({
  container: 'map', // HTML container id
  style: 'mapbox://styles/mapbox/streets-v9', // style URL
  center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
  zoom: 13
});

You can also use custom styles created with Studio, or you can change your map’s style dynamically in the browser at runtime, depending on your needs.

Adding a marker

There are a number of ways to add markers to a map in GL JS. The example below uses our default marker:


var map = new mapboxgl.Map({
  container: 'map', // HTML container id
  style: 'mapbox://styles/mapbox/streets-v9', // style URL
  center: [-21.9270884, 64.1436456], // starting position as [lng, lat]
  zoom: 13
});

var marker = new mapboxgl.Marker()
.setLngLat([-21.9270884, 64.1436456])
.addTo(map);

You can also attach markers to a set of points by loading a GeoJSON source or a vector tileset source.

Adding interactivity

No marker is complete without a popup that appears and displays information when the marker is clicked. In GL JS, you can attach the popup directly to the marker and it will be displayed when the marker is clicked by default — no need to add an event listener.

Here’s how you add a popup and populate it with some HTML content:


   var map = new mapboxgl.Map({
      container: 'map', // HTML container id
      style: 'mapbox://styles/mapbox/streets-v9', // style URL
      center: [-21.92661562, 64.14356426], // starting position as [lng, lat]
      zoom: 13
    });
    
    var popup = new mapboxgl.Popup()
    .setHTML('<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>');
    
    var marker = new mapboxgl.Marker()
    .setLngLat([-21.92661562, 64.14356426])
    .setPopup(popup)
    .addTo(map);

Extending functionality

Congratulations! You’ve made a web map with a marker and popup — which is really just getting started on the road of possibilities 😉. Be sure to check out our other GL JS tutorials for more ways to build on your map:

While you’re building, you can get in touch with our support team — we love to answer your questions. Want to chat about pricing that scales as you grow? Drop us a line.

No items found.
No items found.

Maps feature data from Mapbox © Mapbox, OpenStreetMap © OpenStreetMap and their data partners, including Maxar (if applicable, © Maxar).

Related articles