Map not rendering shadows

[ndroo]

Hi there, love the product - looking to integrate it into a tool for Realtors.

I've followed the instructions for nodejs but experiencing a issue with the map and not getting much error output so i'm uncertain what is wrong.

Here's the result (looking at Toronto Canada)

Things i've confirmed:

• I've set the matchPitch to 45 (it initially is set to 0 when starting the map)

const sm = new ShadeMap({
                    date: new Date(),    // display shadows for current date
                    color: '#01112f',    // shade color
                    opacity: 1,        // opacity of shade color
                    apiKey: "<<REMOVED>>",    // obtain from https://shademap.app/about/
                    terrainSource: {
                        tileSize: 256,       // DEM tile size
                        maxZoom: 15,         // Maximum zoom of DEM tile set
                        getSourceUrl: ({ x, y, z }) => {
                            // return DEM tile url for given x,y,z coordinates
                            return `https://s3.amazonaws.com/elevation-tiles-prod/terrarium/${z}/${x}/${y}.png`
                        },
                        getElevation: ({ r, g, b, a }) => {
                            // return elevation in meters for a given DEM tile pixel
                            return (r * 256 + g + b / 256) - 32768
                        }
                    },
                    debug: (msg) => { console.log(new Date().toISOString(), msg) },
                }).addTo(window.map);

Any pointers?

Thanks again!

[ted-piotrowski]

Hi Andrew. Sorry about the troubles. Your configuration looks correct but I do see some possible issues.

You mentioned not much error output. Is there anything in the developer tools console that might be relevant?

You're using node.js to import the shadow simulator and I see that you are adding it to window.map. Is window.map an instance of mapbox.gl? Could you console.log(window.map) right before you initialize shademap and make sure it has been initialized?

The more code you can share the better I'll be able to locate where the issue might lie.

[ted-piotrowski]

Just had another thought this evening that maybe Toronto is flat so there is no terrain shadows midday. There is a section in the README that explains how to query building data from the mapbox vector tiles. (Note: building data is only embedded in vector tiles for zoom levels 15 and above)

[ndroo]

Hey Ted, sorry for the slow reply.

Turned out to be something really stupid - I forgot to include the "getFeatures" element of...

getFeatures: async () => { await mapLoaded(window.map); const buildingData = window.map.querySourceFeatures('composite', { sourceLayer: 'building' }).filter((feature) => { return feature.properties && feature.properties.underground !== "true" && (feature.properties.height || feature.properties.render_height) }); return buildingData; },

Instantly worked once it was added.

[ndroo]

On the window.map thing, thats a hack because of some earlier bad design choices in my app. It's going to be a fun refactor :)