Customizing Map Markers in New Glide Apps

[Himaladin]

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.

[ThinhDinh]

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

[Himaladin]

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

[Sekayi_Liburd]

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

[Himaladin]

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

[Sekayi_Liburd]

@Himaladin

/*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)); 
}

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.

[Himaladin]

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.

[Sekayi_Liburd]

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)); 
}

[Himaladin]

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.

[Sekayi_Liburd]

my countryflag:

this is on my mapbox component:

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.

[Sekayi_Liburd]

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.

[Himaladin]

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

[Sekayi_Liburd]

ok, thanks! It appears now.

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

[Himaladin]

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;
}

[Sekayi_Liburd]

perfect! thanks a million

[Himaladin]

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;
}

[Sekayi_Liburd]

Great! Thanks

[Michael_Stephenson]

Hi Himaladin-
I tried updating the map pin color by adding this to the custom CSS input field:

[title=“Not Yet Canvassed”] > svg > path { fill: #6253BE;}

It did not change the map pin color. Do I need to preface with some class name? Also is the whitespace important?

Also, in my instance of Glide all the CSS had to be input on one line. Is this how it always works?

Thanks!

[Himaladin]

@Michael_Stephenson

Do I need to preface with some class name? Also is the whitespace important?

Since you have a ‘Title’, you no longer need to use the class name. Spaces in the title enclosed in quotation marks are allowed, as long as they match the data contained in the title column of your map component. The data you have shown does not indicate any errors; it should work.

/*Map Marker - Color*/
[title="Not Yet Canvassed"] > svg > path {
fill: #BA55D3;
}

[Michael_Stephenson]

thanks for quick response-
So maybe I am missing the point entirely.
The actual column has a different name in the table.
‘Not Yet Canvassed’ that is one of the 3 or 4 data values that will appear in the column’s values.
What I want is something like.
“Not Yet Canvassed” will appear as blue dot
“Completed” as green dot
“Needs Followup” as yellow dot
etc
thanks!