I am facing an issue with a Vuejs single file component that displays the map properly:
However, none of the default handlers seem to work, even after I have made them explicit during initialization.
Here is the code for the single file component:
<template>
<div id='map'></div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
data () {
return {}
},
created () {
this.createMap()
},
methods: {
createMap: function () {
mapboxgl.accessToken = [myapikey]
var simple = {
'version': 8,
'sources': {
'osm': {
'type': 'vector',
'tiles': ['https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-[myapikey]']
}
},
'layers': [{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#bbccd2'
}
},
{
'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,
minzoom: 1.3,
bearingSnap: 15,
hash: true, // displays coordinates and zoom in URL widget
center: [-74.0073, 40.7124], // Manhattan
zoom: 16,
attributionControl: true,
interactive: true,
scrollZoom: true,
dragRotate: true,
dragPan: true,
doubleClickZoom: true,
pitch: 60
})
this.map.addControl(new mapboxgl.NavigationControl())
this.map.addControl(new mapboxgl.GeolocateControl({position: 'top-left'}))
this.map.addControl(new mapboxgl.AttributionControl({position: 'bottom-right'}))
this.map.addControl(new mapboxgl.ScaleControl({
position: 'bottom-left',
maxWidth: 80,
unit: 'imperial'
}))
}
}
}
</script>
<style>
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
Can anyone provide some insights into why the handlers are not functioning properly? I am able to zoom in and out using the widget, but the handlers do not work. Interestingly, when I initialize the map outside of the component, all handlers work as expected.