Add origin info

Estimated reading time: 1 minute

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

Use the origin query parameter to add additional information about the request origin.

This is typically useful when you want to distinguish between different clients using the Tile API from the same origin.

For example, if your request origin is https://www.acme.com and you set the origin query parameter value to client1, then your DynamicMaps statistics in the lab will appear in the form www.acme.com|client1.

View on GitHub

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #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>';
    // This is the client identifier. Tile requests origin will appear as "www.acme.com|client1" in the lab statistics tab (https://www.jawg.io/lab/stats)
    const myClientId = 'client1';
    const map = L.map('map').setView([48.7965913, 2.3210938], 3);
    L.tileLayer(
      // Add the origin query param with the client id value to the tile URL
      `https://tile.jawg.io/jawg-streets/{z}/{x}/{y}.png?access-token=${accessToken}&origin=${myClientId}`, {
        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>',
        maxZoom: 22
      }
    ).addTo(map);
  </script>
</body>
</html>