CODEWITHSUNDEEP
angularmapbox-gl
cpeddie
cpeddie

Reputation: 799

Can't display custom marker icon in ngx-mapbox-gl angular

I'm trying to display a custom marker icon in a mapboxgl map in my angular app. I've done pretty much everything shown in the examples down to the letter but can't get a custom icon to display. If I just create a normal marker, it displays on the map fine. But when I try and specify my custom icon nothing displays. I know its picking up my css because if I change the pathname to a non-existent file it throw an error. I look thru the marker object created and the the map when I log them to the console and I see the marker as part of the map. But the icon does not display. What is the best way to try and debug this? I can't see anything obvious that I've done wrong since I copied the published examples.

    var el = document.createElement('div');
    el.className = 'breadcrumb';
    console.log('el=', el);

    var marker = new Marker(el)

      .setLngLat( [this.staticBreadcrumbs.features[0].geometry.coordinates[0],
               this.staticBreadcrumbs.features[0].geometry.coordinates[1]] )
      .setPopup(new Popup({ offset: 25 }) // add popups
      .setHTML('<h3>' + '</h3><p>' + 'hello marker' + '</p>'))
      .addTo(this._mapRef);


    console.log('adding static marker ', marker);
    console.log('map=', this._mapRef);

css:

.breadcrumb {
  background-image: url('breadcrumb-50px.png');
  width: 50px;
  height: 50px;
  z-index:999;
}

Upvotes: 0

Views: 1225

Answers (1)

cpeddie
cpeddie

Reputation: 799

Key to geting it working was removing background image from css and adding it to code. 

  el.style.backgroundImage = 'url("/assets/breadcrumb-5px.png")';
  el.style.width = '5px';
  el.style.height = '5px';

All 3 things were required- the quoting around the path since the url is a local file, and the height and width were both required to make the icon display.

Upvotes: 2

Related Questions