Vue-mapbox not loading map in vue v2.5.17

Question

I am following the getting started vue-mapbox documentation and fell into some unknown console errors. The getting started link is this https://soal.github.io/vue-mapbox/#/quickstart. My vue application was created using the vue create projectName cli command and for my configs I selected vue-router, vuex, sass, babel, eslint, unit-jest, e2e-cypress. I am unsure what is causing the issue, because I imported the vue-mapbox as a ES module and I am using yarn. However my main.js file looks like this

import Vue from 'vue';
import VueMapbox from 'vue-mapbox';
import Mapbox from 'mapbox-gl';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueMapbox, { mapboxgl: Mapbox });

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

But for some reason I cannot figure out why I am getting these 3 errors.

Error: missing required property "version"
Error: missing required property "sources"
Error: missing required property "layers"

user_7589303 · Answer

If anyone encounters the same issue, I just had it. It's because you need to add these properties in mapStyle in your data. These are mandatory, for example:

accessToken: ACCESS_TOKEN,
mapStyle: {
    "layers": [
          {
              "id": "water",
              "source": "mapbox-streets",
              "source-layer": "water",
              "type": "fill",
              "paint": {
                  "fill-color": "#00ffff"
              }
          }
      ],
      "sources": {
          "mapbox-streets": {
              "type": "vector",
              "url": "mapbox://mapbox.mapbox-streets-v6"
          }
      },
      "version": 8
 }

I found these informations there https://docs.mapbox.com/mapbox-gl-js/style-spec/root/

Vue-mapbox not loading map in vue v2.5.17

1 Answers