Custom Markers for v-leaflet

Hi. v-leaflet noob here.

In this thread, there have been many mentions of customising with CSS (I’m also CSS noob :). Can you give an example for me how this is done?

In my use-case, I would need to add a colored border to a marker.

Thanks in advance!

Ok, nevermind, got them working finally with horrendeus amount of poking around :slight_smile:

For anyone battling with the same issue here’s how it’s done:

String divIconString = “<img src="VAADIN/themes/mytheme/image.jpg" class="borderhighlight">”;
marker.setDivIcon(divIconString);

Where “borderhighlight” is the style you have done in your Vaadin theme CSS file.

But… I’m getting the same white square in the background as original poster mentions.

I tried to put

background-image: transparent;
and
background-color: transparent;

in the style, but to no effect.

A clumsy workaround:
Set the icon size to zero with

marker.setIconSize(new Point(0.0, 0.0));

but this still leaves a dot visible. So positioned the icon with CSS absolute positioning over the dot.