vl-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.
<template>
<ol-map style="height:400px">
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-overlay :position="[40,40]">
<template v-slot="slotProps">
<div class="overlay-content">
Hello world!<br />
Position: {{ slotProps.position }}
</div>
</template>
</ol-overlay>
</ol-map>
</template>
<style>
.overlay-content {
background: #efefef;
box-shadow: 0 5px 10px rgb(2 2 2 / 20%);
padding: 10px 20px;
font-size: 16px;
}
</style>
import { ref } from "vue";
export default {
setup() {
const center = ref([40, 40]);
const projection = ref("EPSG:4326");
const zoom = ref(8);
const rotation = ref(0);
return {
center,
projection,
zoom,
rotation,
};
},
};
Properties
position
- Type:
number[]
- Required
Coordinate of the overlay position in view
offset
- Type:
number[]
- Default:
[0, 0]
XY axis offset in pixels used when positioning the overlay.
positioning
- Type:
string
- Default:
top-left
The overlay positioning relative to its Possible values: bottom-left
, bottom-center
, bottom-right
, center-left
, center-center
, center-right
, top-left
, top-center
, and top-right
.
stopEvent
- Type:
boolean
- Default:
true
Whether pointer event propagation from overlay element to the map viewport should be stopped. When set to true
the overlay will be placed in the same container with map controls.
insertFirst
- Type:
boolean
- Default:
true
Determines whether the overlay will be prepended or appended in the overlay container. When stop-event
is set to true
you will probably set insert-first
to true
so the overlay is displayed below controls.
autoPan
- Type:
boolean
- Default:
false
Enables map panning when the overlay will be added, so the overlay will be visible in the current viewport.
autoPanMargin
- Type:
boolean
- Default:
20
The margin (in pixels) between the overlay and the viewport borders.
autoPanAnimation
- Type:
Object
- Default:
undefined
The animation options used to pan the overlay into view.
Events
elementChanged
offsetChanged
positionChanged
positioningChanged