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+
77First 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
1415Then, on plugin registration you need to add plugins option:
@@ -19,7 +20,7 @@ import VueMapbox from 'vue-mapbox'
1920import Mapbox from ' mapbox-gl'
2021import 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