Custom markers only display on Safari

Maps SDK for Web (JavaScript)
#1

I’m having an issue with custom markers only displaying on Safari. I can open developer tools in firefox or chrome and see where the marker image is found, but it does not display on the map. Here’s my code.

let element = document.createElement('div')
                            element.className = 'marker'
                            element.style.backgroundSize = '20px'
                            element.style.backgroundRepeat = 'no-repeat'
                            element.style.backgroundPosition = 'center'
                            element.style.visibility = 'visible'
                        
                            if(value.isActive == 'disconnected'){
                                element.style.backgroundImage = 'url(/img/red_dot.png)'
                            }

                        let popupdiv = document.createElement('div')
                            popupdiv.innerHTML = value.siteName

                        let popup = new tt.Popup({
                            closeButton: false,
                            offset: 30,
                            anchor: 'bottom'
                        }).setDOMContent(popupdiv)

                       
                       var marker = new tt.Marker({element: element})
                       // var marker = new tt.Marker()
				            .setLngLat([value.longitude, value.latitude])
                            .setPopup(popup)
				            .addTo(map)

and the relevant css

.marker {
background-image: url(‘/img/green_dot.png’);
background-size: cover;
}

Any thoughts?

#2

When inspecting the marker - does it have css properties applied? Can you open the image in a new tab?

#3

I can open the image in a new tab. The background-size property is not being loaded, but that’s probably because I’m overwriting it in my js. When inspecting from the debug tools, it does show that the marker class is added to the div right before the mapbox-g1-marker class.

#4

Thanks for pointing me in the right direction. Because of your response, I started digging a little more and noticed that while safari was displaying it correctly, for some reason other browsers were giving the marker div 0x0 size. I gave it an explicit width and height in my css and it is now displaying correctly.

1 Like