Bing Maps API - I cannot view marker image/text but i can view title

Question

I'm adding markers to my map after the event viewchangeend. Sometimes i can see my markers, other times i cant... i thought it might have been something to do with the map not fully rendered but when i added a title to my marker, i was able to see the title! i cannot see the red circle nor the marker's text.

I also tried to add a polyline to my marker layer just to make sure it is visible, and yes i can see the polyline too.

  addMapMarker(latitude: number, longitude: number, index: number): Microsoft.Maps.Pushpin
  {
    // Check if it is safe to add markers to the map (i.e if both map's height and width are > 0)
    // Otherwise start a timer to check when it is safe to add markers.
    if (this.isMapSafe())
    {
      const location = new Microsoft.Maps.Location(latitude, longitude);
      const pushPin = new Microsoft.Maps.Pushpin(location, {
        title: 'My Pin',
        text: 'lalala' + location.latitude + ' ' + location.longitude, 
        color:'red'
      });

      var center = this.map.getCenter();

        //Create array of locations
        var coords = [center, new Microsoft.Maps.Location(center.latitude + 1, center.longitude + 1)];

        //Create a polyline
        var line = new Microsoft.Maps.Polyline(coords, {
            strokeColor: 'red',
            strokeThickness: 3,
            strokeDashArray: [4, 4]
        });

      if ((pushPin) &&
          (this.mapMarkerLayer))
      {
        this.mapMarkerLayer.add(line);
        this.mapMarkerLayer.add(pushPin);
      }

      return pushPin;
    }
    else
    {
      this.restartTimerToAddMarkers();
      return null;
    }
  }

Am I doing something wrong? Is there a reason why this happens and how can i fix it? Thank you in advance!

Answer 1

I'm not able to reproduce this. Here is the code block I used to test:

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});

var layer = new Microsoft.Maps.Layer();
map.layers.insert(layer);

Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () {	
      const pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {
        title: 'My Pin',
        text: 'lalala' + location.latitude + ' ' + location.longitude, 
        color:'red'
      });
	  layer.add(pushpin);
});

Although I was surprised it worked as that title is very long. Here is a screenshot.