Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Custom Markers for v-leaflet

George Bougiakas
5 years ago Oct 10, 2016 11:38am
Matti Tahvonen
5 years ago Oct 14, 2016 2:22pm
Matti Tahvonen
5 years ago Oct 15, 2016 12:27pm
George Bougiakas
5 years ago Nov 08, 2016 4:52pm

Matti Tahvonen: I checked into teh white quare thing you mentioned. I guess you need to explicitly define the size, otherwise it will end up being some minimum size -> small square. In the example I seem to use this kind of code:

        LMarker m = new LMarker(0,0);
        m.setDivIcon("Hello <strong>world</strong>!");
        // define the size for the html box
        m.setIconSize(new Point(80,20));
        leafletMap.addLayer(m);

I guess Leaflet needs the size to properly position the divIcon. If you don't want to show the background and border, you can probably just us CSS to get rid of that.

cheers,
matti

 

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

George Bougiakas
5 years ago Nov 11, 2016 10:59am

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

goran djermanovic
4 years ago Jul 03, 2017 6:09pm
Matti Tahvonen
4 years ago Jul 04, 2017 7:40am
goran djermanovic
4 years ago Jul 04, 2017 7:54am
Matti Tahvonen
4 years ago Jul 04, 2017 7:57am
goran djermanovic
4 years ago Jul 04, 2017 7:58am
goran djermanovic
4 years ago Jul 05, 2017 10:22am
Torsten Börner
4 years ago Aug 24, 2017 7:03am
Matti Tahvonen
4 years ago Aug 24, 2017 8:26am
Torsten Börner
4 years ago Sep 05, 2017 4:49pm
George Bougiakas
4 years ago Sep 06, 2017 7:56am
Torsten Börner
4 years ago Sep 10, 2017 10:59am
Stephan Grenier
3 years ago Sep 01, 2018 8:44am
Matti Tahvonen
3 years ago Sep 04, 2018 7:59am
toufichamoud paulali
3 years ago Dec 06, 2018 11:11am
Matti Tahvonen
3 years ago Dec 17, 2018 1:19pm
Heikki Siltala
2 years ago Sep 25, 2019 12:24pm
Heikki Siltala
2 years ago Sep 26, 2019 6:36am
Heikki Siltala
2 years ago Sep 26, 2019 7:32am
Heikki Siltala
2 years ago Sep 26, 2019 9:27am