mapbox-gl-shadow-simulator 0.46.1 → 0.47.1

package/dist/shademap/leaflet-shademap/dist/lib/helpers.d.ts

@@ -0,0 +1,27 @@
+import { Point, ValidBounds } from "../map/geometryLeaflet";
+export declare const pad: (x: number) => string | number;
+export interface XYZ {
+    x: number;
+    y: number;
+    z: number;
+}
+export interface XYZParams {
+    upperLeft: Point;
+    width: number;
+    height: number;
+    zoom: number;
+}
+export declare const xyz: (params: XYZParams) => XYZ[];
+export interface TileBoundsArgs {
+    upperLeft: Point;
+    width: number;
+    height: number;
+}
+export declare const getTileBounds: (args: TileBoundsArgs) => ValidBounds;
+export declare const getDeclination: (date: Date) => {
+    dec: number;
+    Hi: number;
+};
+export declare const randomId: () => number;
+export declare const timeInTheSunMs: (exposureLayerColor: Uint8Array, exposureLayerOpacity: number, totalTimeIntervalInMs: number) => number;
+export declare const UTCOffsetByTimeZone: (date?: Date, timeZone?: string | undefined) => number;

package/dist/shademap/leaflet-shademap/dist/lib/image.d.ts

@@ -0,0 +1,13 @@
+import { XYZ } from "../lib/helpers";
+export interface XYZRaster {
+    xOffset: number;
+    yOffset: number;
+    x: number;
+    y: number;
+    z: number;
+}
+export declare const createTileRaster: (xyzTiles: XYZ[]) => XYZRaster[];
+export declare const getDimensions: (data: XYZRaster[]) => {
+    width: number;
+    height: number;
+};

package/dist/shademap/leaflet-shademap/dist/lib/projection.d.ts

@@ -0,0 +1,3 @@
+import { LatLngLiteral } from "leaflet";
+export declare const project: (center: LatLngLiteral, zoom: number) => any;
+export declare const unproject: (point: any, zoom: number) => any;

package/dist/shademap/leaflet-shademap/dist/lib/shadowMap.d.ts

@@ -0,0 +1,16 @@
+import { UMap } from "../map/umap";
+import { CompiledKernel } from "../shader/kernel";
+import { Color } from "../types/color";
+import { HeightMap } from "./heightMap";
+interface DrawShadowParams {
+    kernel: CompiledKernel;
+    map: UMap;
+    heightMap: HeightMap;
+    now: Date;
+    color: Color;
+    opacity: number;
+    maxZoom: number;
+    belowCanopy: boolean;
+}
+export declare const drawShadow: (params: DrawShadowParams) => void;
+export {};

package/dist/shademap/leaflet-shademap/dist/map/geometryLeaflet.d.ts

@@ -0,0 +1,11 @@
+import { LatLng } from "../../node_modules/leaflet/src/geo/LatLng";
+import { LatLngBounds } from "../../node_modules/leaflet/src/geo/LatLngBounds";
+import { Bounds } from "../../node_modules/leaflet/src/geometry/Bounds";
+import { Point } from "../../node_modules/leaflet/src/geometry/Point";
+export { Point, Bounds, LatLngBounds, LatLng };
+export interface ValidBounds extends Bounds {
+    getTopLeft: () => Point;
+    getBottomRight: () => Point;
+    min: Point;
+    max: Point;
+}

package/dist/shademap/leaflet-shademap/dist/map/umap.d.ts

@@ -0,0 +1,26 @@
+import { LatLngLiteral, Layer, Map as LeafletMap, PointExpression } from "leaflet";
+import { Map as MapboxGLMap } from "mapbox-gl";
+import { LatLng, LatLngBounds, Point } from "../map/geometryLeaflet";
+export interface UMap {
+    project: (center: LatLngLiteral, zoom: number) => Point;
+    unproject: (point: Point, zoom: number) => LatLng;
+    screenUnproject: (point: PointExpression) => LatLng;
+    getZoom: () => number;
+    getCenter: () => LatLng;
+    getBounds: () => LatLngBounds;
+    eachLayer(fn: (layer: Layer) => void): void;
+    getBearing: () => number;
+    getPitch: () => number;
+    rawMap: () => LeafletMap | MapboxGLMap;
+    isLeaflet: () => boolean;
+    getPixelDimensions: () => {
+        width: number;
+        height: number;
+    };
+    createBounds: (args: {
+        nw: LatLngLiteral;
+        se: LatLngLiteral;
+    }) => LatLngBounds;
+}
+declare const uMap: (map: MapboxGLMap | LeafletMap) => UMap;
+export default uMap;

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

@@ -0,0 +1,29 @@
+import { Color } from "../types/color";
+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 generateShadeProfile: (compiledKernel: CompiledKernel, params: {
+    texCoords: number[][];
+    dates: Date[];
+    sunColor: number[];
+    shadeColor: number[];
+}) => Uint8Array;
+export declare const generateLocationShadeProfile: (compiledKernel: CompiledKernel, params: {
+    texCoord: number[];
+    dates: Date[][];
+    sunColor: number[];
+    shadeColor: number[];
+}) => Uint8Array;
+export declare const updateDateRangeGPU: (compiledKernel: CompiledKernel, params: {
+    startDate: Date;
+    endDate: Date;
+    iterations: number;
+    emit: (name: string, ...args: any[]) => void;
+}) => Promise<boolean>;
+export declare const updateColorGPU: (compiledKernel: CompiledKernel, params: {
+    color: Color;
+    opacity: number;
+}) => void;

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

@@ -0,0 +1,68 @@
+interface CompileProgramArgs {
+    gl: WebGLRenderingContext;
+    vSrc: string;
+    fSrc: string;
+}
+interface UpdateLocationArgs {
+    width: number;
+    height: number;
+    maxHeight: number;
+    heightMapZoom: number;
+    topYCoord: number;
+    ySize: number;
+    colorVec: number[];
+    step: number;
+    west: number;
+    dLng: number;
+    dec: number;
+    Hi: number;
+    cornerClipCoords: number[];
+    cornerTextureCoords: number[];
+    outputWidth: number;
+    outputHeight: number;
+    belowCanopy: boolean;
+}
+interface UpdateViewportArgs {
+    xStart: number;
+    yStart: number;
+    xEnd: number;
+    yEnd: number;
+}
+interface UpdateDateArgs {
+    dec: number;
+    Hi: number;
+}
+interface UpdateDateRangeArgs {
+    startDate: Date;
+    endDate: Date;
+    iterations: number;
+    emit: (name: string, ...args: any[]) => void;
+}
+interface UpdateColorArgs {
+    colorVec: number[];
+}
+export interface CompiledKernel {
+    updateLocation: (args: UpdateLocationArgs) => void;
+    updateViewport: (args: UpdateViewportArgs) => void;
+    updateDate: (args: UpdateDateArgs) => void;
+    updateDateRange: (args: UpdateDateRangeArgs) => Promise<boolean>;
+    updateColor: (args: UpdateColorArgs) => void;
+    generateShadeProfile: (args: {
+        texCoords: number[][];
+        dates: Date[];
+        sunColor: number[];
+        shadeColor: number[];
+    }) => Uint8Array;
+    generateLocationShadeProfile: (args: {
+        texCoord: number[];
+        dates: Date[][];
+        sunColor: number[];
+        shadeColor: number[];
+    }) => Uint8Array;
+}
+export declare function compileProgram(args: CompileProgramArgs): WebGLProgram;
+interface Settings {
+    context: WebGLRenderingContext;
+}
+declare function kernel(settings: Settings): CompiledKernel;
+export default kernel;

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

@@ -0,0 +1,5 @@
+export interface Color {
+    r: number;
+    g: number;
+    b: number;
+}

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

@@ -0,0 +1,3 @@
+export declare const MAX_ELEVATION = 8848;
+export declare const TILE_SIZE = 256;
+export declare const EXPOSURE_LAYER_OPACITY = 0.5;

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

@@ -0,0 +1,5 @@
+export declare enum Quality {
+    LOW = "low",
+    MED = "medium",
+    HIGH = "high"
+}

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

@@ -0,0 +1,46 @@
+import { MapboxGeoJSONFeature } from "mapbox-gl";
+import { Quality } from "./quality";
+import { LatLngLiteral } from "leaflet";
+export interface TerrainSource {
+    maxZoom: number;
+    tileSize: number;
+    getSourceUrl: (params: {
+        x: number;
+        y: number;
+        z: number;
+    }) => string;
+    getElevation: (params: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    }) => number;
+    _overzoom: number;
+}
+export interface DSMSource {
+    data: Uint8ClampedArray;
+    bounds: LatLngLiteral[];
+    width: number;
+    height: number;
+    maxHeight: number;
+}
+export interface SunExposureOptions {
+    startDate: Date;
+    endDate: Date;
+    iterations?: number;
+}
+export interface SunExposure extends SunExposureOptions {
+    enabled: boolean;
+}
+export interface ShadeMapOptions {
+    date?: Date;
+    color?: string;
+    opacity?: number;
+    quality?: Quality;
+    sunExposure?: SunExposure;
+    terrainSource?: TerrainSource;
+    dsmSource?: DSMSource;
+    getFeatures?: () => Promise<MapboxGeoJSONFeature[]>;
+    apiKey: string;
+    debug?: (msg: string) => void;
+}

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

@@ -0,0 +1,20 @@
+import { Color } from "./color";
+export interface Shadow3DData {
+    imageData: Uint8ClampedArray;
+    maxHeight: number;
+    width: number;
+    height: number;
+    date: Date;
+    heightMapZoom: number;
+    topYCoord: number;
+    ySize: number;
+    color: Color;
+    opacity: number;
+    west: number;
+    dLng: number;
+    cornerClipCoords: number[];
+    cornerTextureCoords: number[];
+    outputWidth: number;
+    outputHeight: number;
+    belowCanopy: boolean;
+}

package/examples/maplibre.html

@@ -8,7 +8,7 @@
     <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css' />
     <script src='https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.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/protomaps-themes-base@2.0.0-alpha.5/dist/index.js'></script>
     <script src="../dist/mapbox-gl-shadow-simulator.umd.min.js"></script>
     <style>
         body {
@@ -84,9 +84,31 @@
             });
         };
         /* Maplibregl setup */
+        maplibregl.setRTLTextPlugin(
+            'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
+            true // Lazy load the plugin
+        );
+
         const map = new maplibregl.Map({
             container: 'mapid',
-            style: 'https://demotiles.maplibre.org/style.json',
+            style: {
+                version: 8,
+                glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
+                sources: {
+                    "protomaps": {
+                        type: "vector",
+                        tiles: [
+                            "https://cfw.shademap.app/20240207/{z}/{x}/{y}.pbf"
+                        ],
+                        //     url: "pmtiles://https://example.com/example.pmtiles",
+                        //     //       ^-- Remember to prefix the URL with pmtiles://
+                        attribution: '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
+                        maxzoom: 15,
+                    }
+                },
+                layers: protomaps_themes_base.default("protomaps", "light")
+            },
+            maplibreLogo: true,
             center: { lng: -122.18578164139899, lat: 47.694878957368815 },
             zoom: 8, // starting zoom
             hash: true,
@@ -112,30 +134,20 @@
                     _overzoom: 18,
                 },
                 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);
+                    if (map.getZoom() >= 12) {
+                        await mapLoaded(map);
+                        const buildingData = map
+                            .querySourceFeatures("protomaps", { sourceLayer: "buildings" })
+
+                        buildingData.forEach(feature => { feature.properties.height = feature.properties.height || 3.1 })
+
+                        // Buildings segments must be rasterized from bottom to top. If not, the base of a building
+                        // could rasterize over the top tower of the building
+                        buildingData.sort((a, b) => {
+                            return a.properties.height - b.properties.height;
+                        });
+                        return buildingData;
+
                     }
                     return [];
                 },
@@ -146,40 +158,6 @@
                 loaderEl.innerText = `Loading: ${(loadedTiles / totalTiles * 100).toFixed(0)}%`;
             });
         });
-
-        async function addExtrusion() {
-            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;
-                        }
-                    });
-                    map.addSource('buildings3d', {
-                        type: 'geojson',
-                        data: geojson
-                    });
-                    map.addLayer('')
-                }
-            } catch (e) {
-                console.error(e);
-            }
-            return [];
-
-        }
         /* End ShadeMap setup */
 
         /* Controls setup */
@@ -251,4 +229,4 @@
     </script>
 </body>
 
-</html>
+</html>

package/package.json

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