No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Using Mapbox within single file components

    Help
    2
    6
    3230
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MusicForMellons last edited by

      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!

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

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

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by

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

          M 1 Reply Last reply Reply Quote 0
          • M
            MusicForMellons @rstoenescu last edited by

            @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 .

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              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?

              1 Reply Last reply Reply Quote 0
              • M
                MusicForMellons last edited by

                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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post