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

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!