Custom Markers for v-leaflet

Flow
4

Hello again Matti,

I now looked into your code here:
https://github.com/mstahv/v-leaflet/blob/b84cd4b1d94e4e01297231b2a60381817eb48034/src/main/java/org/vaadin/addon/leaflet/client/LeafletMarkerConnector.java

and I see that I can create a divIcon using custom svg as you do for fontawesome

for custom divIcon

else if (divIcon != null) {
DivIconOptions divIconOptions = DivIconOptions.create();
configureIconSize(divIconOptions);
if (ComponentStateUtil.hasStyles(getState())) {
StringBuilder builder = new StringBuilder();
for (String style : getState().styles) {
builder.append(style).append(" ");
}
divIconOptions.setClassName(builder.toString());
}
divIconOptions.setHtml(divIcon);
DivIcon icon = DivIcon.create(divIconOptions);
options.setIcon(icon);
}

and for fontawesome

if (urlReference != null && urlReference.getURL().startsWith("fonticon://")) {
// fonticons have special handling
com.vaadin.client.ui.Icon vIcon = getIcon();
String fontAwesomeChar = vIcon.getElement().getInnerText();
StringBuilder svgSb = new StringBuilder();
// TODO make this configurable, consider making also possible to
// use configurable SVG marker without fontawesome icon in marker
svgSb.append("<svg width=\"25px\" height=\"40px\"><path fill=\"#44AEEA\" stroke=\"#005FA8\" d=\"M12.544,0.5C5.971,0.5,0.5,6.24,0.5,12.416c0,2.777,1.564,6.308,2.694,8.745\n"
+ "L12.5,38.922l9.262-17.761c1.13-2.438,2.738-5.791,2.738-8.745C24.5,6.24,19.117,0.5,12.544,0.5L12.544,0.5z\"/><text fill=\"#fff\" x=\"12.5\" y=\"20\" text-anchor=\"middle\" font-size=\"16\" class=\"");
svgSb.append(vIcon.getStyleName());
svgSb.append("\">");
svgSb.append(fontAwesomeChar);
svgSb.append("</text></svg>");
DivIconOptions divIconOptions = DivIconOptions.create();
divIconOptions.setClassName("v-leaflet-custom-svg");
divIconOptions.setHtml(svgSb.toString());
divIconOptions.setIconSize(Point.create(25, 40));
divIconOptions.setIconAnchor(Point.create(12.5, 40));
configureIconSize(divIconOptions);
DivIcon icon = DivIcon.create(divIconOptions);
options.setIcon(icon);
}

Could you please explain what class name “v-leaflet-custom-svg” is and where can I define mine in order to use my own svg path?

best regards,
George

5

Hello,

to answer my own question.

The add-on is currently capable of displaying custom Markers (using SVG code).

To do so one must do:

        LMarker marker = new LMarker();
        String svgCode = "<svg>your svg code here</svg>";
        marker.addStyleName("v-leaflet-custom-svg");
        marker.setDivIcon(svgCode);

Matti, if you could add this as an example on the add-on page or something for other people to find.

Regards,
George

6

Does anybody knows why rotated marker icon is not where it should be on a map? It’s always moved for some distance from it should be on a map. Only when make max zoom in it’s where it should be?

7

Is the Marker size and anchor point specified correctly? If those are, then it is probably an issue in the underlaying JS library.

cheers,
matti

8

I didn’t specified anything, how to do that? I want to set middle of icon marker on location coordinates

9

Try with setIconSize and setIconAnchor:

https://github.com/mstahv/v-leaflet/blob/master/src/main/java/org/vaadin/addon/leaflet/LMarker.java#L74

10

Thanks, I will check that

11

setIconSize resolve this, thanks again

12

Hi Matti,
is there a possibility to simply change the color of the marker? The setStyle()-Method doesn’t seem to do anything.
I just need to change the default color of the icon to e.g. red, green etc. The svg can stay unchanged.
Thanks!

13

The default marker is a raster image IIRC. It might be quite easy to make the color of SVG marker to be configured somehow. Do you have a static list of colors you’d use or would those need to be dynamic? If static, then the solution could use CSS.

cheers,
matti

14

Hi Matti,
static would be totally sufficient. It should be enough to have something like let’s say 10 or 20 predefined colors to play with. I tried with CSS, but no luck.
Can you provide an example pls?
Thanks

15

Hello,

you can use any colour you like if you use an SVG marker.

 LMarker marker = new LMarker();
 String svgCode = "<svg>your svg code here</svg>";
 marker.addStyleName("v-leaflet-custom-svg");
 marker.setDivIcon(svgCode);

You just need to specify the color in your SVG code / path

16

Works like a charm! Thanks George!

17

I’m finding that if I put setIconSize(…) the whole background of the icon will be a white box. If I leave it then I still get a whitebox but it’s much smaller. setIconAnchor only seems to adjust where the anchor is and has no bearing on the whitebox (whether you set it or not). As in has the fix changed over the last year?

18

Stephan, do you need that whitebox or not? I think most often you want to get rid of it using the v-leaflet-custom-svg stylename. If you need to block transparency, you can do that in the image/svg.

cheers,
matti

19

hello all,
I use v-leaflet to create my map in a web application i create many markers with different icon
I need to create a click listener on a marker and open a pop up window
Can you provide an example please?
Thanks

20

Hi toufichamoud!

I the custom markers thing is discussed in this thread and in the examples is projects github repository (in src/test/java).

Here is how to open a popup window from a click to marker:

	LMap map = new LMap();
	map.addLayer(new LOpenStreetMapLayer());
	setContent(map);
	LMarker marker = new LMarker(0,0);
	marker.addClickListener( e -> {
		Window w = new Window("My new window");
		w.setModal(true);
		w.setContent(new Label("Window content"));
		getUI().addWindow(w);
	});
	map.addLayer(marker);
21

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!

22

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.

23

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.