forked fromsoal/vue-mapbox-geocoder
- Notifications
You must be signed in to change notification settings - Fork3
Wrapper for vue-mapbox-geocoder
License
NotificationsYou must be signed in to change notification settings
geospoc/v-mapbox-geocoder
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
v-mapbox plugin formapbox-gl-geocoder support.
First of all you need to installmapbox-gl-geocoder andv-mapbox.See v-mapbox doc
Generate aPersonal 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>importmapboxglfrom'mapbox-gl';import{MglMap}from'v-mapbox';importMglGeocoderControlfrom'@geospoc/v-mapbox-geocoder';// you can also import this in your main.js or nuxt.config.js// or even main/global (s)css fileimport'@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'exportdefault{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 describedhere can be passed via props.
Additionaly you can pass syncronized propinput 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 forproximity prop that internally invokes mapbox-gl-geocodersetProximity method.
Also you can callquery method to query search and get results programmatically.
- Thanks tosoal & his originalvue-mapbox-geocoder
- All contributors (list).
- All GeoSpoc (team).
MIT ©GeoSpoc
About
Wrapper for vue-mapbox-geocoder
Topics
Resources
License
Stars
Watchers
Forks
Languages
- JavaScript100.0%