examples/test-browser-es.html

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

  <body>
    <p>
      This demo is using the ES module.
    </p>
    <p>
      Open JS console.
    </p>

    <div id="images"></div>

    <script type="module">
      import {
        config,
        geocoding,
        geolocation,
        coordinates,
        data,
        staticMaps,
      } from '../dist/maptiler-client.mjs';

      // The API key must be in the URL param as `?key=ABCD1234`
      config.apiKey = (new URLSearchParams(location.search)).get("key");

      async function testGeocoding() {
        console.log(await geocoding.forward('bordeaux', {language: [geocoding.Language.SPANISH, geocoding.Language.ENGLISH]}));
        console.log(await geocoding.forward('bordeaux',  {
          bbox: [-7.638157121837139, 33.595474163650685, -7.624914050102235, 33.600446760011856]
        }));
        console.log(await geocoding.reverse([6.249638, 46.402056], {language: ['es', 'en']}));
      }

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

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

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

      async function testData() {
        console.log(await 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 = 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 = staticMaps.bounded([-9.8905, 36.6274, -6.0453, 42.3208], {
          hiDPI: true,
          width: 1024,
          height: 2048,
          style: 'streets-v2',
          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>