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 {
background-image: URL("");  
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 {

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.


Neat! Thanks for sharing.

1 Like

Thanks ! Great and useful

1 Like