We have a little bit of a color show going on here
As promised in my last thread about showing a journey view in your app, here’s the thread for custom color map pins.
Recently I found a cool website that works perfectly in web view that would show an animated “journey” from 2 inputs: origin and destination.
Here’s how it works:
The link to the original page with all parameters:
https://www.mapchannels.com/RouteMaps.aspx
Here’s my Construct URL column to get the webview link:
[image]
For start & destination, it accepts both lat/lon & address in text form. Lat/lon must be enclosed with brackets e.g: (35.63, 40.28).
If you pass your Google API key insi…
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
https://daily-kittens-3680.glideapp.io/
Hope it helps!
15 Likes
Not a promise, but hopefully me and @Lucas_Pires can figure out something for custom pin SVGs soon!
4 Likes
Krivo
August 18, 2021, 10:13pm
4
Looking forward to have a look behind the scenes when I’m close to a computer again. Looks very promising
2 Likes
Excellent
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?
Jeje… I “tried to simulate one” but it’s a nightmare due to screen resolution and other factors.
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
bng95
October 15, 2021, 10:08pm
9
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?
bng95
October 16, 2021, 12:39pm
12
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.
bng95
October 17, 2021, 3:34am
14
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
bng95
October 17, 2021, 1:15pm
16
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
I would love to be able to do the same.
