I’m just updating what I used to post when we were still using Glide Classic Custom map marker icons.
Now, through more static CSS, we can still change the color and icon of the map marker. Of course, you have to subscribe to the Business/Enterprise plan to use this feature.
The selector from this CSS is related to the “Title” in your “Map configuration panel.” Therefore, you can still group or categorize the appearance of your markers.
1. Change the color of the map marker
/*Map Marker - Color*/
[title="Apple Store"] > svg > path {
fill: #6253BE;
}
[title="Samsung Store"] > svg > path {
fill: #BA55D3;
}
.mapboxgl-marker [title="Xiaomi Store"] > svg > path {
fill: #0065cb;
}
2. Change the map marker icon
/*Map Marker - Icon*/
.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}
[title="Apple Store"] > svg{
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/976px-Apple_logo_black.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
[title="Samsung Store"] > svg{
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Samsung_Logo.svg/1600px-Samsung_Logo.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
[title="Xiaomi Store"] > svg{
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Xiaomi_logo_%282021-%29.svg/220px-Xiaomi_logo_%282021-%29.svg.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
}
Adjust the selector to your own “title.”
Hope this helps.