Integrate Jawg with Mapbox GL JS

Estimated reading time: 2 minutes

Getting started

To integrate Jawg with Mapbox GL JS, you only need some knowledge with JavaScript and HTML. We will use the plugin Mapbox GL JS to display our Jawg tiles, with your personnal API key.

Make sure to have your API key that you can find in your Jawg account. It will be necessary to access your custom map styles.

You can also view our video tutorial here :

Video : Switch from Mapbox to Jawg

Tutorial

Step 1 : Import Mapbox GL JS

The first thing you need to do if it’s not done yet is to download the plugin Mapbox GL JS. For this tutorial we will simply use the CDN of Mapbox GL JS.

Import the plugin in the <head></head> section of your HTML page like on the picture below.

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

tuto_01

Step 2 : Map container

To display a map with Mapbox GL JS, you need to bind the javascript code to an HTML element which will be the map container. To create your map container, a simple <div id="map"></div> do the job. Paste this where you want to display your map.

The HTML id map can also be changed to what you want, but don’t forget to replace it in the javascript code too.

tuto_02

Step 3 : Javascript !

Let’s go to implement the most difficult part, the JS code ! No it’s a joke, you will see it’s very easy.

Jawg provides a full code snippet to integrate your custom style with Mapbox GL JS, it’s just a copy paste!

  • Go to your account, and click on Style Manager.
  • Then you will see all your styles, just click on Use the style to display an integration pop-up with all you need to integrate it in your apps.
  • Click on MapboxGL, and a whole code example will appear.

You can see what we have done before, with the plugin import, and the map container. So we only need to add our script part :

<script>
    var map = new mapboxgl.Map({
        container: 'map',
        style: "https://tile.jawg.io/styles/e3c09921-290a-4c76-b2c5-7900fbde343d.json?access-token={YOUR_ACCESS_TOKEN}",
        zoom: 15,
        center: [48.7965913, 2.3210938]
    });
</script>

Don’t forget to replace {YOUR_ACCESS_TOKEN} by your real access token

You access token can be found in your account too.

tuto_03

Step 4 : Admire the result

That’s all! You can admire the result of your very long work!

We hope that this tutorial was very helpful!