I'm attempting to incorporate a Mapbox-gl-js Map into a single file Vue component within the Quasar Framework, but I'm struggling to make it work. I've come across examples of Googlemaps with Vue and Mapbox with React, and I'm trying to merge them to achieve my desired outcome. While I can display the map successfully in index.html using the map initialization parameters below (with mapzen tiles), I want it to be within the component.
I'm following this guide [ url) and adapting it for Mapbox:
<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 = '{{yourmapboxaccestokenkey}}'
var simple = {
'version': 8,
'sources': {
'osm': {
'type': 'vector',
'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-{{yourmapzenapikey}}']
}
},
'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'
}]
}
// initialize the map
this.map = new mapboxgl.Map({
container: 'map',
style: simple,
center: [-1.83, -78.183],
zoom: 5.5
})
}
}
}
</script>
<style>
</style>
For Mapbox with webpack, specific loaders are required, as detailed here: [ url) I believe I have the necessary setup since I worked with Mapbox and Webpack previously (without Vue), and there are no errors showing up in the browser console (although the map itself is not visible).
In the app.js file, I'm unsure how to handle the suggested code (which may not be necessary for Mapbox or Mapzen, unlike Googlemaps that requires a callback):
var App = window.App = new Vue ({
//code
})
While Quasar initialization is done like this:
Quasar.start(() => {
Router.start(Vue.extend({}), '#quasar-app')
})
This part is a bit confusing to me...
If you have any suggestions on how to get this working, please feel free to share!