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:

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

Properties #

configuration #

Type: Map

The internal OpenLayers map instance used to configure the map. See the OpenLayers API and examples for further information.