giscloud-js-api/examples/basic.html at main · giscloud/giscloud-js-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GIS Cloud — basic embed</title>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; }
    #map { position: absolute; inset: 0; }
    #error { padding: 1em; font: 14px system-ui; color: #a00; }
  </style>
  <!-- Production bundle from any whitelisted CDN -->
  <script src="https://unpkg.com/@giscloud/js-api@1/api.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    (function () {
      var container = document.getElementById('map');
      function fail(msg) { container.innerHTML = '<div id="error">' + msg + '</div>'; }

      if (typeof giscloud === 'undefined') {
        return fail('Failed to load GIS Cloud JS API.');
      }

      // Uncomment and set your key if the map is private. If the map is publicly
      // shared (or this page is opened in a browser already signed in to giscloud.com),
      // no key is needed. giscloud.apiKey is a getter/setter function:
      // giscloud.apiKey('YOUR_API_KEY');

      giscloud.ready(function () {
        try {
          new giscloud.Viewer('map', 1245864); // map id — replace with your own
        } catch (e) {
          fail('Viewer failed: ' + (e && e.message ? e.message : e));
        }
      });
    })();
  </script>
</body>
</html>