Bing Maps Api V8 - Pushpin Svg Uri Image

I'm trying to build a custom bing maps v8 API pushpin combining text and a small uri data image, but I get an 'Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasR

Solution 1:

I came across the same issue. It happens because it tries to draw pushpin icons with unloaded images.

The general idea is to preload images in JS code before using it in pushpin icons.

I solved it by this way:

1. I preload images to array
2. I used canvas instead of 'svg'

var imageArray = [];
var imagesFiles = ['home_16.png', 'home_16_done.png', 'not existing.png'];

    functionpreLoadImages(callback) {

        var filesCount = imagesFiles.length;
        for (var i = 0; i < imagesFiles.length; i++) {
           var imageObj = newImage();
           imageObj.src = '/images/' + imagesFiles[i];
           imageObj.name = imagesFiles[i];
           imageObj.onload = (function (img) {
            imageArray.push({ name: img.target.name, object: img.target });

            filesCount--;

            if (filesCount === 0) {
               if (callback)
                    callback(imageArray);
            }});

           imageObj.onerror = function () { //even image is not loaded

              filesCount--;
              if (filesCount === 0) {
                 if (callback)
                     callback(imageArray);
               }};
            }
     }


         ....

        pushpin = newMicrosoft.Maps.Pushpin(location,
        { icon: createCanvasContent(imageArray[i], parameters[])
        .....

        functioncreateCanvasContent(img, parameters){

          var c = document.createElement('canvas');
          c.width = img.width + 2;
          c.height = img.height + 2;

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

          context.fillStyle = bgrcolor;
          context.fillRect(0, 0, 18, 18);
          c.style.opacity = '0.8';
          //Draw image
          context.drawImage(img, 1, 0, c.width - 2, c.height - 2);

          return c.toDataURL();
        }

You can use all features from canvas tag like

context.textAlign = "center";
context.strokeText(text, x, y);
context.fillStyle = 'white';
context.fillText(text, x, y);