Vue Components For OpenLayers

Install & Download:

npm install -S vue vuelayers

Description:

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'
Vue.use(Map)
Vue.use(TileLayer)
Vue.use(OsmSource)
Vue.use(Geoloc)

// OR
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/dist/vuelayers.css'
Vue.use(VueLayers)

2. Create a simple map with OSM layer.

<template>
  <div>
    <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-box>
              <vl-style-icon src="_media/marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
            </vl-style-box>
          </vl-feature>
        </template>
      </vl-geoloc>
      <vl-layer-tile id="osm">
        <vl-source-osm></vl-source-osm>
      </vl-layer-tile>
    </vl-map>
    <div style="padding: 20px">
      Zoom: {{ zoom }}<br>
      Center: {{ center }}<br>
      Rotation: {{ rotation }}<br>
      My geolocation: {{ geolocPosition }}
    </div>
  </div>
</template>

export default {
  data () {
    return { 
      zoom: 2,
      center: [0, 0],
      rotation: 0,
      geolocPosition: undefined,
    }
  },
}
</template>

Preview:

Changelog:

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)