Currently using CSS to make the pins orange, however we now want to make the pins red if the customer has a deal there, and green if they don’t (ie it’s just a boolean, so the color would change based off that boolean). Is there any way to do this on the same map using the map component in Glide?

/Map Marker - Color/ [title*=“ACTIVE”] > svg > path { fill: #00C853; } [title*=“INACTIVE”] > svg > path { fill: #FF1744; } ended up going with this, very simple and works perfectly fine, obviously adjust active and inactive to whatever you’re filtering by in your title!

I would refer you to the Map expert :joy: @Jeff_Hager

For the CSS part, this might also be useful [image] artist_palette CSS Hack: Role-Based App Themes Community Resources Here’s a simple dynamic CSS trick to make your Glide app’s theme automatically change based on user roles — like admin, member, vip or banned. By declaring global CSS variables and using the :is() selector to shorten rules — together with :has() for data-driven conditions — you can keep your CSS clean, dynamic, and highly scalable. [ScreenRecording2025-11-01112758-ezgif.com-video-to-gif-converter] globe_showing_americas 1. Global Variable Declaration Define role-based color variables that …

When working with maps, targeting individual pins via the Rich Text component is difficult. The most practical solution is still to rely on the title attribute , but you need to be cautious with translators since they can modify the title text. [image] Customizing Map Markers in New Glide Apps Community Resources 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. [Screenshot 2024-02-06 at 10.07.39] 1. Change the colo…

[image]Customizing Map Markers in New Glide Apps /*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; } It’s better not to add an asterisk to your title attribute, in order to avoid affecting other elements that may have the same attribute. Alternatively, you can add a custom class in front of it to specifically target and ensure it only applies to the map.

Forgot about the custom class, need the * cause I needed to include other info that’s not consistent in the title. Thanks!

How to show two different color pins on a map

Ask for Help

MaximeBaker January 16, 2026, 1:19pm 3

For the CSS part, this might also be useful

Topic		Replies	Views
How to Show Colored Map Pins in Glide Using Coordinates? Ask for Help	4	116	May 5, 2026
Different color map pins by filter Feature Requests	14	997	March 6, 2024
Custom map pin colors in latest version of Glide (4.16.0) Ask for Help	2	161	August 21, 2024
Custom color map pin Ask for Help	4	490	September 16, 2023
Different colored map pins? Ask for Help	6	478	March 7, 2023

How to show two different color pins on a map

Related topics