Skip to content

Commit 47311ae

Browse files
committed
README updated
1 parent 9aa87ec commit 47311ae

File tree

1 file changed

+17
-4
lines changed

1 file changed

+17
-4
lines changed

README.md

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22

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

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

9-
After, obviosly, you need to install mabbox-gl-geocoder:
9+
Install mabbox-gl-geocoder:
1010

1111
```bash
12+
npm i @mapbox/mapbox-gl-geocoder
1213
```
1314

1415
Then, on plugin registration you need to add plugins option:
@@ -19,7 +20,7 @@ import VueMapbox from 'vue-mapbox'
1920
import Mapbox from 'mapbox-gl'
2021
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder'
2122

22-
Vue.use(VueMapbox, {
23+
Vue.use(VueMapbox, {
2324
mapboxgl: Mapbox,
2425
plugins: [{ mapboxGeocoder: MapboxGeocoder }] // Notice plugins property
2526
})
@@ -42,6 +43,7 @@ Now you can add geocoder control like other controls:
4243
<mgl-geolocate-control position="top-right" />
4344
<mgl-geocoder-control
4445
:accessToken="accessToken"
46+
:input.sync="defaultInput"
4547
@results="handleSearch"
4648
/>
4749
</mgl-map>
@@ -68,7 +70,8 @@ export default {
6870
data() {
6971
return {
7072
accessToken: 'some_token',
71-
mapStyle: 'some_style'
73+
mapStyle: 'some_style',
74+
defaultInput: 'Bodhgaya'
7275
}
7376
},
7477
methods: {
@@ -79,3 +82,13 @@ export default {
7982
}
8083
</script>
8184
```
85+
86+
Options for mapbox-gl-geocoder described [here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md) can be passed via props.
87+
88+
Additionaly you can pass syncronized prop `input` as in example below.
89+
It will be passed to mapbox-gl-geocoder as default input value.
90+
Each time you change value of this prop, mapbox-gl-geocoder `.setInput` method is called.
91+
92+
Same for `proximity` prop that internally invokes mapbox-gl-geocoder `setProximity` method.
93+
94+
Also you can call `query` method to query search and get results programmaticaly

0 commit comments

Comments
 (0)