examples/test-browser-umd.html

<html>
  <head>
    <title>tslib</title>
  </head>

  <body>
    <p>
      This demo is using the UMD bundle. Add <code>?key=YOUR_API_KEY</code> to the URL.
    </p>
    <p>
      Open JS console.
    </p>
    <div id="images"></div>

    <script src ="../dist/maptiler-client.umd.js"></script>
    
    <script>
      // The API key must be in the URL param as `?key=ABCD1234`
      maptilerClient.config.apiKey = (new URLSearchParams(location.search)).get("key");

      async function testGeocoding() {
        console.log(await maptilerClient.geocoding.forward('bordeaux', {language: [maptilerClient.Language.SPANISH, maptilerClient.Language.ENGLISH]}));
        // console.log(await maptilerClient.geocoding.forward('bordeaux'));
        // console.log(await maptilerClient.geocoding.reverse([6.249638, 46.402056], {language: ['es', 'en']}));
      }

      async function testGeolocation() {
        console.log(await maptilerClient.geolocation.info());
      }

      async function testCoordinates() {
        // searching
        console.log(await maptilerClient.coordinates.search('mercator', {transformations: true}));
        console.log(await maptilerClient.coordinates.search('plate carree'));
        console.log(await maptilerClient.coordinates.search('france'));
        console.log(await maptilerClient.coordinates.search('4326', {transformations: true}));
        console.log(await maptilerClient.coordinates.search('4326'));

        // // Transforming from wgs84 (default) to lambert93
        console.log(await maptilerClient.coordinates.transform([1, 45], {targetCrs: 9793}));
        console.log(await maptilerClient.coordinates.transform([[10, 48], [1, 45]], {targetCrs: 9793}));
      }

      async function testData() {
        console.log(await maptilerClient.data.get('2dd5ecc4-3ae1-4d1e-99a2-182256486357'));
      }

      function addImage(url) {
        const img = document.createElement("img");
        img.src = url;
        document.getElementById("images").appendChild(img);
      }

      function staticMapTest() {
        const imageLinkCentered = maptilerClient.staticMaps.centered([7, 46.8], 5, {
          hiDPI: true,
          width: 1000,
          height: 500,
          style: 'winter',
          markers: [[7, 46, 'green'], [8, 47, '#982']],
          // apiKey: "YOUR_PRO_API_KEY",
        });

        addImage(imageLinkCentered);

        const imageLinkBounded = maptilerClient.staticMaps.bounded([-9.8905, 36.6274, -6.0453, 42.3208], {
          hiDPI: true,
          width: 1024,
          height: 2048,
          style: maptilerClient.MapStyle.DATAVIZ.DARK,
          path: [[-9.8905, 36.6274], [-9.8905, 42.3208], [-6.0453, 42.3208], [-6.0453, 36.6274], [-9.8905, 36.6274]],
          pathStrokeColor: 'red',
          pathWidth: 4,
          // apiKey: "YOUR_PRO_API_KEY",
        });

        addImage(imageLinkBounded);
      }


      (async () => {
        await testGeocoding();
        // await testGeolocation();
        // await testCoordinates();
        // await testData();
        // staticMapTest();
      })()
    </script>
  </body>
</html>