vue-mapbox-geocoder's Introduction

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 vue-mapbox-geocoder

Now you can add geocoder control like other controls:

<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle="mapStyle"
  >
    <MglGeocoderControl
      <-- props needed for GeolocateControl -->
      :accessToken="accessToken"
      :input.sync="defaultInput"
      @results="handleSearch"
    />
  </MglMap>
</template>

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

import MglGeocoderControl from 'vue-mapbox-geocoder'

export default {
  name: 'App',

  components: {
    MglMap,
    MglGeocoderControl
  },
  data() {
    return {
      accessToken: 'YOUR_ACCESS_TOKEN',
      mapStyle: 'YOUR_MAP_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.

Recommend Projects