Custom map marker icons

Project Showcase
1

Continuing what @ThinhDinh started about customizing the pin color of the map with CSS. I’m trying to add using a custom marker that can be changed according to a company’s logo to display the location spread of its store/branch office on a map.
Hopefully what is shared is useful for those who need it.

Capture
Capture790×1679 190 KB 

div[title*="{T}"] >svg >path {
display:none;
}
div[title*="{T}"]>svg{
background-image: URL("https://upload.wikimedia.org/wikipedia/commons/a/ab/Icon-Mac.svg");  
transform:scale(1.2);
background-repeat: no-repeat;
background-size: cover;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); 
background-position: center; 
}

div[title*="{T}"] >svg >circle {
display:none;
}

div[title*="{T}"]::after {
content: "{S}";
font-size: 12px;
font-weight: 700;
color: white;  /*You can follow the Tinh Dinh way for this part*/
text-shadow: 2px 2px  2px rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
}

This application is copyable and I prefer to simplify the number of sheets a bit by using the filter from the map. It’s free and feels free to copy it.

7 Likes
2

Neat! Thanks for sharing.

1 Like
3

Thanks ! Great and useful

1 Like
4

Can this be done in the current Glideapp (page)?

5

Most likely no, since you can not have the CSS box pointing to a dynamic column.

If you want to work with it, it would still work, but you have to paste static code to the CSS box, on a Business/Enterprise plan.

1 Like
6

Hi @l3oy8231, this is my update in this post:

1 Like