1

See this question Displaying different tracks from one GPX XML file in different colors in Leaflet

If I hover a track the hand transforms into an index pointer but if I click nothing happens, see example Flights map.

How can I add a comment to ta trk or trksg tag in the XML file so that this comment is displayed when clicking on the track ?

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Open Street Map</title>
    <meta charset="utf-8" >
    <link rel="icon" type="image/png" href="OpenStreetMap.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" >
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link rel="stylesheet" href="src/Leaflet.GraphicScale.min.css" >
    <link rel="stylesheet" href="src/stylesheet.css" >

</head>
<body>

    <div id="map"></div>
    <script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js"></script>
    <script src="src/Leaflet.GraphicScale.min.js"></script>
    <script>
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return (results === null)? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

</script>
    <script>

        var Marker = L.icon({
        iconUrl: 'Point.png',

        iconSize:     [27, 32], // size of the icon
        iconAnchor:   [13, 32], // point of the icon which will correspond to marker's location
        popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
        });
        var Lon = getUrlParameter('Lon')
        var Lat = getUrlParameter('Lat')
        var starts = new L.LayerGroup();
        // zomerwandelingen 2018
        L.marker([Lat,Lon], {icon: Marker}).bindPopup(Lat+'<br>'+Lon).addTo(starts);

// ****************** change colors sequentially  *****************

var colors = [
'#3388ff',
'#800000',
'#9a6324',
'#808000',
'#469990',
'#000075',
'#000000', 
'#e6194b',
'#f58231',
'#ffe119',
'#bfef45',
'#3cb44b',
'#42d4f4',
'#4363d8',
'#911eb4',
'#f032e6',
'#a9a9a9',
//'#fabed4',    Pink
//'#ffd8b1',    Apricot
//'#fffac8',    Beige
//'#aaffc3',    Mint
'#dcbeff',
//'#ffffff' White
];

var n = 0;
var customLayer = L.geoJson(null, {
  style: function(feature) {
    if (!feature.properties.id) {
      feature.properties.id = n++;
    }
    var iColor = feature.properties.id % colors.length;
    return { color: colors[iColor] };
  } 
});

        var zomer = new L.LayerGroup();
        var runLayer = omnivore.gpx("../"+getUrlParameter('map'), null, customLayer)
        .on('ready', function() {
        map.fitBounds(runLayer.getBounds());
    })
    .addTo(zomer);


            var osmLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>'
        ;
         var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; ' + osmLink + ' Contributors'
            ;
        var mbAttr = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://mapbox.com">Mapbox</a>',
            mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=TOKEN;

        var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
            satellite  = L.tileLayer(mbUrl, {id: 'mapbox.satellite',   attribution: mbAttr});           
            
         var Stamen_Terrain = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}', {
            attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: 'abcd',
            ext: 'png'
        });     
        var standard = L.tileLayer('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>)',
            maxZoom: 18
        });

        var map = L.map('map', {
            layers: [osmMap, starts, zomer],
        })
        .setView([49.21, 4.2], 8);

        var baseLayers = {  
            "OpenStreetMap": osmMap,                
            "OpenTopoMap": standard,
            "3D map" : Stamen_Terrain,
            "satellite": satellite,
        };

        var overlays = {
            "Startpunten zomer": starts,
            "zomerwandelingen" : zomer
        };

        L.control.layers(baseLayers).addTo(map);

        
        var graphicScale = L.control.graphicScale({
        position:  'bottomright',   
        fill: 'hollow',
        }).addTo(map);
    
    </script>
</body>
</html>
4
  • Coding question on GIS SE site require relevant existing code of what has been tried so far to be included in the question, otherwise question will most likely be closed as not compliant with the GIS SE site policy.
    – TomazicM
    Commented Feb 17, 2021 at 15:09
  • In order not to repeat the same code in my questions I thought it was better to put the link. Is it better to repeat the code ?
    – Hervé
    Commented Feb 17, 2021 at 16:25
  • You can refer to another Question, but each should be standalone.
    – Vince
    Commented Feb 17, 2021 at 16:44
  • I have added my code
    – Hervé
    Commented Feb 17, 2021 at 16:59

1 Answer 1

1

GPX XML schema definition (see https://www.topografix.com/GPX/1/1/) states that <trk> element can have several members that describe it. Leaflet-omnivore plugin you are using to read GPX brings only two of them as feature properties to GeoJSON layer: <name> and <desc>.

You are already using the first one to name your tracks, so you can use the second one for description. This could look like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<gpx>
<trk>
  <name>200307V.xml</name>
  <desc>My track desciption</desc>
  <trkseg>
    <trkpt lat="50.503555275499821" lon="3.930021682754159"></trkpt>
    <trkpt lat="50.503901364281774" lon="3.930838163942099"></trkpt>
.
.
.

You can then access <desc> element in Leaflet through feature.properties.desc.

You can then use onEachFeature option to assign popup with the track description to your tracks:

var customLayer = L.geoJson(null, {
  style: function(feature) {
    if (!feature.properties.id) {
      feature.properties.id = n++;
    }
    var iColor = feature.properties.id % colors.length;
    return { color: colors[iColor] };
  },
  onEachFeature: function(feature, layer) {
    if (feature.properties.desc) {
      layer.bindPopup(feature.properties.desc);
    }
  }
});
7
  • Thanks for your reply but there is probably a mistake somewhere because this gives a white page.
    – Hervé
    Commented Feb 18, 2021 at 10:28
  • I tried it and it works for me, so you must have mistake somewhere. Any errors in the browser debugger console?
    – TomazicM
    Commented Feb 18, 2021 at 10:31
  • Console says Uncaught SyntaxError: Unexpected identifier Map.html?map=VTT/Itineraires/LastYear.xml&Lat=50.50342933871207&Lon=3.93020213609537:82 Line 82 is onEachFeature: function(feature, layer) {
    – Hervé
    Commented Feb 18, 2021 at 10:59
  • This looks like you have error either in GPX XML or in your code. You'll have to learn debugging in browser by setting breakpoints in the code and inspecting variables. Is your nonworking code reachable online?
    – TomazicM
    Commented Feb 18, 2021 at 11:05
  • The non working code is at rudyv.be/OSM/Map2.html Call like this : rudyv.be/OSM/Map2.html?map=PilotePrive/Itineraires/…
    – Hervé
    Commented Feb 18, 2021 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.