Add to your project - abudaan/vega-multi-view GitHub Wiki

vega-multi-view is available both as esnext and commonjs module, and as UMD bundle.

You can install vega-multi-view with npm or yarn:

# yarn
yarn add vega-multi-view

# npm
npm install --save vega-multi-view

Import the module to your javascript code:

import { addViews, removeView } from 'vega-multi-view';

Import the module to your javascript code:

const { addViews, removeView } =  require('vega-multi-view');

You can also add vega-multi-view as UMD bundle to your HTML page:

<script
    src="https://cdn.rawgit.com/abudaan/vega-multi-view/v1.1.5/build/vmv.min.js"
></script>

Then in your plain es5 javascript code:

// vega-multi-view is available via the global variable vmv
var addViews = window.vmv.addViews;

addViews({
    specs: {
        spec1: ['../specs/spec4.json', {
            element: 'container',
            leaflet: true
        }]
    },
    debug: true
}).then(function (result) {
    console.log(result);
}).catch(function (error) {
    console.error(error);
});

The module has a poly-fill for Promise so then and catch are supported in older browsers as well. The module is hosted on rawgit which is a CDN that caches files from Github and serves them with the correct MIME type. Note that rawgit does not guarantee 100% uptime. If your application requires 100% uptime you can download the javascript and css file (see below) and host it from another server.

Both Leaflet and Vega-tooltip provide their own stylesheet and unless your project already includes Leaflet and/or Vega-tooltip you have to add them to your project. Best is to bundle them with the other stylesheets of your project. You can import the files in the main stylesheet of your project from the node_modules folder:

/* sass */
@import ./node_modules/leaflet/dist/leaflet
@import ./node_modules/vega-tooltip/build/vega-tooltip.min

/* less */
@import './node_modules/leaflet/dist/leaflet'
@import './node_modules/vega-tooltip/build/vega-tooltip.min'

Note that you do not accidentally add the .css extension otherwise the css compiler will just add a css @import statement which triggers an extra HTTP request.

You can also add the pre-compiled stylesheet to your HTML page:

<link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.rawgit.com/abudaan/vega-multi-view/v1.1.5/build/vmv.css"
/>