# Customizing Map Markers in New Glide Apps

**URL:** <https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540>\
**Category:** Community Resources\
**Created:** [February 6, 2024, 3:48am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540 "2024-02-06T03:48:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 6, 2024, 3:48am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/1 "2024-02-06T03:48:01Z")

</div>

I’m just updating what I used to post when we were still using Glide Classic [Custom map marker icons](https://community.glideapps.com/t/custom-map-marker-icons/38030).  
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.

 ![Screenshot 2024-02-06 at 10.07.39](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/a/eab3ffad35154afd5a19eaef9d560c0b7256aae8.png)

**1. Change the color of the map marker**

 ![Screenshot 2024-02-06 at 09.51.02](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/0/b049cd398f854a808e9581b9ecbaa0f81dd7e0fa.jpeg)

```auto
/*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**

 ![Screenshot 2024-02-06 at 10.06.24](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d14ac2d353fae9b4f6fbf188c79bb8f6a6550aa4.jpeg)

```auto
/*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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 6, 2024, 3:55am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/2 "2024-02-06T03:55:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 6, 2024, 3:59am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/3 "2024-02-06T03:59:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 6:16am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/4 "2024-05-08T06:16:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 8, 2024, 7:11am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/5 "2024-05-08T07:11:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 7:15am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/6 "2024-05-08T07:15:14Z")

</div>

> [@Himaladin](#):
>
> ```auto
> /*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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 8, 2024, 7:27am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/7 "2024-05-08T07:27:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 7:41am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/8 "2024-05-08T07:41:30Z")

</div>

I think I did it like that…

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

```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 8, 2024, 7:49am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/9 "2024-05-08T07:49:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 7:54am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/10 "2024-05-08T07:54:52Z")

</div>

my countryflag:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/2/c2aaefe2146015cf967f1dc6aaf3393db5472464.png)

this is on my mapbox component:  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/81cf8914565ae3dee064fb3d6678ef949fedca4a.png)

and the code in my appearance settings:

```auto
/*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.

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 7:58am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/11 "2024-05-08T07:58:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 8, 2024, 8:00am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/12 "2024-05-08T08:00:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 8:05am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/13 "2024-05-08T08:05:03Z")

</div>

ok, thanks! It appears now.

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

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 8, 2024, 8:21am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/14 "2024-05-08T08:21:54Z")

</div>

Yes you can:

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 8, 2024, 8:23am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/15 "2024-05-08T08:23:44Z")

</div>

perfect! thanks a million 🤗

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 9, 2024, 2:32am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/16 "2024-05-09T02:32:56Z")

</div>

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.

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [May 9, 2024, 2:46am UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/17 "2024-05-09T02:46:47Z")

</div>

Great! Thanks

---

<div class="post-metadata">

**Author:** ![Michael\_Stephenson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/michael_stephenson/32/62365_2.png) [@Michael\_Stephenson](https://community.glideapps.com/u/Michael_Stephenson)\
**Post date:** [August 26, 2024, 6:34pm UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/18 "2024-08-26T18:34:39Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [August 26, 2024, 9:11pm UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/19 "2024-08-26T21:11:59Z")

</div>

> [@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.

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

```

 ![Screenshot 2024-08-27 at 04.19.14](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/6/66c03e8dd9fb655e7c9b242babe260bbb7cee0c2.png)  
 ![Screenshot 2024-08-27 at 04.18.57](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/0/d01af552d33d5f0d0d4134d88cc25d38edfebbf7.png)

---

<div class="post-metadata">

**Author:** ![Michael\_Stephenson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/michael_stephenson/32/62365_2.png) [@Michael\_Stephenson](https://community.glideapps.com/u/Michael_Stephenson)\
**Post date:** [August 26, 2024, 9:38pm UTC](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540/20 "2024-08-26T21:38:23Z")

</div>

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!

[Next page](https://community.glideapps.com/t/customizing-map-markers-in-new-glide-apps/70540.md?page=2)