Skip to content

Instantly share code, notes, and snippets.

@timwis

timwis/App.vue

Created February 19, 2019 12:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save timwis/eb2c7824bc8dca1727bd1bd96ecf24f0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save timwis/eb2c7824bc8dca1727bd1bd96ecf24f0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timwis created this gist Feb 19, 2019.
    42 changes: 42 additions & 0 deletions App.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    <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>