vue3-openlayers

Appearance

ol-overlay ​

HTML element attached to geographical coordinate

ol-overlay component creates a HTML element that would be displayed over the map. It has default scoped slot to render your custom content.

Usage ​

Example below shows how to add custom content on to the map.

vue
<template>
  <button class="btn-default" type="button" @click="moveToEast">
    Move to the right
  </button>
  <ol-map style="height: 400px">
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-overlay
      :position="[item + 37.9 + offset, 40.1]"
      v-for="item in list"
      :key="item"
    >
      <div class="overlay-content">
        {{ item }}
      </div>
    </ol-overlay>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
const offset = ref(0);
const list = ref([2, 1, 3, 5, -1]);

function moveToEast() {
  offset.value += 0.1;
}
</script>

<style scoped>
.overlay-content {
  background: #efefef;
  box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
  padding: 10px 20px;
  font-size: 16px;
  color: black;
}
</style>
<template>
  <button class="btn-default" type="button" @click="moveToEast">
    Move to the right
  </button>
  <ol-map style="height: 400px">
    <ol-view
      ref="view"
      :center="center"
      :zoom="zoom"
      :projection="projection"
    />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-overlay
      :position="[item + 37.9 + offset, 40.1]"
      v-for="item in list"
      :key="item"
    >
      <div class="overlay-content">
        {{ item }}
      </div>
    </ol-overlay>
  </ol-map>
</template>

<script setup>
import { ref } from "vue";

const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
const offset = ref(0);
const list = ref([2, 1, 3, 5, -1]);

function moveToEast() {
  offset.value += 0.1;
}
</script>

<style scoped>
.overlay-content {
  background: #efefef;
  box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
  padding: 10px 20px;
  font-size: 16px;
  color: black;
}
</style>

Properties ​

Props from OpenLayers ​

Properties are passed-trough from OpenLayers directly. Their types and default values can be checked-out in the official OpenLayers docs. Only some properties deviate caused by reserved keywords from Vue / HTML. This deviating props are described in the section below.

Deviating Properties ​

element ​

The property element from OpenLayers is filled by the vue components template ref. However, you are still able to override it and bind the component to another differing HTML element.

Events ​

You have access to all Events from the underlying source. Check out the official OpenLayers docs to see the available events tht will be fired.

html
<ol-overlay @error="handleEvent">My Overlay Text</ol-overlay>
<ol-overlay @error="handleEvent">My Overlay Text</ol-overlay>

Methods ​

You have access to all Methods from the underlying source. Check out the official OpenLayers docs to see the available methods.

To access the source, you can use a ref() as shown below:

vue
<template>
  <!-- ... -->
  <ol-overlay ref="overlayRef">My Overlay Text</ol-overlay>
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type Overlay from "ol/Overlay";

const overlayRef = ref<{ overlay: Overlay }>(null);

onMounted(() => {
  const overlay: Overlay = overlayRef.value?.overlay.value;
  // call your method on `overlay`
});
</script>
<template>
  <!-- ... -->
  <ol-overlay ref="overlayRef">My Overlay Text</ol-overlay>
  <!-- ... -->
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import type Overlay from "ol/Overlay";

const overlayRef = ref<{ overlay: Overlay }>(null);

onMounted(() => {
  const overlay: Overlay = overlayRef.value?.overlay.value;
  // call your method on `overlay`
});
</script>