1

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

Katakana
  • 73
  • 5

1 Answers1

1

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.

rbrundritt
  • 16,570
  • 2
  • 21
  • 46
  • thanks rbrunditt. I also thought about the pesky canvas and tried to do map.resize() after constructor, but it did not seem to solve it. I''ll add the call somewhere it's guaranteed to execute way later and I'll update this thread. – Katakana Jun 05 '20 at 19:28
  • Solved it. It was a dummy mistake, related to my logging, indeed the object was having 0 widht and height. When checking the div characteristics, I logged the entire object to the console, which is not a snapshot, but instead a reference which gets updated when you expand the object. Look at the Logging objects section in this article https://developer.mozilla.org/en-US/docs/Web/API/Console/log. – Katakana Jun 06 '20 at 08:41
  • The actual solution is to implement the resize function in your runtime.js and call the map.resize there. Because of the use of canvas context we can't rely on CSS doing this for us. – Katakana Jun 06 '20 at 08:44