Skip to main content
Geographic Information Systems

Return to Question

deleted 17 characters in body; edited tags
Source Link
PolyGeo ♦
PolyGeo ♦
  • 65.4k
  • 29
  • 114
  • 345
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'


// please replace this with your own mapbox token!
var token = 'my_token_here';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;

var OpenStreetMap_Mapnick=L.tileLayer(mapboxUrl, {id: 'mapbox/light-v9', attribution: mbAttr})

var map = L.map('mapid', {
        center: [45.43538, 12.33297],
        zoom: 14,
    layers: [OpenStreetMap_Mapnick]
});

var control = L.control.layers(null, null).addTo(map);

for (let i = 1; i <= 7; i++) {
  new L.GPX('gpx/MuVe_7D/MuVe_7D_T'+i+'.gpx', {
    async: true,
    marker_options: {
      startIconUrl: 'assets/pins/Pin_ATG.png',
      endIconUrl: 'assets/pins/Pin_CUR.png',
      shadowUrl: 'assets/pins/Pin_shadow.png'
    }
  }).on('loaded', function(e) {
    var gpx = e.target;
    control.addOverlay(gpx, 'gpr_GPX'+i);
  }).addTo(map);
}


$("#GPX1").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(gpr_GPX1)) {
        $(this).removeClass('selected');
        map.removeLayer(gpr_GPX1);
    } else {
        map.addLayer(gpr_GPX1);
        $(this).addClass('selected');
   }
});

How can I solve it? I

I am using this snippet of code to show/hide layers but it doesn't work. The curious fact about it is that if I plot a POI the show/hide functionality from the link works, it seems I am doing something wrong defining the layers.

Thanks!

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'


// please replace this with your own mapbox token!
var token = 'my_token_here';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;

var OpenStreetMap_Mapnick=L.tileLayer(mapboxUrl, {id: 'mapbox/light-v9', attribution: mbAttr})

var map = L.map('mapid', {
        center: [45.43538, 12.33297],
        zoom: 14,
    layers: [OpenStreetMap_Mapnick]
});

var control = L.control.layers(null, null).addTo(map);

for (let i = 1; i <= 7; i++) {
  new L.GPX('gpx/MuVe_7D/MuVe_7D_T'+i+'.gpx', {
    async: true,
    marker_options: {
      startIconUrl: 'assets/pins/Pin_ATG.png',
      endIconUrl: 'assets/pins/Pin_CUR.png',
      shadowUrl: 'assets/pins/Pin_shadow.png'
    }
  }).on('loaded', function(e) {
    var gpx = e.target;
    control.addOverlay(gpx, 'gpr_GPX'+i);
  }).addTo(map);
}


$("#GPX1").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(gpr_GPX1)) {
        $(this).removeClass('selected');
        map.removeLayer(gpr_GPX1);
    } else {
        map.addLayer(gpr_GPX1);
        $(this).addClass('selected');
   }
});

How can I solve it? I am using this snippet of code to show/hide layers but it doesn't work. The curious fact about it is that if I plot a POI the show/hide functionality from the link works, it seems I am doing something wrong defining the layers.

Thanks!

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'


// replace this with your own mapbox token!
var token = 'my_token_here';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;

var OpenStreetMap_Mapnick=L.tileLayer(mapboxUrl, {id: 'mapbox/light-v9', attribution: mbAttr})

var map = L.map('mapid', {
        center: [45.43538, 12.33297],
        zoom: 14,
    layers: [OpenStreetMap_Mapnick]
});

var control = L.control.layers(null, null).addTo(map);

for (let i = 1; i <= 7; i++) {
  new L.GPX('gpx/MuVe_7D/MuVe_7D_T'+i+'.gpx', {
    async: true,
    marker_options: {
      startIconUrl: 'assets/pins/Pin_ATG.png',
      endIconUrl: 'assets/pins/Pin_CUR.png',
      shadowUrl: 'assets/pins/Pin_shadow.png'
    }
  }).on('loaded', function(e) {
    var gpx = e.target;
    control.addOverlay(gpx, 'gpr_GPX'+i);
  }).addTo(map);
}


$("#GPX1").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(gpr_GPX1)) {
        $(this).removeClass('selected');
        map.removeLayer(gpr_GPX1);
    } else {
        map.addLayer(gpr_GPX1);
        $(this).addClass('selected');
   }
});

How can I solve it?

I am using this snippet of code to show/hide layers but it doesn't work. The curious fact about it is that if I plot a POI the show/hide functionality from the link works, it seems I am doing something wrong defining the layers.

edited tags; edited title
Link
TomazicM
TomazicM
  • 27k
  • 23
  • 31
  • 42

Show/hide layer from GPXby clicking on HTML link in Leaflet?

Source Link
Nicolaesse
Nicolaesse
  • 137
  • 5

Show/hide layer from GPX in Leaflet

I have 7 GPX files that I successfully loaded into a Leaflet map. My problem is that I would like to show/hide each of them using some link on the web page. Let say that links have the following code:

<a href="#" id="GPX1">Link show/hide GPX1</a>
<a href="#" id="GPX2">Link show/hide GPX2</a>
<a href="#" id="GPX3">Link show/hide GPX3</a>
<a href="#" id="GPX4">Link show/hide GPX4</a>
<a href="#" id="GPX5">Link show/hide GPX5</a>
<a href="#" id="GPX6">Link show/hide GPX6</a>
<a href="#" id="GPX7">Link show/hide GPX7</a>

and the JS script I am using is the following

var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'


// please replace this with your own mapbox token!
var token = 'my_token_here';
var mapboxUrl = 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}@2x?access_token=' + token;

var OpenStreetMap_Mapnick=L.tileLayer(mapboxUrl, {id: 'mapbox/light-v9', attribution: mbAttr})

var map = L.map('mapid', {
        center: [45.43538, 12.33297],
        zoom: 14,
    layers: [OpenStreetMap_Mapnick]
});

var control = L.control.layers(null, null).addTo(map);

for (let i = 1; i <= 7; i++) {
  new L.GPX('gpx/MuVe_7D/MuVe_7D_T'+i+'.gpx', {
    async: true,
    marker_options: {
      startIconUrl: 'assets/pins/Pin_ATG.png',
      endIconUrl: 'assets/pins/Pin_CUR.png',
      shadowUrl: 'assets/pins/Pin_shadow.png'
    }
  }).on('loaded', function(e) {
    var gpx = e.target;
    control.addOverlay(gpx, 'gpr_GPX'+i);
  }).addTo(map);
}


$("#GPX1").click(function(event) {
    event.preventDefault();
    if(map.hasLayer(gpr_GPX1)) {
        $(this).removeClass('selected');
        map.removeLayer(gpr_GPX1);
    } else {
        map.addLayer(gpr_GPX1);
        $(this).addClass('selected');
   }
});

now, when I click on the GPX1 link I get the following error

Uncaught ReferenceError: gpr_GPX1 is not defined

How can I solve it? I am using this snippet of code to show/hide layers but it doesn't work. The curious fact about it is that if I plot a POI the show/hide functionality from the link works, it seems I am doing something wrong defining the layers.

Thanks!