3. Using Mapbox within single file components

Using Mapbox within single file components

  • M

    I would like to implement a Mapbox-gl-js Map within a Quasar Framework (Vue) single file component, but I do not get it working. I found some code on Googlemaps with Vue, and some stuff on Mapbox with React, and try to pull it together from that. With below map initialisation parameters I can get the map showing fine in the index.html (with the mapzen tiles), but want it in the component.

    I try to follow this [https://laracasts.com/discuss/channels/vue/google-maps-and-vue-js](link url) and then adjust it for Mapbox:
    proj/src/components/maplayout.vue :

    <template>
    <quasar-layout>
      <h3>Map</h3>
      <div id='map'></div>
    </quasar-layout>
  </template>
  
  <script>
  import mapboxgl from '../app'
  
  export default {
    data () {
      return {}
    },
    create () {
      this.createMap()
    },
    methods: {
      createMap: function () {
        mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuamFtaW4td3lzcyIsImEiOiJVcm5FdEw4In0.S8HRIEq8NqdtFVz2-BwQog'
        var simple = {
          'version': 8,
          'sources': {
            'osm': {
              'type': 'vector',
              'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4']
            }
          },
          'layers': [{
            'id': 'background',
            'type': 'background',
            'paint': {
              'background-color': '#adddd2'
            }
          }, {
            'id': 'majorroad',
            'source': 'osm',
            'source-layer': 'roads',
            'type': 'line'
          }, {
            'id': 'buildings',
            'type': 'fill',
            'source': 'osm',
            'source-layer': 'buildings'
          }]
        }
  
        // init the map
        this.map = new mapboxgl.Map({
          container: 'map',
          style: simple,
          center: [-1.83, -78.183],
          zoom: 5.5
        })
      }
    }
  }
  </script>
  
  <style>
  </style>

    By the way, for mapbox with webpack you need certain loaders, see:
    [https://mikewilliamson.wordpress.com/2016/02/24/using-mapbox-gl-and-webpack-together/](link url)
    But as I got Mapbox working with Webpack before (without vue), I think I have that ok. Actually I do not get any errors in the browser console (but obviously no map appears).

    In the app.js file I do not know how to deal with the suggested (maybe not necessary as googlemaps needs a callback, dunno about mapbox/mapzen?!):

    var App = window.App = new Vue ({
//code
})

    As in Quasar initialization is done like this:

    Quasar.start(() => {
  Router.start(Vue.extend({}), '#quasar-app')
})

    Which I do not really get…

    Any suggestions how to get this working are welcome!

    0
  • Admin

    Will join the fun in a few days to help you. Thanks for posting this.

    0
  • Admin

    First thing I noticed: You are initializing the map before DOM is injected into the document. Instead of ‘create()’ method use ‘ready()’.

    0
    M
     1 Reply
  • M

    @rstoenescu I follow your suggestion and get Uncaught TypeError: Cannot set property 'accessToken' of undefined. Apparently mapboxgl is undefined. I do import the mapbox-gl library in app.js and then export default mapboxgl and import it in maplayout.vue .

    0
  • Admin

    Check if mapboxgl is undefined in app.js too. Are you doing manipulations on mapboxgl in app.js? If not, import it directly in your layout instead of proxying it through app.js. Do you have a repo I can take a look on?

    0
  • M

    Works now! Thanks for the helpful suggestions!

    See:
    http://stackoverflow.com/questions/39664953/mapbox-gl-in-a-vue-js-single-file-component-quasar-framework/39684830#39684830

    0