Get Started
vue3-openlayers works with the following versions which must be installed as peer dependencies:
- ol:
^10.0.0
- ol-contextmenu:
^5.4.0
- ol-ext:
^4.0.21
- vue:
^3.4.0
Installation
bash
npm i ol ol-ext ol-contextmenu # install the peerDependencies
npm i vue3-openlayers # install this library
bash
yarn add ol ol-ext ol-contextmenu # install the peerDependencies
yarn add vue3-openlayers # install this library
bash
pnpm add ol ol-ext ol-contextmenu # install the peerDependencies
pnpm add vue3-openlayers # install this library
bash
bun add ol ol-ext ol-contextmenu # install the peerDependencies
bun add vue3-openlayers # install this library
Usage: As Plugin
To use vue3-openlayers
in your application as a Plugin for global component availability, you can import all components (default export) or only parts of vue3-openlayers
in your application (named exports).
ts
import { createApp } from "vue";
import App from "./App.vue";
// The style are only needed for some map controls.
// However, you can also style them by your own
import "vue3-openlayers/styles.css";
import OpenLayersMap from "vue3-openlayers";
const app = createApp(App);
app.use(OpenLayersMap /*, options */);
app.mount("#app");
ts
import { createApp } from "vue";
import App from "./App.vue";
// The style are only needed for some map controls.
// However, you can also style them by your own
import "vue3-openlayers/styles.css";
import { Map, Layers, Sources } from "vue3-openlayers";
const app = createApp(App);
app.use(Map /*, options */);
app.use(Layers /*, options */);
app.use(Sources /*, options */);
app.mount("#app");
vue
<script setup lang="ts"></script>
<template>
<ol-map style="min-width: 400px; min-height: 400px;">
<ol-view :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
</ol-map>
</template>
Usage: Explicit import
You can also import and use components individually by importing them directly in your components.
vue
<script setup lang="ts">
import { Map, Layers, Sources } from "vue3-openlayers";
</script>
<template>
<Map.OlMap style="min-width: 400px; min-height: 400px;">
<Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
<Layers.OlTileLayer>
<Sources.OlSourceOsm />
</Layers.OlTileLayer>
</Map.OlMap>
</template>
Debug Mode
You can activate the debug
mode, to log events receiving from OpenLayers and props passed to OpenLayers on the console.
Plugin Usage
ts
import { createApp } from "vue";
import App from "./App.vue";
import OpenLayersMap, {
type Vue3OpenlayersGlobalOptions,
} from "vue3-openlayers";
const app = createApp(App);
const options: Vue3OpenlayersGlobalOptions = {
debug: true,
};
app.use(OpenLayersMap, options);
app.mount("#app");
ts
import { createApp } from "vue";
import App from "./App.vue";
import {
Map,
Layers,
Sources
type Vue3OpenlayersGlobalOptions
} from 'vue3-openlayers';
const app = createApp(App);
const options: Vue3OpenlayersGlobalOptions = {
debug: true,
};
app.use(Map, options);
app.use(Layers, options);
app.use(Sources, options);
app.mount("#app");
Provide for components
vue
<script setup lang="ts">
import { provide } from "vue";
import {
Map,
Layers,
Sources,
type Vue3OpenlayersGlobalOptions,
} from "vue3-openlayers";
const options: Vue3OpenlayersGlobalOptions = {
debug: true,
};
provide("ol-options", options);
</script>
<template>
<Map.OlMap style="min-width: 400px; min-height: 400px">
<Map.OlView :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
<Layers.OlTileLayer>
<Sources.OlSourceOsm />
</Layers.OlTileLayer>
</Map.OlMap>
</template>