---
title: Map
description: Map
element: vaadin-map
---

## Description

`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:

```html
<vaadin-map></vaadin-map>
```

Then use the exposed OpenLayers API to configure it:
```html
<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>
```

## Properties

### configuration

**Type:** `Map`

The internal OpenLayers map instance used to configure the map.
See the OpenLayers [API](https://openlayers.org/en/latest/apidoc/) and
[examples](https://openlayers.org/en/latest/examples/) for further information.