Vue Components For OpenLayers

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)

• fix the early exit from function to resolve selected feature

v0.11.26 (07/07/2020)

• Bugs fixed

Download Details:

Author: ghettovoice

Live Demo: https://ghettovoice.github.io/vuelayers/

Download Link: https://github.com/ghettovoice/vuelayers/archive/master.zip

Official Website: https://github.com/ghettovoice/vuelayers

Install & Download:

npm install -S vue vuelayers