From 247d80b1d119edd0516e7e35acaa084813e8eb7d Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@stryczek.pl>
Date: Thu, 12 Dec 2024 14:18:29 +0100
Subject: [PATCH] Add globe examples

---
 demos/sky_day.html         |   2 +-
 demos/sky_day_globe.html   | 145 ++++++++++++++++++++++++++++++++++++
 demos/sky_night.html       |   2 +-
 demos/sky_night_globe.html | 147 +++++++++++++++++++++++++++++++++++++
 4 files changed, 294 insertions(+), 2 deletions(-)
 create mode 100644 demos/sky_day_globe.html
 create mode 100644 demos/sky_night_globe.html
diff --git a/demos/sky_day.html b/demos/sky_day.html
index 16c37815..1ae232ee 100644
--- a/demos/sky_day.html
+++ b/demos/sky_day.html
@@ -64,7 +64,7 @@
       </div>
     </div>
   
-    <script src ="../build/maptiler-sdk.umd.js"></script>
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
     
     <script>
       maptilersdk.config.apiKey = "YOUR_API_KEY";
diff --git a/demos/sky_day_globe.html b/demos/sky_day_globe.html
new file mode 100644
index 00000000..a5ba14d7
--- /dev/null
+++ b/demos/sky_day_globe.html
@@ -0,0 +1,145 @@
+<html>
+  <head>
+    <title>MapTiler JS SDK example</title>
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      #map-container {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        background: #ccc;
+        /* background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%); */
+      }
+
+      #style-picker-container {
+        position: absolute;
+        z-index: 2;
+        margin: 10px;
+      }
+
+    </style>
+
+    <link rel="stylesheet" href="../build/maptiler-sdk.css">
+  </head>
+
+  <body>
+    <div id="map-container"></div>
+    <div id="style-picker-container">
+      <div>
+        <label for="sky-color">sky-color</label>
+        <input id="sky-color" type="color" value="#027bdb"></input>
+      </div>
+
+      <div>
+        <label for="horizon-color">horizon-color</label>
+        <input id="horizon-color" type="color" value="#ffffff"></input>
+      </div>
+
+      <div>
+        <label for="fog-color">fog-color</label>
+        <input id="fog-color" type="color" value="#ffffff"></input>
+      </div>
+      
+      <div>
+        <label for="fog-ground-blend">fog-ground-blend</label>
+        <input id="fog-ground-blend" type="range" min="0" max="1" step="0.01" value="0.1"></input>
+      </div>
+
+      <div>
+        <label for="horizon-fog-blend">horizon-fog-blend</label>
+        <input id="horizon-fog-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
+      </div>
+
+      <div>
+        <label for="sky-horizon-blend">sky-horizon-blend</label>
+        <input id="sky-horizon-blend" type="range" min="0" max="1" step="0.01" value="0.75"></input>
+      </div>
+
+      <div>
+        <label for="atmosphere-blend">atmosphere-blend</label>
+        <input id="atmosphere-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
+      </div>
+    </div>
+  
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
+    
+    <script>
+      maptilersdk.config.apiKey = "YOUR_API_KEY";
+
+      const map = new maptilersdk.Map({
+        container: document.getElementById("map-container"),
+        style: maptilersdk.MapStyle.OUTDOOR,
+        hash: false,
+        terrainControl: true,
+        geolocate: true,
+        maxPitch: 85,
+        terrain: true,
+        pitch: 0,
+        bearing: 0,
+        center: [7.8097, 46.0739],
+        zoom: 2,
+        projection: "globe"
+      })
+
+
+      document.getElementById("sky-color").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-color": e.target.value,
+        });
+      });
+
+      document.getElementById("horizon-color").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-color").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-ground-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-ground-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("horizon-fog-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-fog-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("sky-horizon-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-horizon-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("atmosphere-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "atmosphere-blend": parseFloat(e.target.value),
+        });
+      });
+
+
+      map.on("ready", () => {
+        map.setSky({
+          "sky-color": "#027bdb",
+          "horizon-color": "#ffffff",
+          "fog-color": "#ffffff",
+          "fog-ground-blend": 0.1,
+          "horizon-fog-blend": 0.5,
+          "sky-horizon-blend": 0.75,
+          "atmosphere-blend": 0.5,
+        })
+      })
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/demos/sky_night.html b/demos/sky_night.html
index a6b95ee7..3e1a32e4 100644
--- a/demos/sky_night.html
+++ b/demos/sky_night.html
@@ -65,7 +65,7 @@
       </div>
     </div>
   
-    <script src ="../build/maptiler-sdk.umd.js"></script>
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
     
     <script>
       maptilersdk.config.apiKey = "YOUR_API_KEY";
diff --git a/demos/sky_night_globe.html b/demos/sky_night_globe.html
new file mode 100644
index 00000000..dd5edd79
--- /dev/null
+++ b/demos/sky_night_globe.html
@@ -0,0 +1,147 @@
+<html>
+  <head>
+    <title>MapTiler JS SDK example</title>
+    <style>
+      html, body {
+        margin: 0;
+      }
+
+      #map-container {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        background: #ccc;
+        /* background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%); */
+      }
+
+      #ctrl-panel {
+        position: absolute;
+        z-index: 2;
+        margin: 10px;
+        color: white;
+      }
+
+    </style>
+
+    <link rel="stylesheet" href="../build/maptiler-sdk.css">
+  </head>
+
+  <body>
+    <div id="map-container"></div>
+    <div id="ctrl-panel">
+      <div>
+        <label for="sky-color">sky-color</label>
+        <input id="sky-color" type="color" value="#0C2E4B"></input>
+      </div>
+
+      <div>
+        <label for="horizon-color">horizon-color</label>
+        <input id="horizon-color" type="color" value="#09112F"></input>
+      </div>
+
+      <div>
+        <label for="fog-color">fog-color</label>
+        <input id="fog-color" type="color" value="#09112F"></input>
+      </div>
+      
+      <div>
+        <label for="fog-ground-blend">fog-ground-blend</label>
+        <input id="fog-ground-blend" type="range" min="0" max="1" step="0.01" value="0.0"></input>
+      </div>
+
+      <div>
+        <label for="horizon-fog-blend">horizon-fog-blend</label>
+        <input id="horizon-fog-blend" type="range" min="0" max="1" step="0.01" value="0.1"></input>
+      </div>
+
+      <div>
+        <label for="sky-horizon-blend">sky-horizon-blend</label>
+        <input id="sky-horizon-blend" type="range" min="0" max="1" step="0.01" value="1.0"></input>
+      </div>
+
+      <div>
+        <label for="atmosphere-blend">atmosphere-blend</label>
+        <input id="atmosphere-blend" type="range" min="0" max="1" step="0.01" value="0.5"></input>
+      </div>
+    </div>
+  
+    <script src ="../build/maptiler-sdk.umd.min.js"></script>
+    
+    <script>
+      maptilersdk.config.apiKey = "YOUR_API_KEY";
+
+      const map = new maptilersdk.Map({
+        container: document.getElementById("map-container"),
+        style: maptilersdk.MapStyle.OUTDOOR.DARK,
+        hash: false,
+        terrainControl: true,
+        geolocate: true,
+        maxPitch: 85,
+        terrain: true,
+        pitch: 0,
+        bearing: 0,
+        center: [7.8097, 46.0739],
+        zoom: 2,
+        projection: "globe"
+      });
+
+
+      document.getElementById("sky-color").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-color": e.target.value,
+        });
+      });
+
+      document.getElementById("horizon-color").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-color").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-color": e.target.value,
+        });
+      });
+
+      document.getElementById("fog-ground-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "fog-ground-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("horizon-fog-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "horizon-fog-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("sky-horizon-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "sky-horizon-blend": parseFloat(e.target.value),
+        });
+      });
+
+      document.getElementById("atmosphere-blend").addEventListener("input", (e) => {
+        map.setSky({
+          "atmosphere-blend": parseFloat(e.target.value),
+        });
+      });
+
+
+      map.on("ready", () => {
+        map.setSky({
+          "sky-color": "#0C2E4B",
+          "horizon-color": "#09112F",
+          "fog-color": "#09112F",
+          "fog-ground-blend": 0.0,
+          "horizon-fog-blend": 0.1,
+          "sky-horizon-blend": 1.0,
+          "atmosphere-blend": 0.5,
+        })
+      })
+
+
+    </script>
+  </body>
+</html>
\ No newline at end of file
