Customizing Map Markers in New Glide Apps

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.

10 Likes

The only problem with this is the code’s static and you have to manually add more if you have a growing list.

2 Likes

Yeah, ThinhDinh, this is what we can do with the existing structure. Thanks!

can I use an image that’s on my home screen for all the icons instead of the urls?

Yes, it’s perfectly fine. The image is also free from Wikipedia sources.

1 Like

Great! How do I edit this to change it from picking up the URL to picking up my image? I tried using the glide url that was generated after I uploaded the picture but it didn’t seem to work.

  1. Have you changed the title according to the title in your map?
  2. Make sure the URL is inside parentheses and enclosed in quotation marks.

I think I did it like that…

/*Map Marker - Icon*/
.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}
[title="countryflag"] > svg{
  background: url('https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/lU54D3jXlsFBa6oqOQE0.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 
}

What is contained in your “countryflag”? That’s what is written in your CSS code one by one.
Also, I noticed your quotation marks are different; this is usually a common mistake on iPhone.

my countryflag:
image

this is on my mapbox component:
image

and the code in my appearance settings:

/*Map Marker - Icon*/
.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}
[title="countryflag"] > svg{
  background: url('https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/ov2nF5ayQc4wK5jVvF4R/pub/lU54D3jXlsFBa6oqOQE0.png') center/contain no-repeat;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); 
}

I re-did the quotations… not sure why they were weird since i’m android.

I just noticed that the showcased URL ended in .svg.png
does that factor into why mine isn’t appearing?

The original icon disappears from the map but mine doesn’t show up.

The title in question is like “Company” in the image I mentioned above. Here, it doesn’t require a class name.

1 Like

ok, thanks! It appears now.

Instead of typing in a name, can I target all the businesses and use the same icon?

Yes you can:

.mapboxgl-marker {
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;

}
.mapboxgl-marker > div > svg > path, .mapboxgl-marker > div > svg > circle {
display: none;
}
3 Likes

perfect! thanks a million :hugs:

1 Like

Additionally, if you have another map and want to isolate its effects from other maps, you can add a class name and place it at the beginning of each selector.

.className .mapboxgl-marker {
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;
}

.className .mapboxgl-marker > div > svg > path, .className .mapboxgl-marker > div > svg > circle {
display: none;
}
2 Likes

Great! Thanks

1 Like