Comments (3)
I tried calling $_deferredMount()
(see https://github.com/soal/vue-mapbox/blob/master/src/components/layer/GeojsonLayer.js#L104) after the map event style.load
(which seems like it is emitted after a new style is fully loaded). That seemed to work initially (the layer was visible again), but the watchers on the source data were broken, so changes to the source no longer affected the layer.
I tried a variety of things that didn't work and ended up hitting it with a hammer. I put a key property on each geoJsonLayer, and I update it after style.load
, forcing all of the geoJsonLayers to be recreated. Doing this on the map works, too, but that'll mean another map load (which is how usage is billed).
So something like this:
<MglMap
:mapStyle="mapStyle"
@load="onMapLoaded"
>
<MglGeojsonLayer
:sourceId="tripsGeoJson.data.id"
:source.sync="tripsGeoJson"
:replace-source="true"
:layerId="tripsGeoJson.data.id"
:layer="tripLineLayer"
:key="'trips' + mapKey"
/>
</MglMap>
async onMapLoaded(event) {
event.map.on('style.load', async () => {
this.mapKey = Date.now();
});
}
There's probably a cleaner way to do this. If you find it, please share.
from vue-mapbox.
How I do it is I use computed value for the source and use .sync
. When this.features
change the layer is updated automatically with new content.
<template lang="pug">
.......
mgl-geojson-layer(
:layerId="getLayerId"
:sourceId="getSourceId",
:source.sync="getSource"
:layer="getLayer"
)
.......
computed: {
.......
getSource() {
return {
data: {
type: 'FeatureCollection',
features: this.features,
},
};
},
.......
}
......
from vue-mapbox.
I agree this feels like too much of a hack, but it works! The click handler remains intact which is important in my case.
I tried the suggested method of calling this.map.addLayer()
from #146 referencing the geoJsonSource object, but that didn't work. No errors, but the layer wasn't rendered after the style change. I dug a little deeper and found this solution which at least works even if it feels less elegant.
from vue-mapbox.
Related Issues (20)
- Provide a minimum and complete sample of MglGeojsonLayer HOT 1
- Listening on maps events HOT 2
- Bounds prop does not work HOT 1
- MglCanvasLayer not working?
- How to change map languages with using Mapbox GL Language Plugin? HOT 1
- Map layers do not render again past initial load HOT 2
- Way to fire marker click OR map click HOT 1
- Legend not working when full screen HOT 2
- Expose raw MapboxGl object HOT 1
- gridsome build issue
- Setting a layout on addLayer is ignored
- Compatibilitywith Vue3? HOT 1
- Marker placement issue with multiple custom icons
- Is there a possibility to use this without a map? HOT 5
- API -> popup -> events
- New release needed HOT 1
- Zoom issue HOT 3
- Optimize bundle size
- TypeError: Cannot use 'in' operator to search for 'ref' in point HOT 2
- this.$listeners removed in Vue 3
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.