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/markers-maplibre.html ADDED Viewed

@@ -0,0 +1,304 @@
+<!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 rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.css" />
+  <script src="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.js"></script>
+  <script src="https://www.unpkg.com/suncalc@1.9.0/suncalc.js"></script>
+  <script src="https://unpkg.com/protomaps-themes-base@4.3.0/dist/protomaps-themes-base.js"></script>
+  <script src="../dist/mapbox-gl-shadow-simulator.umd.min.js"></script>
+  <style>
+    body {
+      padding: 0px;
+      margin: 0px;
+    }
+    #mapid {
+      height: 100vh;
+    }
+    .maplibregl-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 Maplibre Markers Example</title>
+</head>
+<body>
+  <div id="mapid">
+    <div class="maplibregl-control-container" style="z-index: 2000; pointer-events: auto">
+      <div class="maplibregl-ctrl-top-left">
+        <div class="maplibregl-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();
+      });
+    };
+    /* 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: {
+        version: 8,
+        glyphs:
+          "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+        sources: {
+          protomaps: {
+            type: "vector",
+            tiles: ["https://cfw.shademap.app/planet/{z}/{x}/{y}.pbf"],
+            attribution:
+              '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
+            maxzoom: 15,
+          },
+          buildings: {
+            type: "vector",
+            tiles: [`https://cfw.shademap.app/buildings/{z}/{x}/{y}.mvt`],
+            minzoom: 14,
+            maxzoom: 14,
+          },
+        },
+        layers: [
+          ...protomaps_themes_base.default("protomaps", "light", "en"),
+          {
+            id: "building",
+            source: "buildings",
+            "source-layer": "building",
+            type: "line",
+          },
+        ],
+      },
+      maplibreLogo: true,
+      center: { lng: -122.15675711631776, lat: 47.75510439397995 },
+      zoom: 16, // starting zoom
+      hash: true,
+    });
+    /* End Maplibregl setup */
+    /* Add markers for cafes */
+    const cafes = [
+      { lat: 47.75479062611596, lng: -122.15534138695534 },
+      { lat: 47.75337697202738, lng: -122.16319480178332 },
+      { lat: 47.751941595291726, lng: -122.15921456808333 },
+      { lat: 47.753477542718706, lng: -122.15083544800348 },
+      { lat: 47.754992309138885, lng: -122.15102829347933 },
+      { lat: 47.757776865447056, lng: -122.1563603726317 },
+    ];
+    const markers = cafes.map((coords) => {
+      return new maplibregl.Marker().setLngLat(coords).addTo(map);
+    });
+    /* End add markers for cafes */
+    /* 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 () => {
+          if (map.getZoom() >= 12) {
+            await mapLoaded(map);
+            const buildingData = map.querySourceFeatures("buildings", {
+              sourceLayer: "building",
+            });
+            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 [];
+        },
+        debug: (msg) => {
+          console.log(new Date().toISOString(), msg);
+        },
+      }).addTo(map);
+      shadeMap.on("tileloaded", (loadedTiles, totalTiles) => {
+        loaderEl.innerText = `Loading: ${(
+          (loadedTiles / totalTiles) *
+          100
+        ).toFixed(0)}%`;
+      });
+      shadeMap.on("idle", async () => {
+        console.log('idle')
+        const promises = markers.map((marker) => {
+          const latlng = marker.getLngLat();
+          const { x, y } = map.project(latlng);
+          return shadeMap.isPositionInSun(x, y);
+        });
+        const results = await Promise.all(promises);
+        markers.forEach((marker, i) => {
+          const inTheSun = results[i] === true;
+          const element = marker.getElement();
+          const svg = element.getElementsByTagName("svg")[0];
+          const path = svg.getElementsByTagName("path")[0];
+          path.setAttribute("fill", inTheSun ? "#ffcc00" : "#ccf");
+        });
+      });
+    });
+    /* 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>

package/examples/markers.html ADDED Viewed

@@ -0,0 +1,197 @@
+<!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;
+      }
+    </style>
+    <title>mapbox-gl-shadow-simulator Mapbox Markers 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>
+            <button>
+              <a href="https://shademap.app/about" target="_blank"
+                >Get API key</a
+              >
+            </button>
+            <span id="loader" style="padding: 3px"></span>
+          </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.eyJ1IjoidHBwaW90cm93c2tpIiwiYSI6ImNrbGtkMXZtNTA3NmUydXJ5Z2xxNXExcmEifQ.Anj5VuaYC5d595Pde-Xp3w";
+      const map = new mapboxgl.Map({
+        container: "mapid",
+        style: "mapbox://styles/mapbox/streets-v11",
+        center: { lng: -122.15675711631776, lat: 47.75510439397995 },
+        zoom: 16, // starting zoom
+        hash: true,
+      });
+      /* End Mapbox setup */
+      /* Add markers for cafes */
+      const cafes = [
+        { lat: 47.75479062611596, lng: -122.15534138695534 },
+        { lat: 47.75337697202738, lng: -122.16319480178332 },
+        { lat: 47.751941595291726, lng: -122.15921456808333 },
+        { lat: 47.753477542718706, lng: -122.15083544800348 },
+        { lat: 47.754992309138885, lng: -122.15102829347933 },
+        { lat: 47.757776865447056, lng: -122.1563603726317 },
+      ];
+      const markers = cafes.map((coords) => {
+        return new mapboxgl.Marker().setLngLat(coords).addTo(map);
+      });
+      /* End add markers for cafes */
+      /* ShadeMap setup */
+      const loaderEl = document.getElementById("loader");
+      let now = new Date(1633358583454);
+      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)}%`;
+        });
+        shadeMap.on("idle", async () => {
+          console.log("idle");
+          const promises = markers.map((marker) => {
+            const latlng = marker.getLngLat();
+            const { x, y } = map.project(latlng);
+            return shadeMap.isPositionInSun(x, y);
+          });
+          const results = await Promise.all(promises);
+          markers.forEach((marker, i) => {
+            const inTheSun = results[i] === true;
+            const element = marker.getElement();
+            const svg = element.getElementsByTagName("svg")[0];
+            const path = svg.getElementsByTagName("path")[0];
+            path.setAttribute("fill", inTheSun ? "#ffcc00" : "#ccf");
+          });
+        });
+      });
+      /* 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");
+      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);
+      });
+      /* End controls setup */
+    </script>
+  </body>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mapbox-gl-shadow-simulator",
-  "version": "0.61.1",
+  "version": "0.62.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",
   "browser": "dist/mapbox-gl-shadow-simulator.umd.min.js",

package/dist/leaflet-shademap/leaflet-shademap/dist/ShadeMap.d.ts DELETED Viewed

@@ -1,122 +0,0 @@
-import { LatLngLiteral, Map as LeafletMap } from "leaflet";
-import { Map, MapboxGeoJSONFeature } from "mapbox-gl";
-import { BuildingRasterizer } from "./buildings/BuildingRasterizer";
-import { EventEmitter } from "./lib/EventEmitter";
-import { HeightMap } from "./lib/heightMap";
-import { TileMerger } from "./lib/TileMerger";
-import { LatLngBounds } from "./map/geometryLeaflet";
-import { UMap } from "./map/umap";
-import { CompiledKernel } from "./shader/kernel";
-import { Color } from "./types/color";
-import { DSMSource, SunExposureOptions, TerrainSource } from "./types/shadeMapOptions";
-export declare class ShadeMap extends EventEmitter {
-    _canvas: HTMLCanvasElement;
-    _gl?: WebGLRenderingContext;
-    _map?: Map | LeafletMap;
-    _compiledKernel?: CompiledKernel;
-    _color: Color;
-    _bounds?: LatLngBounds;
-    _buildingRasterizer?: BuildingRasterizer;
-    _tileMerger?: TileMerger;
-    _heightMap?: HeightMap;
-    options: {
-        date: Date;
-        color: string;
-        opacity: number;
-        sunExposure: {
-            enabled: boolean;
-            startDate: Date;
-            endDate: Date;
-            iterations: number;
-        };
-        apiKey: string;
-        terrainSource: {
-            maxZoom: number;
-            tileSize: number;
-            _overzoom: number;
-            getSourceUrl: (params: {
-                x: number;
-                y: number;
-                z: number;
-            }) => string;
-            getElevation: (params: {
-                r: number;
-                g: number;
-                b: number;
-                a: number;
-            }) => number;
-        };
-        dsmSource: {
-            bounds: {
-                lat: number;
-                lng: number;
-            }[];
-            data: Uint8ClampedArray;
-            width: number;
-            height: number;
-            maxHeight: number;
-        };
-        belowCanopy: boolean;
-        getFeatures: () => Promise<MapboxGeoJSONFeature[]>;
-        getSize: () => {
-            width: number;
-            height: number;
-        };
-        debug: (msg: string) => void;
-    };
-    constructor(...args: any[]);
-    onRemove(): this;
-    setDate(date: Date): this;
-    _setDateForTimezone(date: Date, tzId?: string): void;
-    setColor(color: string): this;
-    setOpacity(opacity: number): this;
-    setBelowCanopy(belowCanopy: boolean): this;
-    setTerrainSource(terrainSource: TerrainSource): this;
-    setDSMSource(dsmSource: DSMSource): this;
-    setSunExposure(enabled?: boolean, options?: SunExposureOptions): Promise<this>;
-    _lngLatToTextureCoords(lngLat: LatLngLiteral[]): number[][];
-    _getBounds(map: UMap, demZoom: number): LatLngBounds;
-    _getDEMZoom(map: UMap): number;
-    _reset(): Promise<this>;
-    _draw(heightMap: HeightMap): Promise<this>;
-    readPixel(x: number, y: number): Uint8Array;
-    readPixels(x: number, y: number, width: number, height: number): Uint8Array;
-    toGeoTiff(): {
-        data: Uint8Array;
-        metadata: {
-            width: number;
-            height: number;
-            ModelTiepoint: any[];
-            ModelPixelScale: number[];
-            GeographicTypeGeoKey: number;
-            GeogCitationGeoKey: string;
-        };
-    } | null;
-    _generateShadeProfile(params: {
-        locations: LatLngLiteral[];
-        dates: Date[];
-        sunColor: number[];
-        shadeColor: number[];
-    }): Uint8Array;
-    _generateLocationShadeProfile(params: {
-        location: LatLngLiteral;
-        startDate: Date;
-        endDate: Date;
-        sunColor: number[];
-        shadeColor: number[];
-        tzId: string;
-    }): {
-        data: Uint8Array;
-        width: number;
-        height: number;
-    };
-    getHoursOfSun(x: number, y: number): number;
-    _repositionCanvas(bounds: LatLngBounds): void;
-    _flush(): void;
-    flushSync(): void;
-    _parseColor(color: string): {
-        r: number;
-        g: number;
-        b: number;
-    };
-}

package/dist/leaflet-shademap/leaflet-shademap/dist/ShadeMapLeaflet.d.ts DELETED Viewed

@@ -1,17 +0,0 @@
-import { Map } from "leaflet";
-import { CanvasOverlay } from "./components/CanvasOverlay";
-import { LatLngBounds } from "./map/geometryLeaflet";
-import { ShadeMap } from "./ShadeMap";
-import { ShadeMapOptions } from "./types/shadeMapOptions";
-declare class ShadeMapLeaflet extends ShadeMap {
-    _canvasOverlay?: CanvasOverlay;
-    constructor(options: ShadeMapOptions);
-    addTo(map: Map): this;
-    onAdd(map: Map): this;
-    _repositionCanvas(bounds: LatLngBounds): void;
-    _flush(): void;
-}
-declare module "leaflet" {
-    function shadeMap(options: ShadeMapOptions): ShadeMapLeaflet;
-}
-export default ShadeMapLeaflet;

package/dist/leaflet-shademap/leaflet-shademap/dist/ShadeMapMapbox.d.ts DELETED Viewed

@@ -1,29 +0,0 @@
-import { Map } from "mapbox-gl";
-import { LatLngBounds } from "./map/geometryLeaflet";
-import { ShadeMap } from "./ShadeMap";
-import { ShadeMapOptions } from "./types/shadeMapOptions";
-export default class extends ShadeMap {
-    id: string;
-    type: string;
-    canvasSourceId: string;
-    attributionSourceId: string;
-    canvasLayerId: string;
-    attributionLayerId: string;
-    _map?: Map;
-    _refreshing: number;
-    _raf: number;
-    _moveEndHandler: () => void;
-    _framebuffer?: WebGLFramebuffer;
-    constructor(options: ShadeMapOptions);
-    render(gl: WebGLRenderingContext, matrix: number[]): void;
-    addTo(map: Map): this;
-    onAdd(map: Map): this;
-    onRemove(): this;
-    _getHeightMapCoords(x: number, y: number): any;
-    getHoursOfSun(x: number, y: number): number;
-    remove(): void;
-    readPixel(x: number, y: number): Uint8Array;
-    readPixels(x: number, y: number, width: number, height: number): Uint8Array;
-    _flush(): void;
-    _repositionCanvas(bounds: LatLngBounds): this;
-}