Bing map marker image not showing when use external image link

Jagadeesh Elumalai 0 Reputation points
2024-01-29T09:07:31.2+00:00

We set the external image link ('https://flagpedia.net/data/flags/normal/fr.png') as the image source, and the cross-origin is set to anonymous. When the image onload event is triggered, at this point, we create a pushpin and add the pushpin to map entities. However, upon checking the Bing Map in the browser, we observe that the marker image is not updated. Additionally, when inspecting the network tab, we find that a CORS exception is thrown.

One more thing to note is that the marker image is updated if it is a base64-encoded image; otherwise, it does not update. Furthermore, if we do not add the pushpin to map entities when the image.onload event is triggered, everything works fine.
User's image

I have attached the code snippet for your reference.

<!DOCTYPE html>
<html>
<head>
    <title>customizeclusteredpushpinsHTML</title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    <style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
    <script src="data.js"></script>
</head>
<body>
     <div id='printoutPanel'></div>  
     <div id='myMap' style='width: 100vw; height: 100vh;'></div>
     <script type='text/javascript'>
            var map;
            function loadMapScenario() {
             map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                 credentials: "<key>",
                 zoom: 3
             });
            function handlePushPin(pushPin, loc) {
                pin = new Microsoft.Maps.Pushpin(loc, pushPin);
                map.entities.push(pin);
            }
            // Set the callback function
            var callback = handlePushPin;
             for (var i = 0; i < 10000; i += 500) {
                 var pushpin;
                 var loc = new Microsoft.Maps.Location(parseFloat(worldcitiespop[i].Latitude), parseFloat(worldcitiespop[i].Longitude));
                
                let imageUrl = "https://flagpedia.net/data/flags/normal/fr.png"; // Replace this with your own image URL
                let size = 50; // Set your desired size
                let img = new Image();
                img.onload = function () {
                    let c = document.createElement('canvas');
                    c.width = size;
                    c.height = size;

                    let context = c.getContext('2d');

                    if (context) {
                        // Draw the image onto the canvas
                        context.drawImage(img, 0, 0, c.width, c.height);

                        // Create a Microsoft Maps Pushpin with a custom icon generated from the canvas
                        pushPin = {
                            icon: c.toDataURL(), // Generate a base64 image URL from the canvas
                            anchor: new Microsoft.Maps.Point(c.width / 2, c.height / 2) // Anchor based on the center of the image
                        };

                        // Handle the pushpin as needed (e.g., set metadata or invoke callback)
                        if (callback) {
                            callback(pushPin, loc);
                        }
                    }
                };
                img.crossOrigin = 'anonymous';
                img.src = imageUrl;
             }
         }
     </script>
     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?branch=experimental&key=YourBingMapsKey&callback=loadMapScenario' async defer></script>
</body>
</html>

Why isn't the Bing Map marker image updating, despite setting the external image link and using anonymous cross-origin ? do we have an option to resolve the issue ?

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
592 questions
Windows Maps
Windows Maps
A Microsoft app that provides voice navigation and turn-by-turn driving, transit, and walking directions.
245 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. rbrundritt 15,311 Reputation points Microsoft Employee
    2024-01-30T23:09:43.3866667+00:00

    Digging into this, it appears the servers hosting the images do not allow cross domain access and is missing the CORs header on that end. If you look at the network tab you will see that the image fails to download.

    There are a couple of solutions:

    • If you have access to the server hosting the image, you can update the settings on the server to allow cross domain access and include the correct headers. Alternatively, host your code on the same server so there is no cross domain.
    • If you don't have access to the hosting server, you can download all the images ahead of time and host them with your app so there is no cross domain issue, or you can create a proxy server that downloads the images on the fly and re-serves them with a CORs header.
    3 people found this answer helpful.