0

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

I can display several tracks located in one XML file over an OSM map, example Flights map.

Now the different tracks are a little interlaced. Is it possible to highlight a track when hovering it?

This 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>
8
  • Yes, it is possible. But to make question stand, please include relevant existing code, otherwise it will most likely be closed as not compliant with the GIS SE site policy.
    – TomazicM
    Commented Feb 17, 2021 at 14:29
  • Have a look at Adding Interaction section of official Leaflet example: leafletjs.com/examples/choropleth
    – TomazicM
    Commented Feb 17, 2021 at 18:41
  • Thank you, I understand how to add intercation for MouseOn, MouseOut and clik; I don't understand how I should use L.geoJson(statesData).addTo(map); for my tracks.
    – Hervé
    Commented Feb 18, 2021 at 10:50
  • Just add onEachFeature option to your customLayer GeoJSON definition and there add desired interaction as in the quoted example.
    – TomazicM
    Commented Feb 18, 2021 at 11:02
  • This almost works : the track is highlighted when I hoover it, but is not dis-highlighted when I leave it; I understand I must declare the variable geojson before the function resetHighlight(e) { geojson.resetStyle(e.target);} but I must have missed something; and also bindPopup does not work anymore : can you have a last look at rudyv.be/OSM/Map2.html ?
    – Hervé
    Commented Feb 18, 2021 at 15:23

1 Answer 1

0

Obviously if I declare var **customLayer** = L.geoJson (...,

then that I use **geoJson**.resetStyle (e.target); as in the example it does not work.

I have to use **customLayer**.resetStyle (e.target);

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.