leaflet-omnivore with vuejs

Nobody has claimed this yet.

```

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;
}
}
}

```

This `` 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

Start with the Vue component shown in the issue, especially the omnivore.gpx('/static/data/gpx/22718.gpx') layer and the v-geo-json binding. Check what value is assigned to geojson and how the map component expects it; done means the GPX data renders on the Vue map.

Written by the indexing model from the issue text.