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:
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:
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:
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:
- Add points to a web map
- Create a custom style
- Modify map controls
- Add search with the Geocoding API
- Display directions with the Directions API
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.
test
copy
Quickstart guide to Mapbox JavaScript API was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.