bojko108/vue-ol-plugin

Vuejs plugin for OpenLayers

Vuejs plugin for OpenLayers

This plugin can be used for creating maps using OpenLayers library.

⚠️ This plugin uses vue-axios-plugin to fetch mapp config. If axios plugin is not installed it will be added when this plugin is installed.

Installation

yarn add bojko108/vue-ol-plugin

Add it to Vue:

import Vue from 'vue';
import OLPlugin from 'vue-ol-plugin';

Vue.use(OLPlugin);

Or if using Quasar Framework:

Add a new boot file:

quasar new boot openlayers

import OLPlugin from 'vue-ol-plugin';

export default async ({ Vue }) => {
  Vue.use(OLPlugin);
};

In your quasar.conf.js:

boot: [..., 'openlayers'],

Plugin methods

How to use

export default {
  name: "MyComponent"
  created() {
    // access to the plugin
    this.$ol...
  }
}

• this.$ol.lib - access to OpenLayers library
• this.$ol.app - access to created application
• this.$ol.map - access to created map (same as this.$ol.app.map)
• this.$ol.config - access to the initial config

Map component

How to use

<template>
  <ol-map :configUrl="url_to_your_config" />
</template>

Props

List of props, used for creating the mapp:

Name	Description	Required	Type	Default value
cssClasses	Name of CSS classes to add to the mapp HTMLElement. Default CSS class map is not removed.	false	String	map
configUrl	Url to the mapp config	false	String	undefined
latitude	Lattitude of mapp's center. If set, it will override config.map.map.view.latitude	false	Number	undefined
longitude	Longitude of mapp's center. If set, it will override config.map.map.view.longitude	false	Number	undefined
zoom	Zoom level for the mapp. If set, it will override config.map.map.view.zoomLevel	false	Number	undefined
basemap	Sets the basemap for this mapp. This prop has two required properties: name and provider. If set it will override config.map.layers.basemaps	false	Object	undefined

Events

List of events used to communicate with the parent element:

Name	Description	Arguments
@config-ready	Emitted when the config is parsed, but before creating the mapp	config
@app-ready	Emitted when OpenLayers application is created. You can access the mapp from app.map, but this event is emitted before the mapp rendered for first time.	app
@map-rendered	Emitted when the mapp is renderend for first time	map

License

vue-ol-plugin is MIT License @ bojko108