Search code examples
javascriptazure-mapsthingworx

Azure Maps renders tile only in a corner

I'm using Azure Maps S0 in one of my side projects, and I'm trying to get it to render correctly. The example works fine, but I'm embedding the library as a widget in ThingWorx (side project).

Problem: The tile themselves render only in the upper left handside corner of my div, but the zoom control and the Microsoft logo render in the correct positions.

I can fix this if I resize the page: this action results in the tile occupying correctly all the div.

The constructor I'm using is this:

map = new atlas.Map(id, {
                center: [-118.270293, 34.039737],
                view: 'Auto',
                showFeedbackLink: false,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: redacted
                }
            });

I made sure that div it bounds to has the correct clientHeight (489) and clientWidth (960) before and after the constructor is initialized. I have tried calling map.resize after calling the constructor, but I've seen no change.

Looks like a bug, but I am not 100% sure. Any ideas why this is not behaving as I expect?

First load

Solution

  • If the page or map div is small and then grows to a larger size, its possible that the underlying HTML5 canvas/WebGL context isn't noticing the expansion (these generally do not grow automatically). If you know an expansion is going to occur, you can call map.resize() and it should recalculate the available area and modify the size of the canvas. The map does try and monitor this already but there isn't a great way to do this since there is no resize events on DOM elements in HTML/JavaScript.