title: How to display GPX track names (and or descriptions) in a clickable popup when using the Leaflet.TimeDimension plugin
body: <p>my coding knowledge is next to nothing, but I am having heaps of fun trying to learn.</p>
  <p>I have been amending the code from Leaflet TimeDimension example 9: <a href="http://apps.socib.es/Leaflet.TimeDimension/examples/example9.html" rel="nofollow noreferrer">http://apps.socib.es/Leaflet.TimeDimension/examples/example9.html</a> to try and show animal movement through time on a map created in Leaflet.</p>
  <p>I have a self written GPX file and KML track containing the individual animal's lats and longs through time. I have also added the time dimension so that I can play the time slider and my custom icons move across the map as I would like. However, I have now hit a wall.</p>
  <p>I would like to be able to click on a marker (at any stage during the time sliders duration [marker position moves]) and bring up information about that marker in a popup. This would be easy if there were actual markers (marker.bindPopup()) but the markers are created from a track in a GPX file:</p>
  <p><em>example of an animals track in the GPX file</em>:</p>
  <pre><code>...
  &lt;trk&gt;&lt;name&gt;THE DESCRIPTION I WANT TO DISPLAY IN A POPUP&lt;/name&gt;&lt;number&gt;2&lt;/number&gt;&lt;trkseg&gt;
      &lt;trkpt lat=&quot;-40&quot; lon=&quot;120&quot;&gt;&lt;ele&gt;2&lt;/ele&gt;&lt;time&gt;2018-01-06T10:09:57Z&lt;/time&gt;&lt;/trkpt&gt;
      &lt;trkpt lat=&quot;-41&quot; lon=&quot;122&quot;&gt;&lt;ele&gt;2&lt;/ele&gt;&lt;time&gt;2018-01-21T16:45:57Z&lt;/time&gt;&lt;/trkpt&gt;
  &lt;/trkseg&gt;&lt;/trk&gt;
  ...
  </code></pre>
  <p>and I do not know how to call the name or the description of one of these tracks and bind the information in a popup (there are multiple sets of tracks [each with a unique name and description] in the single GPX file).</p>
  <p>There are two main solutions I have been looking into (that I think might be possible) but can't quite get either to work.</p>
  <ol>
  <li>use get_name() from the GPX.js script: <a href="https://github.com/mpetazzoni/leaflet-gpx" rel="nofollow noreferrer">https://github.com/mpetazzoni/leaflet-gpx</a></li>
  </ol>
  <p>It says:</p>
  <blockquote>
  <p>If you want to display additional information about the GPX track, you can do so in the 'loaded' event handler, calling one of the following methods on the GPX object e.target:</p>
  <p>get_name(): returns the name of the GPX track</p>
  </blockquote>
  <p>Here is the demo code: <a href="https://git.nxfifteen.rocks/rocks/core/raw/056ddab410a40496a917cb150be8d92f4cc205cf/map.php" rel="nofollow noreferrer">https://git.nxfifteen.rocks/rocks/core/raw/056ddab410a40496a917cb150be8d92f4cc205cf/map.php</a> but this code is well beyond my understanding and I haven't been able to figure out how to make it work</p>
  <p>I have tried:</p>
  <pre><code>function onClick(e) {
  alert(this.get_name());
  }
  </code></pre>
  <p>but it doesn't work (not sure if its heading in the right direction or not).</p>
  <ol start="2">
  <li>Somehow in the customLayer make the bindPopup link to the name of the GPX track</li>
  </ol>
  <p>Here is the section of code in my .js file that calls and loads the GPX and KML layer:</p>
  <pre><code>var customLayer = L.geoJson(null, {
  pointToLayer: function (feature, latLng) {
      if (feature.properties.hasOwnProperty('last')) {
          return new L.Marker(latLng, {
              icon: icon
          }).bindPopup (&quot;yo&quot;);
      }
      return L.circleMarker(latLng).bindPopup (&quot;hey&quot;);
  }
  });
  
  var gpxLayer = omnivore.gpx('data/data.gpx', null, customLayer).on('ready', function(e) {
  map.fitBounds(gpxLayer.getBounds(), {
      paddingTopLeft: [160, 160],
      paddingBottomRight: [100, 100]
  });
  });
  
  var gpxTimeLayer = L.timeDimension.layer.geoJson(gpxLayer, {
  updateTimeDimension: true,
  addlastPoint: true,
  waitForReady: true
  });
  
  var kmlLayer = omnivore.kml('data/data.kml');
  var kmlTimeLayer = L.timeDimension.layer.geoJson(kmlLayer, {
  updateTimeDimension: true,
  addlastPoint: true,
  waitForReady: true
  });
  
  gpxTimeLayer.addTo(map);
  </code></pre>
  <p>In the variable: customLayer that is linked to the GPX track using omnivore, I can add a clickable popup that says &quot;yo&quot; to every animals marker. I can pause the time slider at any point and when I click a marker &quot;yo&quot; popus up (almost what I need).</p>
  <p>I was wondering if there is some way to, instead of it saying &quot;yo&quot;, tell it to return the name of the track that has been clicked, so that each marker will display its respective name (the name will contain the description I want it to show).</p>
  <p>Sorry this is such a long winded question, and thank you in advance for any solutions, tip or pointers on whether my attempts just need a bit of tweaking, or if there is a different better solution out there.</p>