diff --git a/src/components/VMapbox.vue b/src/components/VMapbox.vue index b324db2..fc48a30 100644 --- a/src/components/VMapbox.vue +++ b/src/components/VMapbox.vue @@ -3,7 +3,8 @@ The main div will receive class `mapboxgl-map`; you can use that class for styling. Note: If you put a id on the main element it won't work with multiple maps on one page (for example with compare plugin). --> -
+
+ @@ -39,7 +40,8 @@ export const props = { // always this component // @QUESTION :: This gets overridden by default, do we really need this? container: { - type: [HTMLElement, String] + type: [HTMLElement, String], + default: null }, minZoom: { type: Number @@ -172,16 +174,24 @@ export default { // children.sort(child => { // return child.key // }) - this.$children.forEach(child => { - child.deferredMountedTo(this.map) - }) + console.log(this, this.$slots.default()) + const children = this.$slots.default() + children.forEach(child => { + console.log(child) + if (_.has(child, 'type.methods')) { + child.type.methods.deferredMountedTo(this.map) + } + }) }, refreshLayers() { - this.$children + const children = this.$slots.default() + children .filter(child => child.$options.name === 'v-mapbox-layer') .forEach(child => { - child.deferredMountedTo(this.map) + if (_.has(child, 'type.methods')) { + child.type.methods.deferredMountedTo(this.map) + } }) }, @@ -198,7 +208,7 @@ export default { // Gather all options to inialize the mapbox map let options = propsDefaults(props, this.$props) - options.container = this.$el + options.container = this.container || this.$el // Note that we don't add `this.map` to data. // For performance reasons, it does not have to be observed. See: @@ -215,14 +225,14 @@ export default { bindMapEvents(this, this.map, MAP_EVENTS) // Once the map is loaded, add all layers that were present during mount time - this.$on('mb-load', () => { + this.map.on('load', () => { this.addLayers() }) // If the style was changed, wait for the style to be loaded and re-add all the layers // https://github.com/mapbox/mapbox-gl-js/issues/4006 - this.$on('style:update', () => { - this.$once('mb-style.load', () => { + this.map.on('styledata', () => { + this.map.on('style.load', () => { this.refreshLayers() }) }) @@ -231,7 +241,7 @@ export default { // Create an observer on this object // Call resize on the map when we change szie let observer = new ResizeObserver(this.resize) - observer.observe(this.$el) + observer.observe(this.$refs.element) this.resizeObserver = observer }, diff --git a/src/components/v-mapbox-layer.js b/src/components/v-mapbox-layer.js index 9ba80c4..bc57b01 100644 --- a/src/components/v-mapbox-layer.js +++ b/src/components/v-mapbox-layer.js @@ -7,6 +7,8 @@ export default { render: () => null, + expose: ['deferredMountedTo'], + props: { options: { type: Object, @@ -33,6 +35,7 @@ export default { methods: { deferredMountedTo() { + console.log('Hello') this.renderLayer(); },