Custom map marker icons

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.

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

Neat! Thanks for sharing.

1 Like

Thanks ! Great and useful

1 Like