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.
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
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’;
<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" />
Initializing a web map
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:
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:
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