# CSS: Custom color for map pins **URL:** https://community.glideapps.com/t/css-custom-color-for-map-pins/30641 **Category:** Ask for Help **Created:** [August 18, 2021, 1:49pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641 "2021-08-18T13:49:18Z") **Posts on this page:** 20 **Page:** 1
### 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: [August 18, 2021, 1:49pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/1 "2021-08-18T13:49:19Z")
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. > [@Show cool Google Maps/Streets journey view in your app](https://community.glideapps.com/t/show-cool-google-maps-streets-journey-view-in-your-app/30502/): > > 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](https://www.mapchannels.com/RouteMaps.aspx) Hereā€™s my Construct URL column to get the webview link: 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ā€¦ ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/8/e81fdc6a3b07bcaaa1895aaae4430771c52a1cd8.jpeg) ### 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 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/51e3261d0ec887029e0b129cad6b355bfc9ced41.png) **Single code:** A template column to get each lineā€™s customized CSS, with dynamic info for the pinsā€™ title and color code. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1792b3e9698430126e9a68238670e2a0cbf2c06.png) **Joined code:** A joined list column that joins all single codes by a new line character. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/6/d6da66d09ccdf189271e93538fe3bde795967ab4.png) **Final code:** A template column that puts the final touch - the tags to the CSS. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/7/c757739288295b4cdd77e5fd3fe691c3d3b2c8d3.png) **Choice color code:** An additional gift to color code the choice components inside the details view. ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/6/f67a9bad5ff6d0d0687031144f3a0c7ee02c0db6.png) ### The demo ### The copyable app [https://daily-kittens-3680.glideapp.io/](https://daily-kittens-3680.glideapp.io/) Hope it helps! ---
### 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: [August 18, 2021, 1:51pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/2 "2021-08-18T13:51:21Z")
Not a promise, but hopefully me and @Lucas_Pires can figure out something for custom pin SVGs soon! ---
### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires) #### Post date: [August 18, 2021, 1:55pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/3 "2021-08-18T13:55:35Z")
Or even @Krivo can help > [@Enhanced map with text and icons - now: including template](https://community.glideapps.com/t/enhanced-map-with-text-and-icons-now-including-template/29951): > > url: [https://mapandlist.glideapp.io/](https://mapandlist.glideapp.io/) Been doing some testing on an enhanced map. This is just a workaround until we get native enhanced map with text and icons. @mark could be cool to have a bit more functionality on the maps where we could get something like an inline list in the same view as the map - along with text and icons for the different places. The app uses the mapbox api - just like map component in Glide - but with more places on the same map. Let me know ifā€¦ ---
### Author: ![Krivo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/krivo/32/5363_2.png) [@Krivo](https://community.glideapps.com/u/Krivo) #### Post date: [August 18, 2021, 10:13pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/4 "2021-08-18T22:13:21Z")
Looking forward to have a look behind the scenes when Iā€™m close to a computer again. Looks very promising šŸ‘ ---
### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero) #### Post date: [August 19, 2021, 12:10am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/5 "2021-08-19T00:10:29Z")
Excellent šŸ† Is the map able to show a tooltip when a user clicks on any map pin? Gracias @ThinhDinh ---
### 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: [August 19, 2021, 12:47am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/6 "2021-08-19T00:47:05Z")
Isnā€™t that something you did before for a showcase here? šŸ˜‰ I would love to be able to do the same. ---
### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero) #### Post date: [August 19, 2021, 12:52pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/7 "2021-08-19T12:52:47Z")
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 ---
### Author: ![Cokorda](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/cokorda/32/27735_2.png) [@Cokorda](https://community.glideapps.com/u/Cokorda) #### Post date: [August 23, 2021, 5:00am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/8 "2021-08-23T05:00:25Z")
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. ---
### Author: ![bng95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bng95/32/15144_2.png) [@bng95](https://community.glideapps.com/u/bng95) #### Post date: [October 15, 2021, 10:08pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/9 "2021-10-15T22:08:50Z")
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? ---
### 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: [October 15, 2021, 11:10pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/10 "2021-10-15T23:10:51Z")
No, that should work on all plans. How are you setting yours? Can we have some screenshots? ---
### Author: ![bng95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bng95/32/15144_2.png) [@bng95](https://community.glideapps.com/u/bng95) #### Post date: [October 16, 2021, 1:54am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/11 "2021-10-16T01:54:21Z")
> **[Estimate Test App](https://solitary-pocket-8748.glideapp.io/)** ---
### Author: ![bng95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bng95/32/15144_2.png) [@bng95](https://community.glideapps.com/u/bng95) #### Post date: [October 16, 2021, 12:39pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/12 "2021-10-16T12:39:46Z")
Is just publishing the link ok or do you only want screenshots? I thought just sending you the sheet would be better. ---
### 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: [October 16, 2021, 11:29pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/13 "2021-10-16T23:29:34Z")
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. ---
### Author: ![bng95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bng95/32/15144_2.png) [@bng95](https://community.glideapps.com/u/bng95) #### Post date: [October 17, 2021, 3:34am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/14 "2021-10-17T03:34:11Z")
OK. I enabled the appy copy. ---
### 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: [October 17, 2021, 8:44am UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/15 "2021-10-17T08:44:10Z")
![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/c/6c877712924214d8681ba39319c59628bdcf658b.jpeg) 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). > **[Estimate Test App](https://minor-party-5191.glideapp.io/)** You can copy this back and let me know once you have done so. ---
### Author: ![bng95](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bng95/32/15144_2.png) [@bng95](https://community.glideapps.com/u/bng95) #### Post date: [October 17, 2021, 1:15pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/16 "2021-10-17T13:15:51Z")
Copied and thank you again for the help. You are a life-saver. ---
### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto) #### Post date: [November 8, 2021, 8:44pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/17 "2021-11-08T20:44:44Z")
@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? ---
### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager) #### Post date: [November 8, 2021, 8:56pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/18 "2021-11-08T20:56:25Z")
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. ---
### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto) #### Post date: [November 8, 2021, 10:04pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/19 "2021-11-08T22:04:58Z")
Ya know take back what I said. It works. I had the wrong column mapped for the title. ---
### Author: ![Gideon\_Lahav\_Busines](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gideon_lahav_busines/32/41121_2.png) [@Gideon\_Lahav\_Busines](https://community.glideapps.com/u/Gideon_Lahav_Busines) #### Post date: [March 2, 2022, 9:18pm UTC](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641/20 "2022-03-02T21:18:05Z")
Doesnā€™t work for me I made title as address, my address in INine list must be cordinates [Next page](https://community.glideapps.com/t/css-custom-color-for-map-pins/30641.md?page=2)