Quickstart

Using as ES module

Installation

You can install mapir-vue via npm. Take note that you need to install mapbox-gl as peer dependency:

npm install --save mapir-vue mapbox-gl

Add mapbox CSS file to <head></head> block of your HTML file (e.g. index.html)

<link
  href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
  rel="stylesheet"
/>

Using in browser

Installation

Add Vue, MapboxGL and mapir-vue scripts on your page:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <!-- Mapbox GL CSS -->
    <link
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <!-- mapir-vue CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/mapir-vue@latest/dist/mapir-vue.css"
      rel="stylesheet"
    />
    <!-- Mapbox GL JS -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js"></script>
    <!-- VueJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
    <!-- mapir-vue -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mapir-vue@latest/dist/mapir-vue.min.js"
    ></script>
    <!-- ... -->
  </head>
</html>

All components will be placed in global MapirVue object (MapirVue.mapir etc.)

Migration from version 0.1.x

In version 0.2 you don't need to register MapirVue as Vue plugin.

So you don't need this code anymore:

import MapirVue from "mapir-vue";

Vue.use(VueMapbox, { mapboxgl: Mapbox });

Now you're ready for mapping. See how to create a map.