vue-mapbox | Vuejs 2 components for interacting with mapbox-gl-js | Frontend Framework library
kandi X-RAY | vue-mapbox Summary
kandi X-RAY | vue-mapbox Summary
Vuejs 2 components for interacting with mapbox-gl-js
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Creates a function that will build the event data and dispatches it .
- creates a function for event listeners
- Applies properties to the target object .
- Spread properties from source to target .
- Swap properties to the target object .
- Spread all properties to the target object .
- Spread all properties of the target .
- Spread properties from source object .
- Applies properties to the target object .
- Spread all properties of the source object .
vue-mapbox Key Features
vue-mapbox Examples and Code Snippets
Community Discussions
Trending Discussions on vue-mapbox
QUESTION
I created a vue component based on MapBox, which is restricted in initializations before it costs money and that is perfectly fine. But I want to reduce reinitializations of my map component for their and my sake. That's why I thought if it is possible to define the component once, pass in some properties and then handle the state via vuex.
Right now, I'd have to import my component and add the data like this:
...ANSWER
Answered 2022-Mar-21 at 12:49You can use <KeepAlive>, a built-in component available in both Vue2 (docs) and Vue3 (docs).
Basically it ensures that a component tagged with keep-alive will only be mounted once. So in your case, you can place the map wherever you want, and the Map will only be initialized once in its mounted hook.
If you need to utilize the moment that your Map gets "focused" or "activated" so to say, then you can utilize the activated and deactivated hooks.
There is an obvious and logical limitation. As long as the parent is alive and mounted, the component's children that are being kept-alive will stay alive. But if the keep-alive component's parent gets unmounted, then all the children will be unmounted aswell even if they were being kept alive. This is all very obvious but I just felt like pointing it out.
SolutionSo, in your use case, you want a component (the component) to be globally kept-alive after its first initialization. I suggest you cache the map element itself and store it in the store. Then on every component onBeforeMount (Composition API) or beforeMount (Options API) hook, manually check if the element is cached, if it is then insert the cached map from the store, otherwise initialize the map.
QUESTION
I have a legend inside the map, is working fine when the map is not full screen, but when the map is full screen the legend is not showing.
To Reproduce
Steps to reproduce the behavior:
- Open the map and see the legend is present and working fine
- Click full screen icon
- The legend is not present
- Click full screen icon again to remove the full screen, now the legend is present and working fine
Expected behavior
The legend should work fine when full screen.
Screenshots
Normal screen, working fine:
Full screen, not showing the legend:
Additional context
Code example available on codesandbox https://codesandbox.io/s/ecstatic-wave-c3qmg. You should open the link https://c3qmg.csb.app/ on another page to be able to see the fullscreen icon.
Code extract:
...ANSWER
Answered 2021-Apr-27 at 00:28By default, the Mapbox GL JS fullscreen control only makes the map container itself full screen. Nothing else on the screen will be visible.
So you need to pass the container element through to Vue-Mapbox's MglFullScreenControl as the container parameter, along these lines:
QUESTION
I am using VueMapbox (0.4.1) to utilize Mapbox GL in a Vue project.
...ANSWER
Answered 2021-Jan-13 at 07:41Despite I don’t know the syntax of Vue.js, the problem you are facing is that you are creating your layers in map.on('load', ... which is an event that happens only once, so when the style change happens, all the layers of the map style (including the ones created by custom code) are removed.
If you want to recreate your layers on style change, you have to do it in the event map.on('style.load', ..., but as said, I don’t see in your vue.js code where that is being done. If you share the part of the code where vue.js is invoking the methods it’ll be easier to help you
QUESTION
Trying to npm install vue-mapbox mapbox-gl and I'm getting a dependency tree error.
I'm running Nuxt SSR with Vuetify, and haven't installed anything related to Mapbox prior to running this install and getting this error.
...ANSWER
Answered 2020-Nov-24 at 13:42Looks like it's a problem with Peer Dependencies in the latest version of npm (v7) which is still a beta version. try with npm install --legacy-peer-deps for detail info check this https://blog.npmjs.org/post/626173315965468672/npm-v7-series-beta-release-and-semver-major
QUESTION
I am using mapbox-gl and vue-mapbox [https://soal.github.io/vue-mapbox/api/#props]
in my vuejs app to display a map. I would like to initialize the map with boundaries that encompass the continental US and when the map loads, I'd like to zoom in to a certain location in the US.
If I include the "center" and "zoom" props in the element, I can get the map will initialize to the continental US. But then, map.fitBounds() doesn't work.
If I don't include the center prop in the element, fitBounds() works, but mapbox uses the center of my style, which is Paris, France. I like crepes, but I don't like this.
...ANSWER
Answered 2020-May-12 at 14:13Sorry I'm not the author of the vue-mapbox library, though I have made a small contribution to it.
Yes you can change the center of a style in Mapbox Studio, here's how :
The problem you mention is because center and zoom properties are synced. But changing the center of the style should work in your case.
QUESTION
I am trying to create multiple markers in Vue using VueMapbox. Currently the map displays correctly but there is only one marker. I think there is something wrong either with my v-for statement or perhaps in the forEach statement. I am trying to place a marker on each location but only the first location is added.
Here is the code for my vue component:
...ANSWER
Answered 2020-Apr-02 at 01:34You're currently doing a v-for on coordinates. It should be on locations.
If locations don't have all the required props a MglMarker needs, transform them in the forEach but that's all you should do in that forEach (if you need it at all). Don't use it to populate this.country, this.cases or this.coordinates. You only want to set those when a marker is clicked (if, and only if, you have any functionality listening to changes on those Vue instance properties).
There might be more details which need to be fixed but, without a minimal reproducible example it's very difficult to spot them. Note: you'll need to create a mapbox public token with readonly permissions for your example to work.
To summarize: Move the functionality from your forEach into a function called showMarker or activateMarker. Call that function whenever a marker is clicked or, if that's what you want, call it on one of the locations to make it the currently active one.
What your code does now is: it makes all markers the currently active one, therefore only the last one iterated will be currently active.
Here's what your MglMarker iterator might look like:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install vue-mapbox
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
