Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/geospoc/v-mapbox-geocoder
Wrapper for vue-mapbox-geocoder
https://github.com/geospoc/v-mapbox-geocoder
geocoder mapbox-geocoding mapbox-gl mapbox-gl-js vue2 vuejs2
Last synced: about 1 month ago
JSON representation
Wrapper for vue-mapbox-geocoder
- Host: GitHub
- URL: https://github.com/geospoc/v-mapbox-geocoder
- Owner: geospoc
- License: mit
- Fork: true (soal/vue-mapbox-geocoder)
- Created: 2019-07-18T09:57:37.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-21T00:58:58.000Z (over 1 year ago)
- Last Synced: 2024-05-28T16:24:49.808Z (5 months ago)
- Topics: geocoder, mapbox-geocoding, mapbox-gl, mapbox-gl-js, vue2, vuejs2
- Language: JavaScript
- Homepage: https://v-mapbox-geocoder.geospoc.io/
- Size: 3.63 MB
- Stars: 8
- Watchers: 1
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# v-mapbox-geocoder 🌎
[](https://github.com/geospoc/v-mapbox-geocoder/packages) [](https://github.com/geospoc/v-mapbox-geocoder/actions?query=workflow%3A%22Ship+js+trigger%22) [](https://github.com/geospoc/v-mapbox-geocoder/releases) [](https://github.com/algolia/shipjs) [](https://david-dm.org/geospoc/v-mapbox-geocoder?type=peer) [](http://david-dm.org/geospoc/v-mapbox-geocoder?type=dev) [](https://github.com/geospoc/v-mapbox-geocoder) [](https://github.com/geospoc/v-mapbox-geocoder/master)  [](https://github.com/geospoc/v-mapbox-geocoder/graphs/contributors) [](https://deepscan.io/dashboard#view=project&tid=9381&pid=11871&bid=177149)
[v-mapbox](https://github.com/vinayakkulkarni/v-mapbox) plugin for [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) support.
## Setup
First of all you need to install `mapbox-gl-geocoder` and `v-mapbox`. [See v-mapbox doc](https://v-mapbox.netlify.app)
> _Generate a [Personal Access Token](https://github.com/settings/tokens/new) with `read:packages` scope_
``` bash
# 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
```
## Usage
```html
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)
}
},
};
```
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.
## Credits
- Thanks to [soal](https://github.com/soal) & his original [vue-mapbox-geocoder](https://github.com/soal/vue-mapbox-geocoder)
- All contributors ([list](https://github.com/geospoc/v-mapbox-geocoder/contributors)).
- All GeoSpoc ([team](https://github.com/orgs/Geospoc/people)).
## License
MIT © [GeoSpoc](https://geospoc.com)