demos/05-transform-request.html

<html>

<head>
  <title>MapTiler JS SDK example</title>
  <style>
    html,
    body {
      margin: 0;
    }

    #map-container {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
    }

    #style-picker-container {
      position: absolute;
      z-index: 2;
      margin: 10px;
    }
  </style>

  <link rel="stylesheet" href="../dist/maptiler-sdk.css">
</head>

<body>
  <div id="map-container"></div>
  <div id="style-picker-container">
    <select name="mapstyles" id="mapstyles-picker"></select>
  </div>

  <script src="assets/demo-utils.js"></script>
  <script>

    addPerformanceStats();
    setupMapTilerApiKey();
    const map = new maptilersdk.Map({
      container: document.getElementById("map-container"),
      style: maptilersdk.MapStyle.OUTDOOR.DARK,
      hash: true,
      transformRequest: function (url) {
        const reqUrl = new URL(url);
        reqUrl.searchParams.append("some-extra-param", "some-extra-value");

        return {
          url: reqUrl.href,
        }
      }
    });

    const styleDropDown = document.getElementById("mapstyles-picker");

    styleDropDown.onchange = (evt) => {
      map.setStyle(styleDropDown.value)
    };

    Object.keys(maptilersdk.MapStyle).forEach(s => {
      const styleOption = document.createElement('option');
      styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
      styleOption.innerHTML = s.replace("_", " ").toLowerCase();
      styleDropDown.appendChild(styleOption);
    });

    // This will end up being used instead of the one defined in the constructor
    map.setTransformRequest((url) => {
      const reqUrl = new URL(url);
      reqUrl.searchParams.append("some-extra-param-two", "some-extra-value-two");
      return {
        url: reqUrl.href,
      }
    });
  </script>
</body>

</html>