npm - mapbox-gl-shadow-simulator - Versions diffs - 0.61.1 → 0.62.0 - Mend

mapbox-gl-shadow-simulator 0.61.1 → 0.62.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/examples/map.html CHANGED Viewed

@@ -1,198 +1,248 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-	<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
-	<link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
-	<script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
-	<script src='https://www.unpkg.com/suncalc@1.9.0/suncalc.js'></script>
-	<script src="../dist/mapbox-gl-shadow-simulator.umd.min.js"></script>
-	<style>
-		body {
-			padding: 0px;
-			margin: 0px;
-		}
-		#mapid {
-			height: 100vh;
-		}
-		.mapbox-control-time {
-			padding: 20px;
-			background-color: white;
-		}
-		#exposure-gradient-container {
-			display: none;
-			background-color: white;
-			padding: 0 10px 5px;
-		}
-		#exposure-gradient {
-			height: 20px;
-			background-image: linear-gradient(to right, rgb(0 0 255/ 0.5), rgb(0 255 0 / 0.5), rgb(255 0 0 / 0.5));
-			display: flex;
-		}
-		#exposure-gradient>div {
-			flex: 1;
-			border: 1px solid white;
-			text-align: center;
-			font-weight: bold;
-		}
-	</style>
-	<title>Shade Map Mapbox example</title>
-</head>
-<body>
-	<div id="mapid">
-		<div class="mapboxgl-control-container" style="z-index: 2000; pointer-events: auto;">
-			<div class="mapboxgl-ctrl-top-left">
-				<div class="mapbox-control-time" style="pointer-events: auto;">
-					<button id="decrement">-1 hour</button>
-					<button id="increment">+1 hour</button>
-					<button id="play">Play</button>
-					<button id="stop">Stop</button>
-					<label><input id="exposure" type="checkbox" autocomplete="off" />Full-day sun exposure</label>
-					<button>
-						<a href="https://shademap.app/about" target="_blank">Get API key</a>
-					</button>
-					<span id="loader" style="padding: 3px;"></span>
-				</div>
-				<div id="exposure-gradient-container">
-					<div>Hours of sunlight</div>
-					<div id="exposure-gradient"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<script>
-		const mapLoaded = (map) => {
-			return new Promise((res, rej) => {
-				function cb() {
-					if (!map.loaded()) {
-						return;
-					}
-					map.off("render", cb);
-					res();
-				}
-				map.on("render", cb);
-				cb();
-			});
-		};
-		/* Mapbox setup */
-		mapboxgl.accessToken = 'pk.eyJ1IjoidHBwaW90cm93c2tpIiwiYSI6ImNsNGVpdzMxYzAzenUzb28zYXZ4MXdlc2EifQ.M4IHx7SY0Wv5Zt6xzvKeBQ';
-		const map = new mapboxgl.Map({
-			container: 'mapid',
-			style: 'mapbox://styles/mapbox/streets-v11',
-			center: { lng: -122.18578164139899, lat: 47.694878957368815 },
-			zoom: 8, // starting zoom
-			hash: true
-		});
-		/* End Mapbox setup */
-		/* ShadeMap setup */
-		const loaderEl = document.getElementById('loader');
-		let now = new Date((SunCalc.getTimes(new Date(), 47.694878957368815, -122.18578164139899).sunrise).getTime() + 60 * 60 * 1000);
-		let shadeMap;
-		map.on('load', () => {
-			shadeMap = new ShadeMap({
-				apiKey: "eyJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6InRwcGlvdHJvd3NraUBzaGFkZW1hcC5hcHAiLCJjcmVhdGVkIjoxNjYyNDkzMDY2Nzk0LCJpYXQiOjE2NjI0OTMwNjZ9.ovCrLTYsdKFTF6TW3DuODxCaAtGQ3qhcmqj3DWcol5g",
-				date: now,
-				color: '#01112f',
-				opacity: 0.7,
-				terrainSource: {
-					maxZoom: 15,
-					tileSize: 256,
-					getSourceUrl: ({ x, y, z }) => `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/${z}/${x}/${y}.png`,
-					getElevation: ({ r, g, b, a }) => (r * 256 + g + b / 256) - 32768,
-					_overzoom: 18,
-				},
-				getFeatures: async () => {
-					await mapLoaded(map);
-					const buildingData = map.querySourceFeatures('composite', { sourceLayer: 'building' }).filter((feature) => {
-						return feature.properties && feature.properties.underground !== "true" && (feature.properties.height || feature.properties.render_height)
-					});
-					return buildingData;
-				},
-				debug: (msg) => { console.log(new Date().toISOString(), msg) }
-			}).addTo(map);
-			shadeMap.on('tileloaded', (loadedTiles, totalTiles) => {
-				loaderEl.innerText = `Loading: ${(loadedTiles / totalTiles * 100).toFixed(0)}%`;
-			});
-		});
-		/* End ShadeMap setup */
-		/* Controls setup */
-		let intervalTimer;
-		const increment = document.getElementById('increment');
-		const decrement = document.getElementById('decrement');
-		const play = document.getElementById('play');
-		const stop = document.getElementById('stop');
-		const exposure = document.getElementById('exposure');
-		const exposureGradientContainer = document.getElementById('exposure-gradient-container');
-		const exposureGradient = document.getElementById('exposure-gradient');
-		increment.addEventListener('click', () => {
-			now = new Date(now.getTime() + 3600000);
-			shadeMap && shadeMap.setDate(now);
-		}, false);
-		decrement.addEventListener('click', () => {
-			now = new Date(now.getTime() - 3600000);
-			shadeMap && shadeMap.setDate(now);
-		}, false);
-		play.addEventListener('click', () => {
-			intervalTimer = setInterval(() => {
-				now = new Date(now.getTime() + 60000);
-				shadeMap && shadeMap.setDate(now);
-			}, 100);
-		});
-		stop.addEventListener('click', () => {
-			clearInterval(intervalTimer);
-		})
-		exposure.addEventListener('click', (e) => {
-			clearInterval(intervalTimer);
-			const target = e.target;
-			if (!target.checked) {
-				shadeMap && shadeMap.setSunExposure(false);
-				increment.disabled = false;
-				decrement.disabled = false;
-				play.disabled = false;
-				stop.disabled = false;
-				exposureGradientContainer.style.display = 'none';
-			} else {
-				const { lat, lng } = map.getCenter();
-				const { sunrise, sunset } = SunCalc.getTimes(now, lat, lng);
-				shadeMap && shadeMap.setSunExposure(true, {
-					startDate: sunrise,
-					endDate: sunset
-				});
-				increment.disabled = true
-				decrement.disabled = true;
-				play.disabled = true;
-				stop.disabled = true;
-				const hours = (sunset - sunrise) / 1000 / 3600;
-				const partial = hours - Math.floor(hours);
-				const html = [];
-				for (let i = 0; i < hours; i++) {
-					html.push(`<div>${i + 1}</div>`)
-				}
-				html.push(`<div style="flex: ${partial}"></div>`);
-				exposureGradientContainer.style.display = 'block';
-				exposureGradient.innerHTML = html.join('');
-			}
-		})
-		/* End controls setup */
-	</script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link
+      href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
+    <script src="https://www.unpkg.com/suncalc@1.9.0/suncalc.js"></script>
+    <script src="../dist/mapbox-gl-shadow-simulator.umd.min.js"></script>
+    <style>
+      body {
+        padding: 0px;
+        margin: 0px;
+      }
+      #mapid {
+        height: 100vh;
+      }
+      .mapbox-control-time {
+        padding: 20px;
+        background-color: white;
+      }
+      #exposure-gradient-container {
+        display: none;
+        background-color: white;
+        padding: 0 10px 5px;
+      }
+      #exposure-gradient {
+        height: 20px;
+        background-image: linear-gradient(
+          to right,
+          rgb(0 0 255/ 0.5),
+          rgb(0 255 0 / 0.5),
+          rgb(255 0 0 / 0.5)
+        );
+        display: flex;
+      }
+      #exposure-gradient > div {
+        flex: 1;
+        border: 1px solid white;
+        text-align: center;
+        font-weight: bold;
+      }
+    </style>
+    <title>mapbox-gl-shadow-simulator Mapbox Example</title>
+  </head>
+  <body>
+    <div id="mapid">
+      <div
+        class="mapboxgl-control-container"
+        style="z-index: 2000; pointer-events: auto"
+      >
+        <div class="mapboxgl-ctrl-top-left">
+          <div class="mapbox-control-time" style="pointer-events: auto">
+            <button id="decrement">-1 hour</button>
+            <button id="increment">+1 hour</button>
+            <button id="play">Play</button>
+            <button id="stop">Stop</button>
+            <label
+              ><input
+                id="exposure"
+                type="checkbox"
+                autocomplete="off"
+              />Full-day sun exposure</label
+            >
+            <button>
+              <a href="https://shademap.app/about" target="_blank"
+                >Get API key</a
+              >
+            </button>
+            <span id="loader" style="padding: 3px"></span>
+          </div>
+          <div id="exposure-gradient-container">
+            <div>Hours of sunlight</div>
+            <div id="exposure-gradient"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      const mapLoaded = (map) => {
+        return new Promise((res, rej) => {
+          function cb() {
+            if (!map.loaded()) {
+              return;
+            }
+            map.off("render", cb);
+            res();
+          }
+          map.on("render", cb);
+          cb();
+        });
+      };
+      /* Mapbox setup */
+      mapboxgl.accessToken =
+        "pk.eyJ1IjoidHBwaW90cm93c2tpIiwiYSI6ImNsNGVpdzMxYzAzenUzb28zYXZ4MXdlc2EifQ.M4IHx7SY0Wv5Zt6xzvKeBQ";
+      const map = new mapboxgl.Map({
+        container: "mapid",
+        style: "mapbox://styles/mapbox/streets-v11",
+        center: { lng: -122.18578164139899, lat: 47.694878957368815 },
+        zoom: 8, // starting zoom
+        hash: true,
+      });
+      /* End Mapbox setup */
+      /* ShadeMap setup */
+      const loaderEl = document.getElementById("loader");
+      let now = new Date(
+        SunCalc.getTimes(
+          new Date(),
+          47.694878957368815,
+          -122.18578164139899
+        ).sunrise.getTime() +
+          60 * 60 * 1000
+      );
+      let shadeMap;
+      map.on("load", () => {
+        shadeMap = new ShadeMap({
+          apiKey:
+            "eyJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6InRwcGlvdHJvd3NraUBzaGFkZW1hcC5hcHAiLCJjcmVhdGVkIjoxNjYyNDkzMDY2Nzk0LCJpYXQiOjE2NjI0OTMwNjZ9.ovCrLTYsdKFTF6TW3DuODxCaAtGQ3qhcmqj3DWcol5g",
+          date: now,
+          color: "#01112f",
+          opacity: 0.7,
+          terrainSource: {
+            maxZoom: 15,
+            tileSize: 256,
+            getSourceUrl: ({ x, y, z }) =>
+              `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/${z}/${x}/${y}.png`,
+            getElevation: ({ r, g, b, a }) => r * 256 + g + b / 256 - 32768,
+            _overzoom: 18,
+          },
+          getFeatures: async () => {
+            await mapLoaded(map);
+            const buildingData = map
+              .querySourceFeatures("composite", { sourceLayer: "building" })
+              .filter((feature) => {
+                return (
+                  feature.properties &&
+                  feature.properties.underground !== "true" &&
+                  (feature.properties.height ||
+                    feature.properties.render_height)
+                );
+              });
+            return buildingData;
+          },
+          debug: (msg) => {
+            console.log(new Date().toISOString(), msg);
+          },
+        }).addTo(map);
+        shadeMap.on("tileloaded", (loadedTiles, totalTiles) => {
+          loaderEl.innerText = `Loading: ${(
+            (loadedTiles / totalTiles) *
+            100
+          ).toFixed(0)}%`;
+        });
+      });
+      /* End ShadeMap setup */
+      /* Controls setup */
+      let intervalTimer;
+      const increment = document.getElementById("increment");
+      const decrement = document.getElementById("decrement");
+      const play = document.getElementById("play");
+      const stop = document.getElementById("stop");
+      const exposure = document.getElementById("exposure");
+      const exposureGradientContainer = document.getElementById(
+        "exposure-gradient-container"
+      );
+      const exposureGradient = document.getElementById("exposure-gradient");
+      increment.addEventListener(
+        "click",
+        () => {
+          now = new Date(now.getTime() + 3600000);
+          shadeMap && shadeMap.setDate(now);
+        },
+        false
+      );
+      decrement.addEventListener(
+        "click",
+        () => {
+          now = new Date(now.getTime() - 3600000);
+          shadeMap && shadeMap.setDate(now);
+        },
+        false
+      );
+      play.addEventListener("click", () => {
+        intervalTimer = setInterval(() => {
+          now = new Date(now.getTime() + 60000);
+          shadeMap && shadeMap.setDate(now);
+        }, 100);
+      });
+      stop.addEventListener("click", () => {
+        clearInterval(intervalTimer);
+      });
+      exposure.addEventListener("click", (e) => {
+        clearInterval(intervalTimer);
+        const target = e.target;
+        if (!target.checked) {
+          shadeMap && shadeMap.setSunExposure(false);
+          increment.disabled = false;
+          decrement.disabled = false;
+          play.disabled = false;
+          stop.disabled = false;
+          exposureGradientContainer.style.display = "none";
+        } else {
+          const { lat, lng } = map.getCenter();
+          const { sunrise, sunset } = SunCalc.getTimes(now, lat, lng);
+          shadeMap &&
+            shadeMap.setSunExposure(true, {
+              startDate: sunrise,
+              endDate: sunset,
+            });
+          increment.disabled = true;
+          decrement.disabled = true;
+          play.disabled = true;
+          stop.disabled = true;
+          const hours = (sunset - sunrise) / 1000 / 3600;
+          const partial = hours - Math.floor(hours);
+          const html = [];
+          for (let i = 0; i < hours; i++) {
+            html.push(`<div>${i + 1}</div>`);
+          }
+          html.push(`<div style="flex: ${partial}"></div>`);
+          exposureGradientContainer.style.display = "block";
+          exposureGradient.innerHTML = html.join("");
+        }
+      });
+      /* End controls setup */
+    </script>
+  </body>
+</html>