ol-overviewmap-control
A Overview Map control for OpenLayers.
Usage
vue
<template>
<ol-map ref="map" style="height: 400px" :controls="[]">
<ol-view
ref="view"
:center="center"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-overviewmap-control :collapsed="false">
<ol-tile-layer>
<ol-source-stadia-maps layer="stamen_watercolor" />
</ol-tile-layer>
</ol-overviewmap-control>
</ol-map>
</template>
<script setup>
import { ref, onMounted } from "vue";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
</script><template>
<ol-map ref="map" style="height: 400px" :controls="[]">
<ol-view
ref="view"
:center="center"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-overviewmap-control :collapsed="false">
<ol-tile-layer>
<ol-source-stadia-maps layer="stamen_watercolor" />
</ol-tile-layer>
</ol-overviewmap-control>
</ol-map>
</template>
<script setup>
import { ref, onMounted } from "vue";
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
</script>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
None.
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-overviewmap-control :ref="controlRef">
<!-- ... -->
</ol-overviewmap-control>
<!-- ... -->
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type OverviewMap from "ol/control/OverviewMap";
const controlRef = ref<{ control: OverviewMap }>(null);
onMounted(() => {
const controlRef: OverviewMap = sourceRef.value?.control;
// call your method on `control`
});
</script><template>
<!-- ... -->
<ol-overviewmap-control :ref="controlRef">
<!-- ... -->
</ol-overviewmap-control>
<!-- ... -->
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type OverviewMap from "ol/control/OverviewMap";
const controlRef = ref<{ control: OverviewMap }>(null);
onMounted(() => {
const controlRef: OverviewMap = sourceRef.value?.control;
// call your method on `control`
});
</script>