Vue-mapx NPM | npm.io

Vue MapX

A really lite Vue plugin to get a Mapbox GL / Maplibre in your App.

Some content extracted from https://github.com/geospoc/v-mapbox.

Why another library ?

As always, support is the main reason you'll choose a library.

Now we have lighter version with the same awesome Vue integration (and more).

Preview & Demo

a demo is avaliable as a package script. yarn preview or npx preview

content can be adjusted in demo/index.html

dont forget to check the Preview and the sources too.

Installation

Install via npm:

    yarn add vue-mapbox

You should have mapbox or maplibre already present in the scope :

import MyMapGl from "mapbox-gl";
// or
import MyMapGl from "maplibre-gl";

Then, plug vue-mapx into Vue with the reference to the library you want to use :

import VueMapX from "vue-mapx";

Vue.use(VueMapX, MyMapGl, apiKey);

You can set your apiKey once and for all or set it later.

TODO : try and get the apiKey from process.env

API

$mapx

$mapx is your reference to the library. You can access it everywhere.

  export default {
    created: function() {
      new this.$mapx;
    }
  }

the Map component as `mx-map`

<section class="mpx-map-wrapper">
  <mx-map v-bind="map" @load="displayEvent" @dragend="displayEvent" @mousemove="pointerPosition = $event.lngLat">
    <template #loader>{{ message }}</template>
...
  </mx-map>
</section>

map events are forwarded untouched to the app. TODO : allow for conditional bindings
default slot holds map related componnents
#loader slot is displayed until the map is ready.
the component introduces two css classes : mpx-map-wrapper, mpx-map
remember that mapbox & maplibre require you set an absolute height for the parent container.
there is an accessToken option if you do not want to set it globaly

More at :

Markers & Popup as `mx-marker` & `mx-popup`

<mx-map v-bind="map" >
  ...
  <mx-popup v-bind="{ offset: 15, lngLat: { lat: 33.22195, lng: 44.31930 } }">{{  message }}</mx-popup>

  <mx-marker v-bind="{ draggable: true, color: 'red', lngLat: { lat: 33.32442, lng: 44.26575 } }">
    <mx-popup v-bind="{ closeOnMove:true }">{{ message }}</mx-popup>
  </mx-marker>
  
  <mx-popup v-bind="{ closeButton: false, trackPointer: true }">This is a toolip</mx-popup>
...
</mx-map>

Markers can hold a Popup in there default slot.
TODO : #element slot is redirected to the element option, which allow for custom icons.
Popups can be on there own, they need a lngLat attribute.
Popups could be attached to a marker.
with trackPointer:true the popup will follow the pointer device.

more at :

Controls

Every control needs a position on the map canvas, set it with position with one of the four corners eg: top-left, bottom-right ...