Skip to content

Instantly share code, notes, and snippets.

@Akaryatrh
Forked from anonymous/fiddle.css
Created March 11, 2018 23:16
Show Gist options
  • Save Akaryatrh/8a821dc69009b85a8fa869c1cd985793 to your computer and use it in GitHub Desktop.
Save Akaryatrh/8a821dc69009b85a8fa869c1cd985793 to your computer and use it in GitHub Desktop.
.map {
width: 100%;
height: 500px;
}
<div class="" id="app">
<router-link to="/">Home</router-link>
<router-link to="/map">Map</router-link>
<router-view></router-view>
</div>
let cachedMap = null
mapboxgl.accessToken = "pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA"
const Foo = { template: '<div>foo</div>' }
const Map = {
created () {
console.log('cached map?', cachedMap)
},
mounted () {
if (cachedMap === null) {
new mapboxgl.Map({
container: this.$refs.map, // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
})
} else {
this.$refs.mapContainer.appendChild(cachedMap)
}
},
beforeDestroy () {
if (cachedMap === null) {
cachedMap = this.$refs.map
}
},
render (h) {
let mapEl = []
if (cachedMap === null) {
mapEl.push(h('div', {
ref: 'map',
attrs: {
class: 'map'
}
}))
}
return h('div', {
attrs: {
class: 'map-container'
},
ref: 'mapContainer'
}, mapEl)
}
}
const routes = [
{ path: '/', component: Foo },
{ path: '/map', component: Map }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
const app = new Vue({
el: '#app',
router
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment