`<vaadin-map>`

`vaadin-map` is a web component for displaying web maps.

Category: Utilities
Built with: Lit
Library: Vaadin
Author: Vaadin
Package: @vaadin/map
Component size: 56.9 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular: 3 out of 5
Downloads: 27,252/week · jsDelivr 1,915 hits/month (whole @vaadin/map package)
Latest stable version: 25.3.2
Last published: Oct 2, 2026
Component last changed: Sep 22, 2026 (in 25.3.0)
License: Vaadin Commercial License Pro

vaadin-map is a web component for displaying web maps.

The component is a light-weight wrapper around the OpenLayers mapping library.

Basic Usage

Add a <vaadin-map> element to your HTML:

<vaadin-map></vaadin-map>

Then use the exposed OpenLayers API to configure it:

<script type="module">
  import "@vaadin/map";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  import View from "ol/View";

  const map = document.querySelector("vaadin-map");
  customElements.whenDefined("vaadin-map").then(() => {
    map.configuration.addLayer(new TileLayer({
      source: new OSM()
    }));
    map.configuration.setView(new View({
      center: [0, 0],
      zoom: 3
    }));
  });
</script>

Attributes

theme