ol-mapbox-3d-provider/openglobus.html at main · andreaordonselli/ol-mapbox-3d-provider · 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ol-mapbox-providers — OpenGlobus</title>
    <style>
      html, body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: #0a3b59;
        overflow: hidden;
      }
      #globe {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }
      .badge {
        position: absolute;
        z-index: 2;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        padding: 6px 12px;
        background: rgba(22, 52, 61, 0.9);
        color: #fff;
        font: 600 13px "Segoe UI", sans-serif;
        pointer-events: none;
      }
      .terrain-toggle {
        position: absolute;
        z-index: 3;
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        border: 1px solid #506b73;
        border-radius: 3px;
        background: rgba(22, 52, 61, 0.9);
        color: #fff;
        font: 600 13px "Segoe UI", sans-serif;
        cursor: pointer;
      }
      .terrain-toggle:hover {
        background: rgba(35, 70, 84, 0.95);
      }
      .terrain-toggle:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <div id="globe"></div>
    <button id="terrain-toggle" class="terrain-toggle" type="button" disabled>activate 3d terrain</button>
    <div class="badge">openglobus</div>

    <!-- OpenLayers (the provider reads ol.has / ol.source.XYZ on this thread),
         then the provider, then the globe adapter (OpenGlobus itself is loaded
         by the adapter via a dynamic import). -->
    <script src="lib/ol/ol.js"></script>
    <script src="lib/ol-mapbox-3d-provider.js"></script>
    <script src="lib/ol-mapbox-globes.js"></script>
    <script src="lib/ol-mapbox-additional-code-openglobus.js"></script>

    <script>
      (function () {
        // One provider = the style is parsed/applied once and reused for tiles
        // and labels. The heavy lifting happens in web workers.
        const provider = new OlMapbox3DProvider({
          style: 'https://tiles.openfreemap.org/styles/liberty',
          workerUrl: 'lib/ol-mapbox-tile-worker.js',
          labelWorkerUrl: 'lib/ol-mapbox-label-worker.js',
          log: false,
          workerLog: false
        });

        // Same options for create() and activateTerrain()/deactivateTerrain().
        const options = {
          target: 'globe',
          provider: provider,
          deviceProfile: OlMapbox3DProvider.getDeviceProfile(),
          initialView: [7.3203, 45.7378] // [lon, lat] — Aosta valley, Italy
        };

        let state = null;
        let terrainOn = false;
        const terrainButton = document.getElementById('terrain-toggle');
        function setTerrainButton() {
          terrainButton.textContent = terrainOn
            ? 'deactivate 3d terrain'
            : 'activate 3d terrain';
        }
        terrainButton.addEventListener('click', function () {
          if (!state) {
            return;
          }
          const toggle = terrainOn
            ? OlMapbox3DGlobe.deactivateTerrain
            : OlMapbox3DGlobe.activateTerrain;
          toggle('openglobus', state, options).then(function (next) {
            if (next) {
              state = next; // OpenGlobus returns a recreated globe
              window.openglobus = next; // keep the console handle in sync
            }
            terrainOn = !terrainOn;
            setTerrainButton();
          }).catch(function (error) {
            console.error('Unable to toggle the OpenGlobus terrain.', error);
          });
        });

        OlMapbox3DGlobe.create('openglobus', options).then(function (s) {
          state = s;
          window.openglobus = s; // handy handle for the console
          terrainButton.disabled = false;
        }).catch(function (error) {
          console.error('Unable to initialize the OpenGlobus globe.', error);
        });
      })();
    </script>
  </body>
</html>