ted-piotrowski/mapbox-gl-shadow-simulator

Request: allow users to render shadows of buildings outside of viewport

Opened this issue · 3 comments

bruesba commented

Hi @ted-piotrowski,

Shadows seem to be rendered based on the buildings within the viewport. Would it be possible to add an option to initialise the layer with a buffer in which shadows should be rendered - outside of the viewport?

Here are the shadows of a building while the map is fairly zoomed in
image

And here they are when the map is more zoomed out. Far more shadows seem to be rendered (shadows of buildings at the edge of the map).
image

ted-piotrowski commented

You can override the default getSize() function (which uses the dimensions of the visible map by default). width and height are the pixel dimensions of the area to consider. Caveat: the larger the area off screen the slower the performance.

new ShadeMap({
...
    getSize: () => {
        return {
            width: window.innerWidth, height: 200
        }
    },
...
}

You will also need to make sure that this.maplibreMap.querySourceFeatures('pand_geometry', { sourceLayer: 'pand_geometry' }) returns buildings off screen or you will need to redefine getFeatures() to also return the buildings off screen.

  • 👍1
bruesba commented

Hi Ted,

I'm reopening this issue because I'm getting the following error with your implementation: "Object literal may only specify known properties, and 'getSize' does not exist in type 'ShadeMapOptions'.ts(2353)". ShadeMap is imported the following way: import ShadeMap from 'mapbox-gl-shadow-simulator';

I'm on v0.42.0, using Maplibre. Am I doing something wrong?

ted-piotrowski commented

Hi,

You are not doing anything wrong. Even though the option exists I did not update the Typescript definition so that's why typescript was complaining. A quick hack to get around this next time is to turn off typechecking on the ShadeMap object:

new ShadeMap({
...
    getSize: () => {
        return {
            width: window.innerWidth, height: 200
        }
    },
...
} as any)  // disable type checking

But the good news is, the type definition is updated and if you update to 0.54.4, the error should disappear. I also recommend updating because it version 0.54.4 contains fixes for Safari 17.4 on MacOS (released two weeks ago). Previous versions of mapbox-gl-shadow-simulator do not work with Safari 17.4 on MacOS.

Let me know if I can close out this issue. Cheers.

  • 😄1