Skip to content

Instantly share code, notes, and snippets.

@martinrisseeuw
Last active June 2, 2020 04:35
Show Gist options
  • Save martinrisseeuw/96a52024f1f6d9300d1ce3c807badca5 to your computer and use it in GitHub Desktop.
Save martinrisseeuw/96a52024f1f6d9300d1ce3c807badca5 to your computer and use it in GitHub Desktop.
Mapbox Nuxt component
<template>
<div id="map" class="map">
<div class="button-bar">
<button v-on:click="addMapLayer()">terrain</button>
</div>
</div>
</template>
<script>
export default {
name: 'MapBox',
mounted () {
this.createMap()
document.querySelector('.mapboxgl-ctrl-geocoder input').focus()
},
computed: {
location () {
console.log(this.$store.state.location)
}
},
methods: {
createMap: () => {
const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
const MapboxGeocoder = require('@mapbox/mapbox-gl-geocoder')
mapboxgl.accessToken = 'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajBqOXh0anAwMDFkMzNwbW5qMzVuZGo0In0.ltvQzboVtprxfeFAVOw1GA'
// init the map
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/pinpartdev/cj09ooc9g00a12sqpnkum9wcd',
center: [4.7835, 52.3491],
zoom: 6,
pitch: 0,
minZoom: 2,
maxZoom: 20,
attributionControl: false
})
this.map.addControl(new MapboxGeocoder({
accessToken: '<your token>'
}))
}
}
}
</script>
<template>
<div id="map" class="map">
<div class="button-bar">
<button v-on:click="addMapLayer()">terrain</button>
</div>
</div>
</template>
<script>
const mapboxgl = require('mapbox-gl/dist/mapbox-gl.js')
const MapboxGeocoder = require('@mapbox/mapbox-gl-geocoder')
export default {
name: 'MapBox',
mounted () {
this.createMap()
document.querySelector('.mapboxgl-ctrl-geocoder input').focus()
},
computed: {
location () {
console.log(this.$store.state.location)
}
},
methods: {
createMap: () => {
mapboxgl.accessToken = '<your token>'
// init the map
this.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/pinpartdev/cj09ooc9g00a12sqpnkum9wcd',
center: [4.7835, 52.3491],
zoom: 6,
pitch: 0,
minZoom: 2,
maxZoom: 20,
attributionControl: false
})
this.map.addControl(new MapboxGeocoder({
accessToken: 'pk.eyJ1IjoicGlucGFydGRldiIsImEiOiJjajA5bzdsMDIwMDJoMnFzYm0yYWE1amM4In0.oA1sdI9qjUVCOFocnGUtJA'
}))
}
}
}
</script>
@jaeyholic
Copy link

It doesn't work for me. I get
"Cannot set property 'map' of undefined"

I finally opted to use leaflet + mapbox

How? can you direct me on how i can use it? thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment