CSS: Custom color for map pins

We have a little bit of a color show going on here :wink:

As promised in my last thread about showing a journey view in your app, here’s the thread for custom color map pins.

Requirements

  • A tab with details view
  • You know what status you can have, what color should they be
  • You know what field you will use as the title of the pin

The columns

Single code: A template column to get each line’s customized CSS, with dynamic info for the pins’ title and color code.

Joined code: A joined list column that joins all single codes by a new line character.

Final code: A template column that puts the final touch - the tags to the CSS.

Choice color code: An additional gift to color code the choice components inside the details view.

The demo

The copyable app

Hope it helps!

13 Likes

Not a promise, but hopefully me and @Lucas_Pires can figure out something for custom pin SVGs soon!

4 Likes

Or even @Krivo can help

1 Like

Looking forward to have a look behind the scenes when I’m close to a computer again. Looks very promising :+1:

2 Likes

Excellent :trophy:

Is the map able to show a tooltip when a user clicks on any map pin?

Gracias @ThinhDinh

1 Like

Isn’t that something you did before for a showcase here? :wink: I would love to be able to do the same.

Jeje… I “tried to simulate one” but it’s a nightmare due to screen resolution and other factors. :woozy_face:

With some time I will try your new idea and let you know what I can get.

Gracias Thind

1 Like

this is something that I look for a long time! Thank you for sharing @ThinhDinh

I hope that changing the pin color/icon will be implemented as native glide setting later on. This will definitely increase the usability of map data

Looking forward for more great learning from you.

1 Like

This code looks great. I have tried to use it, but I have been unsuccesful. Are there any issues with using this code and being on a private basic plan?

No, that should work on all plans. How are you setting yours? Can we have some screenshots?

Is just publishing the link ok or do you only want screenshots? I thought just sending you the sheet would be better.

Either screenshots or making the app copyable will do it for me. I can’t know how you’re testing it without see the underlying setup. Thank you.

OK. I enabled the appy copy.

You have to add the rich text component that points to your “final code” column, and make sure the title in the inline list matches the title you use for the code (Geo Address).

You can copy this back and let me know once you have done so.

1 Like

Copied and thank you again for the help. You are a life-saver.

1 Like

@ThinhDinh Did this break? A client of mine was asking me to implement it but it (and your copiable demo) doesn’t seem to generate the different colors anymore?

1 Like

Seems to work for me and I have it implemented into a side project as of couple of weeks ago. So far it still works. Only tested on chrome on windows and android, so I couldn’t say if it works for apple/safari.

1 Like

Ya know take back what I said. It works. I had the wrong column mapped for the title.

2 Likes

Doesn’t work for me

I made title as address, my address in INine list must be cordinates