Integrate Jawg with Leaflet

Estimated reading time: 6 minutes

Prerequisite

To integrate Jawg with Leaflet, you only need basic knowledge of JavaScript and HTML.

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.

Tutorial

tuto_01

Step 1 : Import Leaflet

For this tutorial we will use the a CDN to import Leaflet in our HTLM page. There is still the possibility to directly download the library here : LeafletJS.

Import Leaflet CSS in the <head></head> section and Leaflet JS at the end of the <body></body> section of your HTML page.

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  </body>
</html>

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.

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map"></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  </body>
</html>

Step 3 : JavaScript !

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

We only need to tell Leaflet about :

  • Which HTML component is our map container
  • Where the map should be display (place and zoom)
  • Which style to use and add it to the map
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
        var myMap = L.map('map');
        myMap.setView([48.7965913, 2.3210938], 3);
        L.tileLayer('http://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(myMap);
    </script>
  </body>
</html>

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

You access token can be found in your account too.

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.

Step 4 : Admire the result

That’s all! You can admire the result!

We hope this tutorial was helpful!

More resources

Video : Switch from Google Maps to Jawg

Video : Switch from Mapbox to Jawg

Examples

Display a simple map

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
        var myMap = L.map('map');
        myMap.setView([48.7965913, 2.3210938], 3);
        L.tileLayer('http://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(myMap);
    </script>
  </body>
</html>

Display a simple map

example_01

#index.html

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
        var myMap = L.map('map');
        myMap.setView([48.7965913, 2.3210938], 3);
        L.tileLayer('http://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(myMap);
    </script>
  </body>
</html>

Display a map with a marker

example_02

#index.html

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
        var myMap = L.map('map');
        myMap.setView([48.7965913, 2.3210938], 3);
        L.tileLayer('http://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(myMap);
        // Add poi
        L.marker([48.7965913, 2.3210938]).addTo(myMap);
    </script>
  </body>
</html>

Display a map with line

example_03

#index.html

<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <script>
        var myMap = L.map('map');
        myMap.setView([48.7965913, 2.3210938], 11);
        L.tileLayer('http://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token={YOUR_ACCESS_TOKEN}', {}).addTo(myMap);
        var polygon = L.polyline([[48.90046,2.319887],[48.901163,2.329981],[48.902008,2.38515],[48.898444,2.394906],[48.894578,2.397627],[48.887109,2.398846],[48.880409,2.408308],[48.872892,2.41327],[48.864376,2.413838],[48.849234,2.416341],[48.834539,2.412246],[48.835798,2.422139],[48.842577,2.41939],[48.841528,2.42813],[48.844818,2.447699],[48.842089,2.463438],[48.838891,2.467426],[48.833133,2.467582],[48.81906,2.462696],[48.81714,2.458705],[48.818232,2.438448],[48.824054,2.421462],[48.827615,2.406032],[48.826079,2.390939],[48.821214,2.379296],[48.816314,2.363947],[48.816036,2.345958],[48.817011,2.331898],[48.818247,2.332461],[48.827142,2.292196],[48.83249,2.279052],[48.82792,2.272793],[48.83398,2.263174],[48.83481,2.255144],[48.838822,2.251709],[48.845555,2.250612],[48.849702,2.239978],[48.853517,2.224219],[48.865183,2.228225],[48.869069,2.231736],[48.876435,2.245678],[48.874264,2.25541],[48.880387,2.258467],[48.877968,2.277487],[48.883923,2.282327],[48.889472,2.291507],[48.90046,2.319887]]).addTo(myMap);
    </script>
  </body>
</html>