Directory

← Back

Leaflet4Vaadin

Vaadin 14 LTS and Leaflet 1.6.0 integration with PolymerTemplate

Author

Contributors

Rating

Leaflet4Vaadin provides a Java API for Leaflet, which is a popular map implementation.

With this Vaadin add-on you can use LeafletJS with java on server side.

If you want to contribute this add-on on github no hesitate just contact me.

Core Features:

  • map configuration
  • interactive layers
  • map and layer events
  • markers
  • tooltip and popup binding
  • layer groups
  • vector layers
  • dark theme
  • map controls (zoom, layers, scale)
  • map state functions
  • tile layers
  • GeoJSON supports
  • supports Leaflet plugins (eg.: fullscreen, heatmap, markercluster)

Future improvements

  • i18n supports
  • leaflet editable plugin integration
  • design and performance improvements
  • use Typescript on client-side instead of JS
  • supports parameters in custom events
  • bugfixes

Example usage

MapOptions options = new DefaultMapOptions();
options.setCenter(new LatLng(47.070121823, 19.204101562500004));
options.setZoom(7);
LeafletMap leafletMap = new LeafletMap(options );
leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
add(leafletMap);

Please report the issues here: https://github.com/Gubancs/leaflet4vaadin/issues

Feel free to donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8M9BEK428U6AW&source=url

Sample code

MapOptions options = new DefaultMapOptions();
options.setCenter(new LatLng(47.070121823, 19.204101562500004));
options.setZoom(7);
LeafletMap leafletMap = new LeafletMap(options );
leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
add(leafletMap);
	MapOptions options = new DefaultMapOptions();
		options.setCenter(new LatLng(47.070121823, 19.2041015625));
		options.setZoom(7);
		LeafletMap leafletMap = new LeafletMap(options);
		leafletMap.setBaseUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");

		leafletMap.onClick((e) -> {
			Notification.show("New marker added to map.", 3000, Position.TOP_CENTER);
			Marker marker = new Marker(e.getLatLng());
			marker.bindPopup("My added marker!");
			marker.addTo(leafletMap);
		});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Minor changes

  • Add className to Tootip (#27)
  • Added empty constructor for LatLngBounds
  • Merged a pull request (Fix typo (widht -> width))
Released
2020-11-26
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Polymer 2.0+
Polymer 3.0+
Vaadin 10+ in 0.2.2-beta
Browser
N/A
Online