Not able to show the .gpx on the map

[cesar2]

Hello, I cannot show a gpx on the map.

I installed your library in my project with npm i leaflet-gpx.

I donwloaded a london map (https://pogo.arspoofing.com/gpx/23-london-1-england-united-kingdom) and rename it as london.gpx.

My code: map.component.ts:

import { AfterViewInit, Component, OnInit } from '@angular/core';
import * as L from 'leaflet-gpx';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})

export class MapComponent implements OnInit {
  private map;
  constructor() { }

  ngOnInit() {
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
    }).addTo(map);

    var gpx = 'C:/xampp/htdocs/leaflet-example/src/app/map/london.gpx'; // URL to your GPX file or the GPX itself
    new L.GPX(gpx, {async: true}).on('loaded', function(e) {
      map.fitBounds(e.target.getBounds());
    }).addTo(map);

    this.map = map;
  }
}

map.component.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.min.js"></script>
<div class="map-container">
    <div class="map-frame">
      <div id="map"></div>
    </div>
  </div>

But I am just able to see the map without the track.

Any idea?

Thanks a million

[cesar2]

The problem was the map was not in the Assets folder in Angular