mapbox-gl-shadow-simulator 0.15.0 → 0.16.0

package/README.md

@@ -1,8 +1,8 @@
 # mapbox-gl-shadow-simulator
 
-Terrain, building and object shadow simulator for Mapbox JS and Maplibre JS. Display sunlight and shadow on a map for any date and time of year.
+Shadow simulator for Mapbox GL JS and MapLibre GL JS. Visualize sunlight and shadow on a map for any date and time of year.
 
-[![Mapbox GL Shadow Simulator demo](/demo.gif)](https://ted-piotrowski.github.io/mapbox-gl-shadow-simulator/examples/map.html)
+[![Mapbox GL Shadow Simulator demo](/demo.jpg)](https://ted-piotrowski.github.io/mapbox-gl-shadow-simulator/examples/map.html)
 
 [Live Demo](https://ted-piotrowski.github.io/mapbox-gl-shadow-simulator/examples/map.html)
 
@@ -114,7 +114,7 @@ Property name | Type | Default value | Comment
 `date` | `Date` | `new Date()` | Sun's position in the sky is based on this date
 `color` | `String` | `#000` | 3 or 6 digit hexadecimal number
 `opacity` | `Number` | `0.3`
-`showExposure` | `Boolean` | `false` | Display 24 hour sun exposure data if set to true (**Note:** requires [suncalc](https://www.npmjs.com/package/suncalc))
+`showExposure` | `Boolean` | `false` | If set to true, display full-day sun exposure for `date` (**Note:** requires [suncalc](https://www.npmjs.com/package/suncalc))
 `terrainSource` | `Object` | See [terrainSource](#terrainsource) | Specify DEM or DSM tiles containing terrain elevation data
 `getFeatures` | `Function` | See [getFeatures](#getfeatures) | Returns GeoJSON of objects, such as buildings, to display on the map
 
@@ -199,10 +199,12 @@ getFeatures: () => {
 
 ### Available functions
 
-`setDate(date: Date)` - update shade layer to reflect new date
+`setDate(date: Date)` - update shade layer to reflect new `date`
 
 `setColor(color: String)` - change shade color
 
 `setOpacity(opacity: Number)` - change shade opacity
 
-`setShowExposure(show: Boolean)` - toggle between shade layer and 24 hour sun exposure (**Note:** requires [suncalc](https://www.npmjs.com/package/suncalc))
+`setShowExposure(show: Boolean)` - toggle between shadows and full-day sun exposure for `date` (**Note:** requires [suncalc](https://www.npmjs.com/package/suncalc))
+
+`remove()` - remove the layer from the map

package/dist/mapbox-gl-shadow-simulator.d.ts

@@ -45,6 +45,7 @@ declare class export_default extends EventEmitter {
     setShowExposure(show: boolean): this;
     readPixel(x: number, y: number): Uint8Array;
     addTo(map: Map): this;
+    remove(): void;
 }
 
 export { export_default as default, ShadeMapOptions };

package/examples/map.html

@@ -5,8 +5,8 @@
 	<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.7.0/mapbox-gl.css' rel='stylesheet' />
-	<script src='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js'></script>
+	<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>
@@ -23,6 +23,25 @@
 			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>
@@ -36,12 +55,16 @@
 					<button id="increment">+1 hour</button>
 					<button id="play">Play</button>
 					<button id="stop">Stop</button>
-					<label><input id="exposure" type="checkbox" autocomplete="off" />24 hour sun exposure</label>
+					<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>
@@ -109,6 +132,8 @@
 		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);
@@ -140,12 +165,25 @@
 				decrement.disabled = false;
 				play.disabled = false;
 				stop.disabled = false;
+				exposureGradientContainer.style.display = 'none';
 			} else {
 				shadeMap && shadeMap.setShowExposure(true);
 				increment.disabled = true
 				decrement.disabled = true;
 				play.disabled = true;
 				stop.disabled = true;
+
+				const { lat, lng } = map.getCenter();
+				const { sunrise, sunset } = SunCalc.getTimes(now, lat, lng);
+				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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-shadow-simulator",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Display terrain and structure shadows cast by the sun in a custom style layer",
   "main": "dist/mapbox-gl-shadow-simulator.umd.min.js",
   "types": "dist/mapbox-gl-shadow-simulator.d.ts",