Package Exports

vue-mapbox-geocoder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-mapbox-geocoder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue-mapbox-geocoder

Vue-mapbox plugin for mapbox-gl-geocoder support.

Usage

First of all you need to install Mapbox GL and Vue-mapbox. See vue-mapbox doc

Install mabbox-gl-geocoder and vue-mapbox-geocoder:

npm i @mapbox/mapbox-gl-geocoder vue-mapbox-geocoder

Then, on plugin registration you need to add plugins option:

import Vue from 'vue'
import VueMapbox from 'vue-mapbox'
import Mapbox from 'mapbox-gl'
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'

Vue.use(VueMapbox, {
  mapboxgl: Mapbox,
  plugins: [{ mapboxGeocoder: MapboxGeocoder }] // Notice plugins property
})

new Vue({
  el: '#app',
  render: h => h(require('./App'))
})

Now you can add geocoder control like other controls:

<template>
  <mgl-map
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
  >
    <mgl-navigation-control position="top-right"/>
    <mgl-geolocate-control position="top-right" />
    <mgl-geocoder-control
      :accessToken="accessToken"
      :input.sync="defaultInput"
      @results="handleSearch"
    />
  </mgl-map>
</template>

<script>
import {
  MglMap,
  MglNavigationControl,
  MglGeolocateControl
} from 'vue-mapbox'

import MglGeocoderControl from 'vue-mapbox-geocoder'

export default {
  name: 'App',

  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglGeocoderControl
  },
  data() {
    return {
      accessToken: 'some_token',
      mapStyle: 'some_style',
      defaultInput: 'Bodhgaya'
    }
  },
  methods: {
    handleSearch(event) {
      console.log(event)
    }
  }
}
</script>

Options for mapbox-gl-geocoder described here can be passed via props.

Additionaly you can pass syncronized prop input as in example below. It will be passed to mapbox-gl-geocoder as default input value. Each time you change value of this prop, mapbox-gl-geocoder .setInput method is called.

Same for proximity prop that internally invokes mapbox-gl-geocoder setProximity method.

Also you can call query method to query search and get results programmatically.