VueLayers

Vue components to work with OpenLayers

Demo

Install

# install Vue and VueLayers
npm install -S vue vuelayers

Available builds

1. UMD

• Full debug version: dist/vuelayers.umd.js and dist/vuelayers.umd.css
• Full production version: dist/vuelayers.umd.min.js and dist/vuelayers.umd.min.css

2. CommonJS

• Full version: dist/vuelayers.cjs.js and dist/vuelayers.cjs.css

3. CommonJS separate components (for plugins like babel-plugin-component)

• Main: dist/modules/index.js and dist/modules/style.css
• Components: dist/modules/%component-name%/index.js and dist/modules/%component-name%/style.css

4. ES6 module

• Full version: dist/vuelayers.es.js and dist/vuelayers.es.css

Usage

Basic example with full import

// main.js
import Vue from 'vue'
import VueLayers from 'vuelayers'

Vue.use(VueLayers)
// now all components installed and ready to use
new Vue({
  el: '#app',
  render: h => h(App)
})

// App.vue
<template>
  <div id="map">
    <vl-map>
      <vl-view />
      
      <vl-layer-tile>
        <vl-source-osm />
      </vl-layer-tile>
    </vl-map>
  </div>
</template>
<script>
  export default {}
</script>
<style>
  /* CSS file needs to be imported separately. */
  @import "~vuelayers/dist/vuelayers.";
</style>

Note about usage of different builds

• For browser is available pre-build UMD version by simply including dist/vuelayers.umd.min.js and vuelayers.umd.min.css files on the page after VueJS.
  Or use from CDN like unpkg.org.

  • https://unpkg.com/vuelayers@latest/dist/vuelayers.umd.min.js
  • https://unpkg.com/vuelayers@latest/dist/vuelayers.umd.min.css

• For NodeJS is available CommonJS version (it is included by default) from dist/vuelayers.cjs.js and appropriate stylesheet dist/vuelayers.cjs.css.
  See below for example of incremental loading of what you need with tools like babel-plugin-component.

• For bundlers like Webpack 2 and Rollup is available ES6 module version from dist/vuelayers.es.js and appropriate stylesheet dist/vuelayers.es.css.

Incremental import

With Webpack 2 or Rollup may be used without additional configuration, simply import what you need. Stylesheet should be imported manually (dist/vuelayers.es.css).

import Vue from 'vue'
import { Map, View, TileLayer, OsmSource } from 'vuelayers'

Vue.use(Map)
Vue.use(View)
Vue.use(TileLayer)
Vue.use(OsmSource)

new Vue({
  el: '#app',
  render: h => h(App)
})

For native CommonJS or bundlers that doesn't support ES6 module system you can use tools like babel-plugin-component for incremental loading.
First, install babel-plugin-component Example Babel config

{
  "presets": [
    ["latest", "stage-2"]
  ],
  "plugins": [["component", [
    {
      "libraryName": "vuelayers",
      "style": true,
      "libDir": "dist/modules"
    }
  ]]]
}

Now you can import only what you need, only that components will be included in final build.

Documentation

TODO

Build Setup

git clone https://gitlab.com/ghettovoice/vuelayers.git
cd vuelayers

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm start

# demo 
npm run demo

# build
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

License

MIT (c) 2017, Vladimir Vershinin
Based on Vue and OpenLayers