Vue Components For OpenLayers

Install & Download:

npm install -S vue vuelayers


A collection of Vue.js components to work with OpenLayers.

Basic Usage:

1. Import and register the components.

import Vue from 'vue'
import { Map, TileLayer, OsmSource, Geoloc } from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'
// OR
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'

2. Create a simple map with OSM layer.

    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
             data-projection="EPSG:4326" style="height: 400px">
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
      <vl-geoloc @update:position="geolocPosition = $event">
        <template #default="geoloc">
          <vl-feature v-if="geoloc.position" id="position-feature">
            <vl-geom-point :coordinates="geoloc.position"></vl-geom-point>
              <vl-style-icon src="_media/marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
      <vl-layer-tile id="osm">
    <div style="padding: 20px">
      Zoom: {{ zoom }}<br>
      Center: {{ center }}<br>
      Rotation: {{ rotation }}<br>
      My geolocation: {{ geolocPosition }}
export default {
  data () {
    return { 
      zoom: 2,
      center: [0, 0],
      rotation: 0,
      geolocPosition: undefined,


Vue Components For OpenLayers


v0.12.7 (02/21/2023)

  • bugfixes

v0.12.3 (04/06/2022)

  • bugfixes

v0.12 (02/24/2022)

  • based on the current OpenLayers v6
  • optimization and careful synchronization of the state between vuelayers and openlayers components
  • renamed several properties and components to make naming consistent across the lib. All of them will be still available by deprecated names but log a warnings when process.env.NODE_ENV !== ‘production’.

v0.11.27 (09/21/2020)

  • fix the early exit from function to resolve selected feature

v0.11.26 (07/07/2020)

  • Bugs fixed

Add Comment