Map tiles mostly disappear on zoom of standard map

[chriszrc]

I can post all the code, but it's really just the standard setup of the basic map. I've never encountered this with other mapbox maps:

Appreciate any ideas of what might be going wrong. I can pan around on the initial zoom level and everything is fine, but as you can see in the recording, once I zoom in, the map gets weird-

[chriszrc]

I made some progress with this, seems that it's somehow related to vuex. I can use the map normally until I commit the map object to the vuex state. Then everything goes haywire, like in the video above. I've disabled everything that the app does with the map once it's in the state store. I can't for the life of me figure out why just adding the map object to the state store would cause this problem

[soal]

It's not that simple. It's generally bad idea to add to Vuex or component's data anything but primitive types and plain objects. Vue adds getters and setters to every property and it may break Map object (for example if getters/setters already used for some purpose).
If you want to store map object, store it as non-reactive in component or just add to $store object, like so:
in component:

export default {
  // …component code…
  created() {
    this.map = null
  },
  methods: {
   onMapLoaded(event) {
     // in component
     this.map = event.map
     // or just to store if you want have access from other components
     this.$store.map = event.map
   }
  }
}

[chriszrc]

Hi,

Thank you, yes, that explains it. I'm using typescript, so I can't just extend the $store in that way, but I created a shared service the store and components can share, and it works great. Closing-

[vinayakkulkarni]

@chriszrc Can you share a repro link? I'm facing a similar issue.

[chriszrc]

This issue was solved by not keeping the map object in a vuex store

…

On Fri, May 17, 2019, 3:08 AM Vinayak Kulkarni ***@***.***> wrote: @chriszrc <https://github.com/chriszrc> Can you share a repro link? I'm facing a similar issue. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#69?email_source=notifications&email_token=AGEBMKLAWZX4T35DIYUPNOTPVZKXPA5CNFSM4GMDBDMKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVT57ZY#issuecomment-493346791>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGEBMKNS23EY4DIIS3VF723PVZKXPANCNFSM4GMDBDMA> .

[vinayakkulkarni]

This issue was solved by not keeping the map object in a vuex store

I tried both options, still same issues if tiles aren't satellite

Ref: #111 (comment)

[crow7m]

In case this will help anyone, this solved my issues with multiple maps in one app, and their broken style:
geoMapLoaded(map) { let self = this; map._isVue = true; self.setEntityGeolocationMap(map); self.getEntityGeolocationMap.resize(); },

Actually setting isVue to true solved this map._isVue = true;

[thom4parisot]

Actually setting isVue to true solved this map._isVue = true;

It solved the issue on my side. My component has vuex-mapped properties, although this.map is not. But maybe vuex was messing with it anyway?

edit: actually, as stated in vuejs/vue#2637 (comment)

1. If you need to skip observation for an object/array in data, use Object.freeze() on it;
2. You don't need to put an object in data in order to access it on this. If you simply attach it to this in the created() hook, it doesn't get observed at all.

Declaring the property solely in the created() lifecycle method fixed the glitch.