Change the style of your map

Estimated reading time: 1 minute

We recommend using Maplibre GL as vector maps provide the best user experience.

Switch between the default Jawg styles for your map using this code sample that uses the Leaflet library.

<html>
<head>
  <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      min-height: 500px;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Don't forget to replace <YOUR_ACCESS_TOKEN> by your own access token
    const accessToken = '<YOUR_ACCESS_TOKEN>';
    const map = L.map('map').setView([48.7965913, 2.3210938], 3);

    // List of all our defaults styles names
    const styles = ['jawg-streets', 'jawg-sunny', 'jawg-terrain', 'jawg-dark', 'jawg-light'];
    const baselayers = {};
    // Creating one tile layers for each style
    styles.forEach((style) =>
      baselayers[style] = L.tileLayer(
        `https://tile.jawg.io/${style}/{z}/{x}/{y}.png?access-token=${accessToken}`, {
          attribution: '<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
        }
      )
    );

    // Set the default layer when you open the map
    baselayers['jawg-streets'].addTo(map);
    // Associating each style name to its tile layer
    L.control.layers(baselayers).addTo(map);
  </script>
</body>
</html>