javascript - Leaflet .addLayer() fails in function, works at the console - Stack Overflow

admin管理员组

文章数量:1302331

I think this means I'm missing something basic about the working of nested functions in javascript, but I'm failing to add or remove a layer from a leaflet map using a click function. Specifically, I have a leaflet map with numerous vector layers defined. One of these layers is added to the map on page load, and then subsequent layers are supposed to load on a click event in a layer selector.

Here's the function that handles the click, then updates the sidebar legend, updates classes in the layer selector, and is supposed to update the visible layer:

// ADD THE LAYER CONTROL FUNCTION
$('.layer').click(function() {
  var oldLayer = $('.active').attr('id');
  var newLayer = $(this).attr('id');
  console.log(oldLayer + ' --> ' + newLayer);
  $('#infobits').html('<h2>' + this.text + '</h2><hr>' + legendFormatter(
    this.id));
  map.removeLayer(oldLayer);
  $('.layer').removeClass('active');
  $(this).addClass('active');
  map.addLayer(newLayer);
});

Every time I click on a new layer I get Uncaught TypeError: undefined is not a function, no matter where I put the function (I even had it inside the .getJSON() call for a bit). What's perplexing is that is I go to the JS console in my browser and type verbatim what the function is producing on line 49 of the above script (map.removeLayer(Percent_TC_bg)), the map removes the layer in question.

What can I do to get my map adding and removing layers without error?

I think this means I'm missing something basic about the working of nested functions in javascript, but I'm failing to add or remove a layer from a leaflet map using a click function. Specifically, I have a leaflet map with numerous vector layers defined. One of these layers is added to the map on page load, and then subsequent layers are supposed to load on a click event in a layer selector.

Here's the function that handles the click, then updates the sidebar legend, updates classes in the layer selector, and is supposed to update the visible layer:

// ADD THE LAYER CONTROL FUNCTION
$('.layer').click(function() {
  var oldLayer = $('.active').attr('id');
  var newLayer = $(this).attr('id');
  console.log(oldLayer + ' --> ' + newLayer);
  $('#infobits').html('<h2>' + this.text + '</h2><hr>' + legendFormatter(
    this.id));
  map.removeLayer(oldLayer);
  $('.layer').removeClass('active');
  $(this).addClass('active');
  map.addLayer(newLayer);
});

Every time I click on a new layer I get Uncaught TypeError: undefined is not a function, no matter where I put the function (I even had it inside the .getJSON() call for a bit). What's perplexing is that is I go to the JS console in my browser and type verbatim what the function is producing on line 49 of the above script (map.removeLayer(Percent_TC_bg)), the map removes the layer in question.

What can I do to get my map adding and removing layers without error?

• javascript
• jquery
• function
• leaflet

Share Follow asked Aug 4, 2014 at 5:56 Bill MorrisBill Morris 59999 silver badges1616 bronze badges 4

• 1 Uncaught TypeError: undefined is not a function means that the moment that line is being executed in code, map is undefined/null. Debug and check. – MysticMagicϡ Commented Aug 4, 2014 at 5:58
• map is pletely available inside the function. Logging console.log(map.getCenter()); one line prior to map.removeLayer(oldLayer) produces the expected coordinates. Totally stumped. – Bill Morris Commented Aug 4, 2014 at 6:04
• Is the map live somewhere? – sabas Commented Aug 4, 2014 at 7:45
• I just put it up here. – Bill Morris Commented Aug 4, 2014 at 11:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I suppose TypeError is thrown inside addLayer or removeLayer. Map#addLayer and #removeLayer accepts ILayer object as parameter, but oldLayer and newLayer is obviously String, which came directly from HTML element's ID property.

So changing oldLayer and newLayer to appreciate ILayer object will fix the problem, I guess.

Edit: Igor beat me to it.

Mics is right - the HTML element's ID is a string, and doesn't reference the layer. You could do something like this after you define your layers to work around this issue:

var myLayers = {
    "Percent_TC_bg": Percent_TC_bg,
    "Percent_TC": Percent_TC
};

And then add the handler like so

$('.layer').click(function() {
  var oldLayer = myLayers[$('.active').attr('id')];
  var newLayer = myLayers[$(this).attr('id')];
  // ...
});

本文标签： javascriptLeaflet addLayer() fails in functionworks at the consoleStack Overflow