Integrate Jawg with Leaflet

Estimated reading time: 2 minutes

Getting started

To integrate Jawg with Leaflet, you only need some knowledge with JavaScript and HTML. We will use the plugin Leaflet 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 Google Maps to Jawg

Video : Switch from Mapbox to Jawg

Tutorial

Step 1 : Import Leaflet

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

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

tuto_01

Step 2 : Map container

To display a map with Leaflet, 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 in Leaflet, 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 Leaflet, and a whole code example will appear. You can see what we have done before, with the Leaflet import, and the map container. So we only need to add our script part :

<script>
    var mymap = L.map('mapid').setView([48.7965913, 2.3210938], 15);
    L.tileLayer('http://tile.jawg.io/styles/e3c09921-290a-4c76-b2c5-7900fbde343d.json?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(mymap);
</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!