vue-mapbox-geocoder

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

vue-mapbox-geocoder

★ 13 Open GitHub ↗

Wrapper for vue-mapbox-geocoder

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle="mapStyle"
  >
    <MglGeocoderControl
      <-- props needed for GeolocateControl -->
      :accessToken="accessToken"
      :input.sync="defaultInput"
      @results="handleSearch"
    />
  </MglMap>
</template>

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](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.

vue-mapbox-geocoder

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README