Comments (6)
Thanks to @LKajan control events have now been implemented. If you pull down the latest NPM package you should be able to use them. Documentation has also been updated to explain how.
from vue-mapbox-gl.
Also tried:
const geo = this.map.addControl(new mapboxgl.GeolocateControl({ show: true, position: 'top-left', positionOptions: { enableHighAccuracy: true }}));
geo.on('geolocate', this.setAddress);
from vue-mapbox-gl.
Control events are not currently implemented yet. There is a pull request #38 for that though.
from vue-mapbox-gl.
Ok great I will pull that branch and try it out
from vue-mapbox-gl.
I upgraded but it doesn't look like it is working properly. Looking at the pull request, it doesn't look like $emit is implemented correctly. According to the docs the second argument is a callback. In PR #38 it is passing this.$emit('geolocate-geolocate', geolocate, position)
. Instead we would want to probably pass this.$emit('geolocate-geolocate', {event: geolocate, position: position})
so that position isn't dropped from the callback. Maybe I'm just not that familiar with $emit, so if there is something I am missing here please let me know.
Also in this example the final event is called result
, but clearly that isn't documented in the control.
from vue-mapbox-gl.
Hi Todd,
It looks like the example you sent is referring to the Geocoder control which is actually not built into the main Mapbox library so is not implemented in this Vue component. The Geolocation events are working for me. The Vue $emit event uses the Rest Parameter to allow you to define additional arguments that are passed into the listener’s callback function. This allows you to do this.$emit('geolocate-geolocate', geolocate, position)
. If you take a look at app.js and index.html you can see an example of how the Geolocation control works. If you want to use the Geocoder control you can listen for the result
event in the Mapbox load
event.
Hope that is helpful!
Pete
from vue-mapbox-gl.
Related Issues (20)
- Custom Interactive Controls HOT 1
- Mapbox with Quasar; export 'default' (imported as 't') was not found in 'vue'
- cannot get to work with nuxt HOT 1
- v-if not followed while tiles are loading HOT 1
- Trying to use latest 2.0.3 with Mapbox.js error HOT 2
- printing the map issue
- "For larger projects VueMapbox may be a better fit." Don't say that HOT 2
- importing Marker doesn't work HOT 1
- Is there a way to trigger() geolocation programmatically? HOT 1
- Cannot find module 'vue'
- Adding markers stop the map from drawing HOT 4
- Making width 100% so it fills space in responsive screen size HOT 1
- Access to mapbox-gl-draw events
- Safari: [Vue warn]: Error in mounted hook: "ReferenceError: Can't find variable: mapboxgl"
- how to add a geocoder?
- Error: when testing with `jest`
- How to add markers to the map
- mouseenter and mouseleave for fills HOT 1
- error Popup example not fount HOT 1
- How to add custom icons with Markers?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-mapbox-gl.