node package manager

vuelayers

VueLayers

Vue components to work with OpenLayers

Build Status Coverage Status js-standard-style GitHub tag NPM version License Dependencies Dev dependencies

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
  1. CommonJS
  • Full version: dist/vuelayers.cjs.js and dist/vuelayers.cjs.css
  1. 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
  1. 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.

  • 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