Non-mapbox basemaps tiles get disappeared

[vinayakkulkarni]

Here's my data object:

data() {
    return {
      map: null,
      accessToken: null, // your access token. Needed if you using Mapbox maps
      mapStyle:`https://maps.tilehosting.com/styles/voyager/style.json?key={KEY}`, // your map style
    };
  },

When the map is zoomed, the tiles aren't being fetched.
Demo: https://bit.ly/soal-vue-mapbox

[vinayakkulkarni]

bump

[vinayakkulkarni]

🛎

[ajotka]

I have the same issue.
And only sattelite-v9 style works properly - I don't know why.

[soal]

Anything in console?

[vinayakkulkarni]

Anything in console?

Nope. All clear

Also, i tried using mapbox styles, as @ajotka said, only mapbox://styles/mapbox/satellite-streets-v9 works correctly...!

[vinayakkulkarni]

With Vuex:

<template>
  <MglMap
    :access-token="accessToken"
    :map-style.sync="mapStyle"
    @load="onMapLoaded"
  >
    <MglNavigationControl position="bottom-right" />
    <MglGeolocateControl position="top-right" />
    <MglScaleControl position="bottom-left" />
  </MglMap>
</template>

<script>
import {
  MglMap,
  MglNavigationControl,
  MglGeolocateControl,
  MglScaleControl,
} from 'vue-mapbox';
import { mapState } from 'vuex';

export default {
  name: 'DashboardMap',
  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglScaleControl,
  },
  data() {
    return {
      accessToken: process.env.mapToken,
      mapStyle: 'mapbox://styles/mapbox/satellite-streets-v9',
    };
  },
  computed: {
    ...mapState('map', ['map']),
  },
  beforeDestroy() {
    this.$store.commit('map/destroyMap');
  },
  methods: {
    onMapLoaded(event) {
      this.$store.commit('map/initializeMap', event.map);
    },
  },
};
</script>

Without Vuex:

<template>
  <MglMap
    :access-token="accessToken"
    :map-style.sync="mapStyle"
    @load="onMapLoaded"
  >
    <MglNavigationControl position="bottom-right" />
    <MglGeolocateControl position="top-right" />
    <MglScaleControl position="bottom-left" />
  </MglMap>
</template>

<script>
import {
  MglMap,
  MglNavigationControl,
  MglGeolocateControl,
  MglScaleControl,
} from 'vue-mapbox';

export default {
  name: 'DashboardMap',
  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglScaleControl,
  },
  data() {
    return {
      localMap: null,
      accessToken: process.env.mapToken,
      mapStyle: 'mapbox://styles/mapbox/satellite-streets-v9',
    };
  },
  created() {
    this.localMap = null;
  },
  beforeDestroy() {
    this.localMap = null;
  },
  methods: {
    onMapLoaded(event) {
      this.localMap = event.map;
    },
  },
};
</script>

[vinayakkulkarni]

bump

[TheNoim]

Experienced the same issue

[vinayakkulkarni]

Ok, after removing any and all map related variables from data(), it seems to be working. But I'm unable to access the map object :(

[danielholmes]

This Stack Overflow question appears to be related: https://stackoverflow.com/questions/50824353/mapbox-style-changes-breaks-on-zoom-when-a-layer-is-added

[danielholmes]

@vinayakkulkarni My temporary solution was to access the map via refs. e.g.:

<mgl-map ref="mglMap" ... />

this.$refs.mglMap.map.fitBounds(...);

[maximelebreton]

After hours spent on this problem, here is my working solution to access map instance from a store (thanks to vuejs/vue#2637 (comment) and vuejs/vue#2637 (comment)):

const state = reactive({
  map: Object.freeze({ wrapper: /* PUT THE MAP INSTANCE HERE */ });
});

Here is an example with Vue Composition Api:

index.js

import { reactive, computed } from "@vue/composition-api";

export const state = reactive({
  map: null
});

export const setMap = (map) => {
  state.map = Object.freeze({ wrapper: map});
};

export const getMap = computed(() => state.map.wrapper);

export const initMap = (event) => {
  setMap(event.map);

  // now you can access to map instance from the "getMap" getter!
  getMap.value.addSource("satellite-source", {
    type: "raster",
    url: "mapbox://mapbox.satellite",
  }); 
  getMap.value.addLayer({
    id: "satellite-layer",
    type: "raster",
    source: "satellite-source"
  });
};

App.vue

<template>
  <MglMap :accessToken="..." :mapStyle="..." @load="onMapLoaded" />
</template>


<script>
import { defineComponent } from "@vue/composition-api";
import { MglMap } from "vue-mapbox";
import { initMap } from "./index.js";

export default defineComponent({
  components: {
    MglMap
  },
  setup() {
    const onMapLoaded = (event) => {
      initMap(event);
    }

    return { onMapLoaded };
  }
});
</script>