https://github.com/soal/vue-mapbox-geocoder

Wrapper for vue-mapbox-geocoder
https://github.com/soal/vue-mapbox-geocoder

Last synced: 12 days ago
JSON representation

Wrapper for vue-mapbox-geocoder

• Host: GitHub
• URL: https://github.com/soal/vue-mapbox-geocoder
• Owner: soal
• Created: 2018-06-24T17:39:41.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:18:17.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T16:34:42.785Z (about 1 month ago)
• Language: JavaScript
• Size: 1.32 MB
• Stars: 13
• Watchers: 3
• Forks: 22
• Open Issues: 34
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue-mapbox-geocoder

[Vue-mapbox](https://github.com/soal/vue-mapbox) plugin for [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) support.

## Usage

First of all you need to install Mapbox GL and Vue-mapbox. [See vue-mapbox doc](https://soal.github.io/vue-mapbox/#/quickstart)

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

```bash

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

```

Now you can add geocoder control like other controls:

```vue

  

    

      :accessToken="accessToken"

      :input.sync="defaultInput"

      @results="handleSearch"

    />

  

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)

    }

  }

}

```

Options for mapbox-gl-geocoder described [here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md) 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.