v-mapbox plugin for mapbox-gl-geocoder support.
First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-mapbox doc
Generate a Personal Access Token with
read:packagesscope
# Skip if you're logged in, else login to GPR using above generated PAT
$ npm login --registry=https://npm.pkg.github.com --scope=@geospoc
# Install mapbox-gl-geocoder v-mapbox and v-mapbox-geocoder:
$ npm install @mapbox/mapbox-gl-geocoder v-mapbox @geospoc/v-mapbox-geocoder --save<template>
<MglMap
:accessToken="accessToken"
:mapStyle="mapStyle"
>
<MglGeocoderControl
:accessToken="accessToken"
:input.sync="defaultInput"
:mapboxgl="mapbox"
container="geocoder_container_id"
position="top-left"
@results="handleSearch"
/>
</MglMap>
</template>
<script>
import mapboxgl from 'mapbox-gl';
import { MglMap } from 'v-mapbox';
import MglGeocoderControl from '@geospoc/v-mapbox-geocoder';
// you can also import this in your main.js or nuxt.config.js
// or even main/global (s)css file
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
export default {
name: 'App',
components: {
MglMap,
MglGeocoderControl
},
data() {
return {
accessToken: 'YOUR_ACCESS_TOKEN',
mapStyle: 'YOUR_MAP_STYLE',
defaultInput: 'Bodhgaya',
mapbox: mapboxgl,
}
},
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.
- Thanks to soal & his original vue-mapbox-geocoder
- All contributors (list).
- All GeoSpoc (team).
MIT © GeoSpoc