Four ways to display geospatial features in Vaadin Flow UIs

Matti Tahvonen
Matti Tahvonen
On Apr 11, 2024 4:11:21 PM

Java is a commonly used platform to edit geospatial data. There is almost an overload of various tools and libraries available. There are a number of UI widgets for Vaadin that allow you to plot and even edit geospatial information. The unique architecture of Vaadin Flow also allows you to build fully featured web UIs for those geospatial features, in 100% Java.

In the past, with Vaadin 7 and 8, the V-Leaflet add-on became almost a standard add-on to display geospatial data. Like the original LeafletJS library, the core was just the core and there is a whole ecosystem of extensions for it (add-ons for add-ons), to add features like heat maps, marker clusters, and editing polygons and other geospatial features.

Nowadays, for the current Vaadin 24, there are a number of different options to choose from. Let’s do a brief overview of them.

1. Google Maps

Google Maps revolutionized web maps ages ago, providing the first widely used tiled “slippy map” widget. And, from the early versions, they have also allowed their widget to be embedded. With Google Maps, you’ll get great background layers and fairly versatile features to overlay your own data.

There is a nice Vaadin add-on (Java API) available but, before dropping it into your business web app, you should check out the small print. The licensing terms are quite nice for public and open apps, but you most likely want to use something else for your closed business app.

2. OpenLayers and Vaadin Maps

The official Vaadin Maps component is based on the OpenLayers slippy map. The latest versions of OpenLayers utilize WebGL technology, so zooming and panning the map works fluently on modern browsers. Background layers are typically offered in raster format, with several standard protocols, such as WMS. At one point in their history, OpenLayers kind of lost the game for Leaflet (the original version became too bloated), but their complete rewrite for version 2 essentially brought them back to the slippy map game and is the basis for many modern web mapping UIs.

Vaadin Maps offers a stable and well documented Java API for a subset of OpenLayers features. You can use a couple of background layers options and display points using markers.

3. Leaflet-based tooling

As I was too lazy to start the huge upgrade of the original V-Leaflet add-on (shame on me 👎) and a number of Vaadin apps needed a feature-rich slippy map add-on, the community responded. Our friends from XDEV have written a comprehensive wrapper for the Leaflet component. You can add various background layers and draw more complex features such as linestrings and polygons with a pure Java API.

There are also a couple of other Leaflet-based wrappers available in the Directory, like one built by Vaadin’s own consulting department for a customer who needed, for example, Esri’s Leaflet plugins, allowing you to connect to the popular ArcGIS services. 

4. MapLibre GL for full vector graphics

During the winter, I finally got my own hands dirty and started upgrading one of my older Vaadin apps that I use for my hobbies. This not only visualizes geospatial data, but the main part is to really maintain a database of contracts related to properties and areas. Drawing and editing polygons (including holes) and lines are essential features for that app. My original plan was to contribute Leaflet.Editable support but, after investigating the current state of slippy map widgets, I decided to take on a bigger challenge.

The reason was that the future of web slippy maps is fully vector-based. With WebGL-based rendering and Protocol Buffers-based transport, they render smoothly on desktop and mobile and look razor-sharp on every zoom level. The industry pioneer MapBox has worked on this technology for years and Google Maps also supports it. 

The MapLibre GL project was born as an open source fork of the MapBox slippy map widget a few years ago, when they closed-sourced it for the 2.0 version. The vector tile specification by MapBox has been adopted by many projects both on the server and the client and is becoming a de facto standard. You can get background layer material from other commercial vendors as well, and, for example, via open data efforts by the National Land Survey of Finland, helping me personally to get the best-possible terrain map data for my hobbies.

This is an intro to Collamap (built with MapLibreGL and Vaadin), an example of the kind of spatial features you can accomplish with pure Java.

The Vaadin wrapper, which I initially created as a simple JS widget integration example, now features a much broader Java API for MapLibre GL. For example, there are Binder-compatible components for the commonly used geospatial JTS data types. These come in very handy when editing spatial features in your Vaadin app, as they are supported by many other Java spatial libraries, such as Hibernate’s spatial extensions. There are currently Binder-compatible fields for Point, LineString, and Polygon, but editors for types like LinearRing or MultiPolygon should be easy to add. 

The video shown here gives a brief feature overview for my hobby app, but if you’d like to see better code examples, you should probably check out this spring-boot-spatial example. It is an easy-to-digest basic CRUD example built on top of PostGIS (spatial extensions for PostgreSQL), JPA with Hibernate and its spatial extensions, Spring Data JPA, and, naturally, Vaadin Flow on the UI layer. 

Explore the Vaadin MapLibre add-on and other spatial examples in the Vaadin Directory, or check out the Spring Boot example app on GitHub. Happy coding!

Matti Tahvonen
Matti Tahvonen
Matti Tahvonen has a long history in Vaadin R&D: developing the core framework from the dark ages of pure JS client side to the GWT era and creating number of official and unofficial Vaadin add-ons. His current responsibility is to keep you up to date with latest and greatest Vaadin related technologies. You can follow him on Twitter – @MattiTahvonen
Other posts by Matti Tahvonen