Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Introducing the Vaadin Map component

By  
Marc Englund
Marc Englund
·
On Mar 10, 2022 12:04:41 PM
·
In Product

Map component (1)

We’ve all felt a bit lost at some point in our lives. Sometimes literally, when trying to find that place (“you can’t miss it”), sometimes metaphorically, when looking for the right add-on for an application. In both cases, a reliable, up-to-date map might be indispensable.

Today we’re proudly announcing the early preview of the upcoming, meticulously crafted, officially supported, and professionally maintained Vaadin Map component.

Vaadin Map is automatically included in your Pro (or above) subscription.

Map of the city of Turku, Finland

“I am told there are people who do not care for maps, and I find it hard to believe.” ~ Robert Louis Stevenson, The Art of Writing on Treasure Island

If you search for “map” in Vaadin Directory, you find that there are almost 40 map-related add-ons. Some are quite good, and you might find a perfectly fine solution for your use case. 

Unfortunately, many lack proper integration with Vaadin Flow, so you might have some integration work to do. 

“The foremost cartographers of the land have prepared this for you; it’s a map of the area that you’ll be traversing.”

[opens it up and sees it is blank]

“They’ll be very grateful if you could just fill it in as you go along.”

Blackadder II, British Comedy

Whichever mapping solution you choose, make sure you are aware of the terms, conditions, service level, and support you can expect, so that the solution is appropriate for your use case. This includes the map component itself, and the map data you use.

Maritime map with sea and continents

Due to subtle but crucial issues like this, it has become clear that many situations require an official, supported, and maintained alternative. This is why we’re building yet another map component. 

Indeed, the main benefit of the Vaadin Map compared to some of the alternatives is that it is an officially supported and maintained component, expertly hand-crafted by Vaadin engineers to fit perfectly into the Vaadin ecosystem.

For now, the component is released as an early preview behind a feature flag. The component is included in Vaadin 23, and you can expect production-quality code, but we want to make sure the basic API provides a stable foundation to keep building on without surprises (more about feature flags). We know you are building serious, long-lived applications that mean business, and we’re here to support that as best we can.

We’re super-grateful for the input and feedback we’ve received so far, and we hope everyone with some interest in maps will give the early preview a spin and let us know thoughts, ideas, or suggestions. Discussions on Discord, questions on Stack Overflow, issues on GitHub – or ask support.

Features

Typical use cases include showing static locations like offices, stores or warehouses, tracking a moving vehicle fleet in real time, and overlaying data such as heat maps to visualize, for instance, network coverage or congestion points.

Map of the city of Helsinki, Finland

Feature highlights (Documentation)

  • Official component; professional support, maintenance, and release schedule
  • Native Vaadin Flow Java API 
  • Supports multiple map data sources (default: OpenStreetMap), including self-hosted. Supports OSM, XYZ, and WMS formats.
  • Layer support; display overlay map data
  • Custom markers; display point of interest, vehicles, etc.
  • Server push support (e.g., moving vehicles,  changing conditions)
  • Fully interactive; control and detect viewport changes (e.g, for lazy-loading content), detect map and marker clicks for drill-down and user-added content.

Get started

Vaadin map is included in Vaadin 23 behind a feature flag. Update your project to use V23, then enable the feature.

Alternatively, the most straightforward way to give the Map component a spin in a new project is to go to start.vaadin.com, and add a view with a Map.

You need a Pro subscription to use the component in production. Start your free trial.

Marc Englund
Marc Englund
Marc is a a long time Vaadineer, carrying a Design Strategist card in his left jeans pocket. Lately he has mostly been thinking about the new #FFS, and other ways to make the developers’ day more enjoyable.
Other posts by Marc Englund