Reputation: 11
I need add custom icon/marker like this example https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ using Layers in mapbox gl. I found this example https://www.mapbox.com/mapbox-gl-js/example/add-image/. Can I make image rounded like in first example?
Upvotes: 0
Views: 701
Reputation: 715
The rounded edges are achieved in CSS not in the Javascript or in Mapbox GL at all.
.marker {
display: block;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
The crucial like is 'border-radius: 50%'. You need to ensure the class/Id of your div is properly referenced. If the image is not dynamic or singular it might be more appropriate to use a transparent PNG to achieve this rather than using client side resources.
Upvotes: 0