additional globe demos

2gis · Jan 31, 2025 · cdb9403 · cdb9403
1 parent 1cd9c54
commit cdb9403
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 1 deletion.
diff --git a/build/index.js b/build/index.js
@@ -52,6 +52,10 @@ files
             return '';
         }
 
+        if (category === 'hidden') {
+            return '';
+        }
+
         const previewPath = `${folder.name}/preview.png`;
         const previewExists = fs.existsSync('src/' + previewPath);
         if (!previewExists) {
@@ -73,7 +77,7 @@ files
                     >[source]</a
                 >
             </div>
-        </div>`;
+        </div>`;       
 
         if (!examples[category]) {
             examples[category] = [];

diff --git a/src/globe-crossfade/index.html b/src/globe-crossfade/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Globe crossfade</title>
+        <meta name="description" content="Crossfading between globe and mercator projections" />
+        <meta name="category" content="hidden" />
+        <style>
+            html,
+            body,
+            #container {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+
+           #controls {
+                position: absolute;
+                z-index: 3;
+                top: 16px;
+                right: 16px;
+                display: flex;
+                background: white;
+                border-radius: 8px;
+                border: solid 1px #eee;
+                padding: 8px;
+                font-family: sans-serif;
+          }      
+        </style>
+    </head>
+    <body>
+        <div id="controls">
+          Flat <input type="range" id="crossfade" min="0" max="1" value="1" step="0.01" oninput="forceCrossfade(event)" /> Globe
+        </div>
+        <div id="container"></div>
+        <script src="https://mapgl.2gis.com/api/js/v0.0.360"></script>
+        <script>
+            const map = (window.map) = new mapgl.Map('container', {
+                center: [30.3313, 59.9390],
+                zoom: 2.5,
+                key: 'f1e71868-5c3d-4743-825c-90485bebbef4',
+                style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b',
+                lang: 'ru',
+                zoomControl: false,
+                styleState: { globeEnabled: true }
+            });
+
+
+            let crossfadeValue = 1;
+
+            const oldUpdate = map._impl.modules.camera.update;
+
+            // Nasty hack. Do not do like this in production.
+            map._impl.modules.camera.update = () => {
+                oldUpdate.call(map._impl.modules.camera);
+                map._impl.modules.camera.flat2ecef = crossfadeValue;
+            }
+            // Nasty hack. Do not do like this in production.
+            map._impl.modules.environmentManager.renderGlobeHalo = () => {};
+
+            function forceCrossfade(ev) {
+                crossfadeValue = ev.target.value;
+                map.triggerRerender();
+            }
+
+        </script>
+    </body>
+</html>
diff --git a/src/globe-crossfade/preview.png b/src/globe-crossfade/preview.png
diff --git a/src/globe-transition/index.html b/src/globe-transition/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Transitioning Projections</title>
+        <meta name="description" content="Demo of transition between globe and flat map" />
+        <meta name="category" content="Globe" />
+        <style>
+            html,
+            body,
+            #container {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+
+            #controls {
+                position: absolute;
+                z-index: 3;
+                top: 16px;
+                right: 16px;
+                display: flex;
+                flex-direction: column;
+            }
+
+            #controls button {
+                padding: 8px;
+                margin: 8px;
+                font-weight: bolder;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="controls">
+          <button onclick="toZoom(9)" >zoom in</button>
+          <button onclick="toZoom(4)">zoom out</button> 
+        </div>
+        <div id="container"></div>
+        <script src="https://mapgl.2gis.com/api/js/v0.0.360"></script>
+        <script>
+            const map = new mapgl.Map('container', {
+                center: [30.3313, 59.9390],
+                zoom: 4,
+                key: 'f1e71868-5c3d-4743-825c-90485bebbef4',
+                style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b',
+                lang: 'ru',
+                zoomControl: false,
+                styleState: { globeEnabled: true }
+            });
+
+            function toZoom(n) {
+                map.setZoom(n, { duration: 5000 });
+            }
+        </script>
+    </body>
+</html>
diff --git a/src/globe-transition/preview.png b/src/globe-transition/preview.png