Skip to content

Instantly share code, notes, and snippets.

@timwis
Created February 19, 2019 12:51
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save timwis/eb2c7824bc8dca1727bd1bd96ecf24f0 to your computer and use it in GitHub Desktop.
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>
@lostdesign
Copy link

Thanks, I was looking for just that! Your Style Json doesn't load though, but people need to replace it with their own anyways. At least I can now use vector maps and tileserver-gl.

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