Mapbox Marker Style/CSS not working in angular 8 application

Question

I have looked at a few other posts on here and none of them have been able to help me fix my issue.

I am adding a marker to my map using the following code:

var el = document.createElement('div');
el.className = 'marker';

new mapboxgl.Marker(el)
   .setLngLat(Bounds)
   .setPopup(new mapboxgl.Popup({offset: 25}) // add popups
   .setHTML('<h3>' + 'test' + '</h3><p>' + 'add stuff here' + '</p>'))
   .addTo(map);

I know that my lat/longs are correct because as seen in the attached picture the div is correctly showing up for the 'marker' in the console and on the map. Something is being whacky with my css. I currently have a class in my angular component css file titled .marker and another one titled .mapboxgl-marker but neither seem to be working correctly.

Any help with this is greatly appreciated!

Why are there two )) at the end of setHTML? Is anything undefined? — roye7777777
Both of those are successfully paired to the right parentheses. Thanks for the thoughts, ended up figuring it out. answering question now. — 304techmaven

304techmaven 304techmaven · Accepted Answer · 2020-06-05T15:07:45

I ended up figuring it out. I had to add the code below when adding the Marker as a new mapboxgl.Marker(). This was the ONLY way I was able to access the CSS for the marker.

el.setAttribute('style', 'width: 30px; height: 30px; background-color: blue');

If anyone else was able to access a mapbox Marker's css another way please feel free to comment.

Mapbox Marker Style/CSS not working in angular 8 application

2 Answers