Pushpins not rendered properly in Safari (Mac book)

[sasi210891]

Sample code is not working fine in safari(Mac Book), push pins are rendering improperly in image.

[sasi210891]

issue is with canvas which holds the pushpin labels, in Safari (using Mac Book) the canvas width and height properties are set to double compared to the actual width and height. In my solution I have applied a patch to solve the issue. Hope this will be resolved in next release.

[rbrundritt]

Which version of safari are you using. We haven't had any other user experience this issue so need to get some details.

[sasi210891]

Safari version 11.

in my investigation I found that pushpin canvas html element is having width and height attributes which are exactly double with the same element css properties which are given in style attribute.

Please find the below screenshots of actual map and image result.

[rbrundritt]

I’ll log a bug to have the team investigate, but haven’t had anyone else experience this.

[rbrundritt]

Wait, is this only with the generated image in the export image sample, or is it with pushpins in the interactive map control?

[sasi210891]

this is the issue with image generation. there is no issue with map rendering.

[rbrundritt]

Ok, that makes sense then. This is an experimental code sample (thus the category it is in), so may not work in all scenarios. I'm not able to reproduce this on my side but suspect the issue is that you are using a high resolution screen which the map control is handling by scaling a larger canvas down. I'll see if I can make an update today to this sample for you to try.

[sasi210891]

I made a small change in MapImageModuleGenerator.js. This is not the permanent fix for the issue, but it is working fine with safari in mac and other browsers in windows.

var lastElement = canvases.length - 1;
for (var i = 0; i < canvases.length; i++) {
                var c = canvases[i];
                if (i == lastElement) {
                    var width = mapCanvas.width;
                    var height = mapCanvas.height
                    var offSetLeft = c.offsetLeft * -1;
                    var offsetTop = c.offsetTop * -1;
                    if (c.width != $('#labelCanvasId').width() && c.height != $('#labelCanvasId').height()) {
                        offSetLeft = offSetLeft * 2;
                        offsetTop = offsetTop * 2;
                        width = mapCanvas.width * 2;
                        height = mapCanvas.height * 2;
                    }

                    ctx.drawImage(c, offSetLeft, offsetTop, width, height, 0, 0, mapCanvas.width, mapCanvas.height);
                }
                else
                    ctx.drawImage(c, 0, 0, mapCanvas.width, mapCanvas.height, 0, 0, mapCanvas.width, mapCanvas.height);
            }

[rbrundritt]

Actually, that's not too far off what I had in mind as a solution.

[sasi210891]

that is not actual solution. I made this change to just make it work in our application. Actual issue is with attributes in pushpin canvas. after comparing from Chrome(Windows) to Safari(Mac), I have seen a small difference like `

in windows <canvas id="labelCanvasId" width="1300" height="460" style="widht:1300px;height:460px"></canvas>

in Mac <canvas id="labelCanvasId" width="2600" height="920" style="widht:1300px;height:460px"></canvas>

if I try to make changes for canvas width and height attributes to match with styles, total pushpins are not visible on screen. after some trails I tried with rendering label canvas to fit with the actual map canvas. Code in above comment is just a patch.

[rbrundritt]

Not sure your samples appeared correctly in your last post. For windows I just see ``` and the mac sample appears to have typo "width" instead of "width" unless that's the actual issue.

[rbrundritt]

I've made an update to the sample (code not checked in yet). Can you try here and let me know if it is rendering correctly for you. http://bingmapsv8samples.azurewebsites.net/#Map%20Image%20Generator The difference in canvas width compared to style width is by design in the map control for safari in Mac. This is done to handle the retina display resolution.

[sasi210891]

Yes.. in Mac the canvas is loading with attributes having double the value of actual values refered in style. We don't have control on this canvas attribute values.

[sasi210891]

Sure.. I will test it tomorrow and will keep you posted with the latest update.

[rbrundritt]

Is that sample rendering correctly for you in Safari when you press the Load in div button?

[rbrundritt]

ok, thanks. Sent my last post before yours displayed.

[sasi210891]

I tried with loading in div and download image options. Both are giving same results.

[sasi210891]

I will test the latest one tomorrow.

[sasi210891]

sample in the link shared is working fine in Safari(Mac)

[rbrundritt]

Great, thanks for confirming. The updated code is checked in. The solution I implemented is similar to what you used as a workaround, but a bit more robust.