CODEWITHSUNDEEP
javascriptmapbox-gl-js
user2987203
user2987203

Reputation: 11

Can I add custom icon to mapbox gl using Layers

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

Answers (1)

RedCrusador
RedCrusador

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

Related Questions