leaflet-shadow-simulator 0.56.1 → 0.57.1

package/dist/shademap/leaflet-shademap/dist/shader/gpu.d.ts

@@ -1,18 +1,10 @@
 import { Color } from "../types/color";
-import { DSMSource } from "../types/shadeMapOptions";
 import { Shadow3DData } from "../types/shadow3DData";
 import { CompiledKernel } from "./kernel";
 export declare const updateHeightMapGPU: (compiledKernel: CompiledKernel, shadow3DData: Shadow3DData) => void;
 export declare const updateDateGPU: (compiledKernel: CompiledKernel, params: {
     date: Date;
 }) => void;
-export declare const calculateArea: (compiledKernel: CompiledKernel, params: {
-    dates: Date[];
-    dsm: DSMSource;
-    geometry: {
-        coordinates: [number, number][][];
-    };
-}) => import("../types/area").ShadeArea[];
 export declare const generateShadeProfile: (compiledKernel: CompiledKernel, params: {
     texCoords: number[][];
     dates: Date[];
@@ -20,11 +12,17 @@ export declare const generateShadeProfile: (compiledKernel: CompiledKernel, para
     shadeColor: number[];
 }) => Uint8Array;
 export declare const generateLocationShadeProfile: (compiledKernel: CompiledKernel, params: {
+    startTime: number;
+    endTime: number;
+    tzId: string;
     texCoord: number[];
-    dates: Date[][];
     sunColor: number[];
     shadeColor: number[];
-}) => Uint8Array;
+}) => {
+    output: Uint8Array;
+    outputWidth: number;
+    outputHeight: number;
+};
 export declare const updateDateRangeGPU: (compiledKernel: CompiledKernel, params: {
     startDate: Date;
     endDate: Date;
@@ -35,4 +33,3 @@ export declare const updateColorGPU: (compiledKernel: CompiledKernel, params: {
     color: Color;
     opacity: number;
 }) => void;
-export declare const updateCowHeightGPU: (compiledKernel: CompiledKernel, cowHeight: number) => void;

package/dist/shademap/leaflet-shademap/dist/shader/kernel.d.ts

@@ -1,11 +1,10 @@
-import { DSMSource } from "../types/shadeMapOptions";
-import { ShadeArea } from "../types/area";
 interface CompileProgramArgs {
     gl: WebGLRenderingContext;
     vSrc: string;
     fSrc: string;
 }
-interface UpdateLocationArgs {
+interface UpdateHeightMapArgs {
+    heightMapTex: WebGLTexture | null;
     width: number;
     height: number;
     maxHeight: number;
@@ -23,13 +22,7 @@ interface UpdateLocationArgs {
     outputWidth: number;
     outputHeight: number;
     belowCanopy: boolean;
-    kmPerPixel: number;
-}
-interface UpdateViewportArgs {
-    xStart: number;
-    yStart: number;
-    xEnd: number;
-    yEnd: number;
+    skipRender: boolean;
 }
 interface UpdateDateArgs {
     dec: number;
@@ -44,36 +37,36 @@ interface UpdateDateRangeArgs {
 interface UpdateColorArgs {
     colorVec: number[];
 }
+interface ShadeProfileArgs {
+    texCoords: number[][];
+    dates: Date[];
+    sunColor: number[];
+    shadeColor: number[];
+}
+interface LocationShadeProfileArgs {
+    startTime: number;
+    endTime: number;
+    tzId: string;
+    texCoord: number[];
+    sunColor: number[];
+    shadeColor: number[];
+}
 export interface CompiledKernel {
-    updateLocation: (args: UpdateLocationArgs) => void;
-    updateViewport: (args: UpdateViewportArgs) => void;
+    updateHeightMap: (args: UpdateHeightMapArgs) => void;
     updateDate: (args: UpdateDateArgs) => void;
     updateDateRange: (args: UpdateDateRangeArgs) => Promise<boolean>;
     updateColor: (args: UpdateColorArgs) => void;
-    updateCowHeight: (cowHeight: number) => void;
-    generateShadeProfile: (args: {
-        texCoords: number[][];
-        dates: Date[];
-        sunColor: number[];
-        shadeColor: number[];
-    }) => Uint8Array;
-    generateLocationShadeProfile: (args: {
-        texCoord: number[];
-        dates: Date[][];
-        sunColor: number[];
-        shadeColor: number[];
-    }) => Uint8Array;
-    calculateArea: (args: {
-        dates: Date[];
-        dsm: DSMSource;
-        geometry: {
-            coordinates: [number, number][][];
-        };
-    }) => ShadeArea[];
+    generateShadeProfile: (args: ShadeProfileArgs) => Uint8Array;
+    generateLocationShadeProfile: (args: LocationShadeProfileArgs) => {
+        output: Uint8Array;
+        outputWidth: number;
+        outputHeight: number;
+    };
 }
 export declare function compileProgram(args: CompileProgramArgs): WebGLProgram;
 interface Settings {
     context: WebGLRenderingContext;
+    setRenderBuffer: (gl: WebGLRenderingContext, viewportWidth: number, viewportHeight: number) => void;
 }
 declare function kernel(settings: Settings): CompiledKernel;
 export default kernel;

package/dist/shademap/leaflet-shademap/dist/types/shadeMapOptions.d.ts

@@ -32,11 +32,6 @@ export interface SunExposureOptions {
 export interface SunExposure extends SunExposureOptions {
     enabled: boolean;
 }
-export interface Geometry {
-    enabled: boolean;
-    type: string;
-    coordinates: number[][][];
-}
 export interface ShadeMapOptions {
     date?: Date;
     color?: string;
@@ -45,7 +40,6 @@ export interface ShadeMapOptions {
     sunExposure?: SunExposure;
     terrainSource?: TerrainSource;
     dsmSource?: DSMSource;
-    geometry?: Geometry;
     getFeatures?: () => Promise<MapboxGeoJSONFeature[]>;
     apiKey: string;
     debug?: (msg: string) => void;

package/dist/shademap/leaflet-shademap/dist/types/shadow3DData.d.ts

@@ -1,6 +1,6 @@
 import { Color } from "./color";
 export interface Shadow3DData {
-    imageData: Uint8ClampedArray;
+    heightMapTex: WebGLTexture | null;
     maxHeight: number;
     width: number;
     height: number;
@@ -17,5 +17,5 @@ export interface Shadow3DData {
     outputWidth: number;
     outputHeight: number;
     belowCanopy: boolean;
-    kmPerPixel: number;
+    skipRender: boolean;
 }

package/examples/test.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
+        rel="stylesheet" />
+
+    <script src="https://unpkg.com/@jsreport/browser-client/dist/jsreport.umd.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script src="https://www.unpkg.com/suncalc@1.9.0/suncalc.js"></script>
+    <script src="https://unpkg.com/osmtogeojson/osmtogeojson.js"></script>
+    <!-- <script src="https://unpkg.com/leaflet-shadow-simulator@0.50.0/dist/leaflet-shadow-simulator.umd.min.js"></script> -->
+    <script src="../dist/leaflet-shadow-simulator.umd.min.js"></script>
+</head>
+
+<body>
+    <div class="px-4">
+        <div id="sunlight-map" style="width:100%;height:780px; margin-bottom: 20px"></div>
+
+        <script>
+            try {
+                const map = L.map("sunlight-map", {
+                    zoomControl: false
+                }).setView([46.20111914696285, 6.1484776575582], 18);
+
+                L.tileLayer("https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoicG9wZXR5IiwiYSI6ImNpdDlydDEwYzBsMWYydXAyeXhrMHhoamIifQ.9_sT8uJ8zd_6sU0ispPK3w", {
+                    attribution: '',
+                    maxZoom: 18,
+                }).addTo(map);
+
+                let now = new Date(1633358583454);
+
+                const {
+                    sunrise,
+                    sunset
+                } = SunCalc.getTimes(now, 46.20111914696285, 6.1484776575582);
+
+                const shadeMap = new ShadeMap({
+                    date: new Date(), // display shadows for current date
+                    color: '#01112f', // shade color
+                    opacity: 0.7, // opacity of shade color
+                    apiKey: 'eyJhbGciOiJIUzI1NiJ9.eyJlbWFpbCI6InRwcGlvdHJvd3NraUBzaGFkZW1hcC5hcHAiLCJjcmVhdGVkIjoxNjYyNDkzMDY2Nzk0LCJpYXQiOjE2NjI0OTMwNjZ9.ovCrLTYsdKFTF6TW3DuODxCaAtGQ3qhcmqj3DWcol5g',
+                    terrainSource: {
+                        tileSize: 256, // DEM tile size
+                        _overzoom: 18,
+                        maxZoom: 15, // Maximum zoom of DEM tile set
+                        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,
+                    },
+                    sunExposure: {
+                        enabled: true,
+                        startDate: sunrise,
+                        endDate: sunset,
+                        iterations: 3
+                    },
+                    getFeatures: async () => {
+                        try {
+                            if (map.getZoom() > 15) {
+                                const bounds = map.getBounds();
+                                const north = bounds.getNorth();
+                                const south = bounds.getSouth();
+                                const east = bounds.getEast();
+                                const west = bounds.getWest();
+                                const query = `https://overpass-api.de/api/interpreter?data=%2F*%0AThis%20has%20been%20generated%20by%20the%20overpass-turbo%20wizard.%0AThe%20original%20search%20was%3A%0A%E2%80%9Cbuilding%E2%80%9D%0A*%2F%0A%5Bout%3Ajson%5D%5Btimeout%3A25%5D%3B%0A%2F%2F%20gather%20results%0A%28%0A%20%20%2F%2F%20query%20part%20for%3A%20%E2%80%9Cbuilding%E2%80%9D%0A%20%20way%5B%22building%22%5D%28${south}%2C${west}%2C${north}%2C${east}%29%3B%0A%29%3B%0A%2F%2F%20print%20results%0Aout%20body%3B%0A%3E%3B%0Aout%20skel%20qt%3B`;
+                                const response = await fetch(query)
+                                const json = await response.json();
+                                const geojson = osmtogeojson(json);
+                                // If no building height, default to one storey of 3 meters
+                                geojson.features.forEach(feature => {
+                                    if (!feature.properties) {
+                                        feature.properties = {};
+                                    }
+                                    if (!feature.properties.height) {
+                                        feature.properties.height = 3;
+                                    }
+                                });
+                                return geojson.features;
+                            }
+                        } catch (e) {
+                            console.error(e);
+                        }
+                        return [];
+                    },
+                    debug: (msg) => console.log(msg),
+                }).addTo(map);
+
+                //   shadeMap.setTerrainSource({
+                //   getSourceUrl: (params) => {
+                //     const { x, y, z } = params
+
+                //     return `https://pub-042f8c71c32b4422a6a445f9ecaf6a55.r2.dev/${z}/${x}/${y}.webp`
+                //   },
+                //   getElevation: (params) => {
+                //     const { r, g } = params
+
+                //     return ((r * 256 + g) / 2 ** 16) * 4808
+                //   },
+                //   tileSize: 512,
+                //   maxZoom: 17,
+                //   _overzoom: 18,
+                // })
+
+
+                // shadeMap.setSunExposure(true, {
+                //   startDate: sunrise,
+                //   endDate: sunset
+                // });
+
+                shadeMap.once('idle', () => {
+                    shadeMap._reset();
+                    setTimeout(() => {
+                        window.JSREPORT_READY_TO_START = true;
+                    }, 4000);
+                });
+
+            } catch (error) {
+                console.error("Error name:", error.name);
+                console.error("Error message:", error.message);
+                console.error("Error stack:", error.stack);
+            }
+        </script>
+    </div>
+</body>
+
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-shadow-simulator",
-  "version": "0.56.1",
+  "version": "0.57.1",
   "description": "Display terrain and structure shadows cast by the sun in a custom Leaflet layer",
   "main": "dist/leaflet-shadow-simulator.umd.min.js",
   "browser": "dist/leaflet-shadow-simulator.umd.min.js",