Integrate Jawg with Mapbox GL JS

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 Mapbox GL JS

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

Import the CSS part of the library in the <head></head> section and the JavaScript part at the end of the <body></body> section of your HTML page.

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

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.

<html>
  <head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map"></div>
    <!-- JavaScript -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.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
<html>
  <head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: "https://tile.jawg.io/jawg-dark.json?access-token={YOUR_ACCESS_TOKEN}",
            zoom: 2,
            center: [2.3210938, 48.7965913]
        });
    </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.

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

example_01

#index.html

<html>
  <head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: "https://tile.jawg.io/jawg-dark.json?access-token={YOUR_ACCESS_TOKEN}",
            zoom: 2,
            center: [2.3210938, 48.7965913],
            hash: true
        });
        map.addControl(new mapboxgl.NavigationControl(), "top-right");
    </script>
  </body>
</html>

Display a map with a marker

example_02

#index.html

<html>
  <head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <script>
      var map = new mapboxgl.Map({
          container: 'map',
          style: "https://tile.jawg.io/jawg-dark.json?access-token={YOUR_ACCESS_TOKEN}",
          zoom: 2,
          center: [2.3210938, 48.7965913],
          hash: true
      });
      map.addControl(new mapboxgl.NavigationControl(), "top-right");
      map.on('load', function () {
        map.addLayer({
          "id": "marker",
          "type": "circle",
          "source": {
            "type": "geojson",
            "data": {
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates": [2.3210938, 48.7965913]
              }
            }
          },
          "paint": {
            "circle-radius": 6,
            "circle-color": "steelblue"
          }
        });
      });
    </script>
  </body>
</html>

Display a map with line

example_03

#index.html

<html>
  <head>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <div id="map" style='width:100%; height:100%;'></div>
    <!-- JavaScript -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.41.0/mapbox-gl.js'></script>
    <script>
        var map = new mapboxgl.Map({
            container: 'map',
            style: "https://tile.jawg.io/jawg-dark.json?access-token={YOUR_ACCESS_TOKEN}",
            zoom: 2,
            center: [2.3210938, 48.7965913],
            hash: true
        });
        map.addControl(new mapboxgl.NavigationControl(), "top-right");
	map.on('load', function () {

    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [[2.319887,48.90046],[2.329981,48.901163],[2.38515,48.902008],[2.394906,48.898444],[2.397627,48.894578],[2.398846,48.887109],[2.408308,48.880409],[2.41327,48.872892],[2.413838,48.864376],[2.416341,48.849234],[2.412246,48.834539],[2.422139,48.835798],[2.41939,48.842577],[2.42813,48.841528],[2.447699,48.844818],[2.463438,48.842089],[2.467426,48.838891],[2.467582,48.833133],[2.462696,48.81906],[2.458705,48.81714],[2.438448,48.818232],[2.421462,48.824054],[2.406032,48.827615],[2.390939,48.826079],[2.379296,48.821214],[2.363947,48.816314],[2.345958,48.816036],[2.331898,48.817011],[2.332461,48.818247],[2.292196,48.827142],[2.279052,48.83249],[2.272793,48.82792],[2.263174,48.83398],[2.255144,48.83481],[2.251709,48.838822],[2.250612,48.845555],[2.239978,48.849702],[2.224219,48.853517],[2.228225,48.865183],[2.231736,48.869069],[2.245678,48.876435],[2.25541,48.874264],[2.258467,48.880387],[2.277487,48.877968],[2.282327,48.883923],[2.291507,48.889472],[2.319887,48.90046]]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "steelblue",
            "line-width": 4
        }
    });
	});
    </script>
  </body>
</html>