leaflet-omnivore with vuejs

[olivierpodio]

<template>
    <div>
        <v-container fluid grid-list-xl pt-0>
            <v-layout row wrap style="height: 100%">
                <v-flex xs12 md12>
                    <v-card>
                        <v-map style="height: 100%" :zoom.sync="zoom" :options="mapOptions" :center="center" :bounds="bounds" :min-zoom="minZoom" :max-zoom="maxZoom" >
                            <v-control-layers :position="layersPosition"></v-control-layers>
                            <v-tile-layer v-for="tileProvider in tileProviders"
                                          layerType="base" :name="tileProvider.name" :visible="tileProvider.visible"
                                          :url="tileProvider.url" :attribution="tileProvider.attribution" :token="token"/>
                            <v-control-zoom :position="zoomPosition" />
                            <v-control-scale :imperial="imperial" />
                            <v-marker v-for="marker in markers" :key="marker.id"
                                      :visible="marker.visible" :draggable="marker.draggable"
                                      :lat-lng="marker.position" @click="alert(marker)" :icon="marker.icon">
                                <v-popup :content="marker.tooltip" />
                                <v-tooltip :content="marker.tooltip" />
                            </v-marker>
                            <v-layer-group :key="track.id" :visible="track.visible" >
                                <v-layer-group :visible="track.markersVisible" >
                                    <v-marker v-for="marker in track.markers" :key="marker.id"
                                              :visible="marker.visible" :draggable="marker.draggable"
                                              :lat-lng="marker.position" @click="alert(marker)" />
                                </v-layer-group>
                                <v-polyline :lat-lngs="track.polyline.points" :visible="track.polyline.visible"
                                            @click="alert(track.polyline)" />
                                <v-geo-json :geojson="geojson"></v-geo-json>
                            </v-layer-group>
                        </v-map>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>

</template>

<script>
    import Vue from 'vue';
    import Vue2Leaflet from "vue2-leaflet";
    import omnivore from "@mapbox/leaflet-omnivore";
    import L from "leaflet";
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
        iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
        iconUrl: require("leaflet/dist/images/marker-icon.png"),
        shadowUrl: require("leaflet/dist/images/marker-shadow.png")
    });

    import Glyph from 'leaflet.icon.glyph';

    var markers1 = [
        { position: { lng:-1.219482, lat:47.413220}, visible: true, draggable: true},
        { position: { lng:-1.571045, lat:47.457809}}
    ];

    var poly1 = [
        { lng:-1.219482, lat:47.413220},
        { lng:-1.571045, lat:47.457809}
    ];

    var customIcon = L.icon({
        iconUrl: 'images/layers.png',
        shadowUrl: ''
    });

    var layer = omnivore.gpx('/static/data/gpx/22718.gpx');

    var convertedWithStyles = tj.kml(kml, { styles: true });
    const tileProviders = [
        {
            name: 'OpenStreetMap',
            visible: false,
            attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        },
        {
            name: 'OpenTopoMap',
            visible: true,
            url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        },
    ];

    export default {
        name: 'leaflet-maps',
        components: {
            vMap: Vue2Leaflet.LMap,
            vTileLayer: Vue2Leaflet.LTileLayer,
            vMarker: Vue2Leaflet.LMarker,
            vPolyline: Vue2Leaflet.LPolyline,
            vLayerGroup: Vue2Leaflet.LLayerGroup,
            vTooltip: Vue2Leaflet.LTooltip,
            vPopup: Vue2Leaflet.LPopup,
            vControlZoom: Vue2Leaflet.LControlZoom,
            vControlAttribution: Vue2Leaflet.LControlAttribution,
            vControlScale: Vue2Leaflet.LControlScale,
            vControlLayers: Vue2Leaflet.LControlLayers,
            vGeoJson: Vue2Leaflet.LGeoJson
        },
        data () {
            return {
                center: [47.413220, -1.219482],
                opacity:0.6,
                token: 'TOKEN HERE',
                mapOptions: { zoomControl: false , attributionControl: true },
                zoom:13,
                minZoom:1,
                maxZoom:20,
                zoomPosition: 'bottomright',
                attributionPosition: 'bottomright',
                layersPosition: 'topleft',
                attributionPrefix: 'Vue2Leaflet',
                imperial: false,
                Positions: ['topleft', 'topright', 'bottomleft', 'bottomright'],
                tileProviders: tileProviders,
                markers:[
                    { id: "m1", position : {lat:51.505, lng:-0.09}, tooltip: "tooltip for marker1", draggable: true, visible: true, icon: L.icon.glyph({
                            prefix: '',
                            glyph: 'A'})
                    },
                    { id: "m2", position : {lat:51.8905, lng:-0.09}, tooltip: "tooltip for marker2", draggable: true, visible: false },
                    { id: "m3", position : {lat:51.005, lng:-0.09}, tooltip: "tooltip for marker3", draggable: true, visible: true },
                    { id: "m4", position : {lat:50.7605, lng:-0.09}, tooltip: "tooltip for marker4", draggable: true, visible: false }
                ],
                track: { id: "s1", markers: markers1, polyline: { points : poly1, visible: true}, visible: true, markersVisible: true},
                bounds: L.latLngBounds(markers1.map((o) => o.position)),
                geojson: layer
            }
        },
        methods: {
            alert(item) {
                alert('this is ' + JSON.stringify(item));
            },
            addMarker: function(event) {
                var newMarker = { position: {lat:50.5505, lng:-0.09}, draggable: true, visible: true};
                this.markers.push(newMarker);
            },
            removeMarker: function(index) {
                this.markers.splice(index, 1);
            },
            centerTrack: function() {
                var bounds = L.latLngBounds(markers1.map((o) => o.position));
                this.bounds = bounds;
            }
        }
    }
</script>

This <v-geo-json :geojson="geojson"></v-geo-json> thing is not working.
Any idea what I'm missing here ?
Does anyone has experience integrating omnivore with vuejs?

I need to load gpx to my map....

Thanks