# VueMapboxMap

A minimalist Vue (opens new window) component wrapping Mapbox GL JS (opens new window) or MapLibre GL (opens new window) for dynamic maps.

In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates.

TIP

See the complementary vue-mapbox-feature (opens new window) repo for dynamic geoJSON features.

# Demo

# Setup for web usage

For direct usage from a webpage, import the Mapbox GL JS script and stylesheet, then import the VueMapboxMap script: this will make the VueMapboxMap component available in the browser:

<!-- mapbox -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet" />
<!-- VueMapboxMap -->
<script src="https://unpkg.com/@benchmark-urbanism/vue-mapbox-map@latest/dist/VueMapboxMap.min.js"></script>

Web usage example (opens new window) and source (opens new window).

# Setup for module usage

See the documentation's demo (opens new window) component for a complete example.

Install via yarn or npm:

yarn add @benchmark-urbanism/vue-mapbox-map

# General Usage

Import the VueMapboxMap component:

import VueMapboxMap from '@benchmark-urbanism/vue-mapbox-map'

Register the component:

components: {
  VueMapboxMap
}

Once registered, the VueMapboxMap tag will be available for use. Use a v-if directive to stall the component until the provided mapbox-gl or maplibre-gl instances are ready to roll.

<VueMapboxMap
  v-if="mapInstance"
  :map="mapInstance"
  :lng="scene.lng"
  :lat="scene.lat"
  :zoom="scene.zoom"
  :pitch="scene.pitch"
  :bearing="scene.bearing"
></VueMapboxMap>

A mapbox-gl or maplibre-gl instance must be provided: these should be installed and instanced in accordance with standard procedures. For example:

mapboxgl.accessToken = this.accessToken
this.mapInstance = new mapboxgl.Map({
  container: 'map-container',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [this.lng, this.lat],
  zoom: this.zoom,
  bearing: this.bearing,
  pitch: this.pitch
})

The lng, lat, zoom, pitch, and bearing props can then be updated dynamically from the data context of the component, for example:

// provide the corresponding data context
data () {
  return {
    mapInstance: null,
    scene: {
      lng: -73.982,
      lat: 40.768,
      baseZoom: 13,
      basePitch: 20,
      baseBearing: 0
    }
  }
}

# API

The component's props / API is as follows:

props: {
  // a mapbox or maplibre instance
  map: {
    type: Object,
    required: true
  },
  // whether to jump, ease, or fly for transitions
  transitionMode: {
    type: String,
    required: false,
    default: 'jump',
    validator: function (value) {
      return ['jump', 'ease', 'fly'].indexOf(value) !== -1
    }
  },
  // longitude (dynamic)
  lng: {
    type: [Number, String],
    required: true
  },
  // latitude (dynamic)
  lat: {
    type: [Number, String],
    required: true
  },
  // zoom (dynamic)
  zoom: {
    type: [Number, String],
    default: 13
  },
  // pitch (dynamic)
  pitch: {
    type: [Number, String],
    default: 60
  },
  // bearing (dynamic)
  bearing: {
    type: [Number, String],
    default: 0
  },
  // around (dynamic)
  around: {
    type: Array,
    default: null,
    validator: function(value) {
      return value.length === 2
    }
  }
},
Last Updated: 5/8/2021, 7:34:39 PM