title: Leaflet map is not showing the line from gpx file
body: <p>I am having a weird issue with the leaflet.js map. For some reason, the trail line does not appear on the map even though it shows all the markers. It works fine in a standalone simple html page but whenever I embed this in the bootstrap template it breaks. My MVC .chtml page has the following code and jquery is referenced from the Layout page.</p>
  
  <pre><code>     &lt;script src="https://maps.googleapis.com/maps/api/js?key=&lt;key&gt;" async defer&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /&gt;
      &lt;script src="http://unpkg.com/leaflet@1.2.0/dist/leaflet.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css"&gt;
      &lt;script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"&gt;&lt;/script&gt;
      &lt;script src='~/Scripts/Leaflet.GoogleMutant.js'&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/leaflet.markercluster-src.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/MarkerCluster.css" rel="stylesheet" /&gt;
      &lt;link href="~/Content/MarkerCluster.Default.css" rel="stylesheet" /&gt;
      &lt;script src="~/Scripts/app/GPX.js"&gt;&lt;/script&gt;
       &lt;div id="mapView"&gt;
                          &lt;!-- This is the div that will contain the Google Map --&gt;
                          &lt;div id="lmap"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
  &lt;scripts&gt;
      $(function(e){
  
          var lcontrol = new L.control.layers();
          var eb = new L.control.layers();
          //initialize map
          var map = null;
          var markers = [];
          var latlng = L.latLng(-30.81881, 116.16596);
         //set the layers
          var roadMutant = L.gridLayer.googleMutant({ type: 'roadmap' });
          var satMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'satellite' });
          var terrainMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'terrain' });
          var hybridMutant = L.gridLayer.googleMutant({ maxZoom: 24, type: 'hybrid' });
  
  
          map = new L.map('lmap', {
              center: latlng, zoom: 6, maxZoom: 18, scrollwheel: false, layers: [roadMutant],
              streetViewControl: false, scrollWheelZoom: false, 
          });
  
          var track = new L.GPX("/media/fells_loop.gpx", {
              async: true
          }).on("loaded", function (e) {
              map.fitBounds(e.target.getBounds());
          });
          map.addLayer(track);
  
          map.on('focus', function () { map.scrollWheelZoom.enable(); });
          map.on('blur', function () { map.scrollWheelZoom.disable(); });
  
      var baseLayers = {
              "Streets": roadMutant,
              "Satellite": satMutant,
              "Terrain": terrainMutant,
              "Hybrid": hybridMutant,
  
          };
  
      map.addControl(new L.Control.Layers(baseLayers, { 'GPX': track }, { collapsed: true }));
  }
  &lt;/scripts&gt;
  </code></pre>
  
  <p>The clustering use jQuery get request to fetch data like below -</p>
  
  <pre><code> markers = L.markerClusterGroup({ chunkedLoading: true, spiderfyOnMaxZoom: true, maxClusterRadius: 100, showCoverageOnHover: true });
  
          //map.eachLayer(function (layer) {
          //    map.removeLayer(layer);
          //});
          L.Map.include({
              'clearLayers': function () {
                  this.eachLayer(function (layer) {
                      this.removeLayer(layer);
                  }, this);
              }
          });
  
      //clear markers and remove all layers
          markers.clearLayers();
          var h = $(window).height();
          var w = $(window).width();
  
      var atype = $('input:checkbox:checked.gp1').map(function () {
          return this.value;
      }).get(); // ["18", "55", "10"]
  
      var st = atype + "";
      //fetch data
      $.ajax({
          type: "GET",
          url: appUrl + "/Home/map", 
          data: {'atype': st},
          dataType: 'json',
          contentType: 'application/x-www-form-urlencoded',
          success: function (data) {
  
              $.each(data, function (i, item) {
                  var img = (item.IconUrl).replace("~", "");
                  var dpawIcon = L.icon({ iconUrl: appUrl + img, iconSize: [42, 42] });
                  var id;
                  var marker = L.marker(L.latLng(item.Latitude, item.Longitude), { icon: dpawIcon }, { title: item.Name });
                  var content = "&lt;div class='infoDiv'&gt;&lt;h3&gt;&lt;img src='" + appUrl + img + "' width='24' /&gt;" + item.Name + "&lt;/h3&gt;&lt;p&gt;" + item.Title + "&lt;/p&gt;&lt;a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'&gt;Details&lt;/a&gt;&lt;/div&gt;";
                  id = marker._leaflet_id;
                  marker.bindPopup(content);
                  markers.addLayer(marker);
  
              });
          }
  
      })
     .done(function () {
         $(".loadingOverlay").hide();
  
        // $("#lmap").height(h-100).width(w-210);
         map.invalidateSize(true);
  
     });
  </code></pre>
  
  <p>Thanks in advance for your help.</p>
  
  <p><a href="https://i.stack.imgur.com/aamZu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aamZu.png" alt="enter image description here"></a></p>