Skip to content

Instantly share code, notes, and snippets.

@timwis timwis/App.vue
Created Feb 19, 2019

Embed
What would you like to do?
Using mapbox-gj-leaflet with Vue2Leaflet
<template>
<LMap id="map" :center="center" :zoom="zoom">
<LTileLayer
:options="layerOptions"
:tile-layer-class="tileLayerClass" />
</LMap>
</template>
<script>
import { LMap, LTileLayer } from 'vue2-leaflet'
import L from 'leaflet'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl-leaflet'
import 'mapbox-gl/dist/mapbox-gl.css'
import 'leaflet/dist/leaflet.css'
window.mapboxgl = mapboxgl // mapbox-gl-leaflet expects this to be global
export default {
components: {
LMap,
LTileLayer
},
data () {
return {
center: [39.9523893, -75.1636291],
zoom: 14,
tileLayerClass: (url, options) => L.mapboxGL(options),
layerOptions: {
accessToken: 'no-token',
style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json'
}
}
}
}
</script>
<style>
#map {
height: 500px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.