Map.vue updateLayerControl() is called too early #622
Description
Related Issues
Description
- In src/components/Map.vue, the call to this.updateLayerControl() needs to occur 1 tick after this.show=true.
- Currently, they are called in the same tick, which means that
this.$refs.basemaps,this.$refs.xyzOverlays, etc. are undefined. - Thus these for loops run over empty lists, doing nothing.
Partial fix:
- You can change mounted() like so:
mounted() {
// Solves https://github.com/radiantearth/stac-browser/issues/95 by showing the map
// only after the next tick so that the page was fully rendered once before we start adding the map
this.$nextTick(() => {
this.show = true;
this.$nextTick(() => {
this.updateLayerControl();
});
});
}
- This calls updateLayerControl() once this.$refs has been populated with elements.
- However, this leads to an error in the loop that was previously not running:
Map.vue:29 TypeError: layer.on is not a function
at NewClass._addLayer (leaflet-src.js:5263:12)
at NewClass.addBaseLayer (leaflet-src.js:5155:10)
at eval (index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Map.vue?vue&type=script&lang=js:246:67)
at Array.forEach (<anonymous>)
at VueComponent.updateLayerControl (index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Map.vue?vue&type=script&lang=js:246:16)
at VueComponent.eval (index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Map.vue?vue&type=script&lang=js:208:14)
at Array.eval (vue.runtime.esm.js:3200:20)
at flushCallbacks (vue.runtime.esm.js:3122:18)
- this loop over
this.$refs.basemapsis broken. (I don't know JS well enough to offer a solution to this error) - It is likely that the loop over other layers is also broken. I did not encounter this, as I believe these were always empty lists, even after the above partial fix.