Leaflet Choropleth – Troubleshooting Layer Selection Issues

choroplethgeojsonjavascriptleafletoverlay

I am designing a simple prototype web mapping application where I want a user to be able to click on a dropdown menu and have the map's choropleth layer, choropleth legend, and hover info box all change at once. My code seems to work up until the end, where when selecting a layer from the dropdown, nothing happens on my map. I know something is wrong with my change function. I am very new to Javascript, and have been using Leaflet in my class. Here is some of my code. The var here are both variable objects containing three other variables.

https://codepen.io/rjankows88/pen/zYpJNpW

var evlayer = {legend,
              info,
              counties
};

var poplayer = {poplegend,
               popinfo,
               population
};


var myDropdown = L.Control.extend({
  options: {
    position: "topright"
  },
  onAdd: function(map) {
    this._div = L.DomUtil.create("div", "myDropdown");
    this._div.innerHTML =
      '<h2 id="title">Select a layer </h2>' + 
      '<select id="selector">' +
      '<option value="init">Any</option>' +
      '<option value="evlayer">Electric Vehicles per County</option>' +
      '<option value = "poplayer">Population Estimate per County</option>' +
      "</select>";
    L.DomEvent.disableClickPropagation(this._div);
    return this._div;
  }
});
map.addControl(new myDropdown());

var layer_select = L.DomUtil.get("selector");
//prevent clicks on the selector from propagating through to the map
//(otherwise popups will close immediately after opening)
L.DomEvent.addListener(layer_select, "click", function(e) {
  L.DomEvent.stopPropagation(e);
});
L.DomEvent.addListener(layer_select, "change", change);


function change(e) {
  // updating the layer means deleting the old one and
  // adding a new one
  //debugger;
       $("select").change(function (e) {
        var x = document.getElementById("select");
        if (x == "Electric Vehicles per County") {
          map.removeLayer(poplayer);
          map.addLayer(evlayer);
        } else if (x == "Population Estimate per County") {
          map.removeLayer(evlayer);
          map.addLayer(poplayer);
        }
      });
  };

Best Answer

There are three things that that cause your map not to work as expected:

  1. In event processing function change you set new event processing with $("select").change, instead of just checking the value of changed field and process it accordingly.
  2. For adding and removing layers with map.addLayer and map.removeLayer you are using objects comprising of two controls and one http request definition, which makes no sense. It should be layers geojson and geojson2
  3. For geojson and geojson2 layers you are using the same style function name style, so the second definition overrides the first one. Style for geojson2 should have different name, for example style2.
  4. Initially both geojson and geojson2 layers together with their controls are added to the map, which does not make much sense, since on layer covers the other. In the code below I didn't change this behavior, but I think it should be changed.

Code for changing the layers could then look something like this, assuming any choice means both layers should be shown, like they are initially:

function change(e) {
  var showEvlayer = false;
  var showPoplayer = false;
  var evlayerShown = map.hasLayer(geojson);
  var poplayerShown = map.hasLayer(geojson2);
  
  switch ($('select').val()) {
    case 'init':
      showEvlayer = true;
      showPoplayer = true;
      break;
    case 'evlayer':
      showEvlayer = true;
      break;
    case 'poplayer':
      showPoplayer = true;
  }
  if (evlayerShown) {
    if (!showEvlayer) {
      map.removeLayer(geojson);
      map.removeControl(legend);
      map.removeControl(info);
    }
    }
  else if (showEvlayer) {
    map.addLayer(geojson);
    map.addControl(legend);
    map.addControl(info);
  }
  if (poplayerShown) {
    if (!showPoplayer) {
      map.removeLayer(geojson2);
      map.removeControl(poplegend);
      map.removeControl(popinfo);
    }
    }
  else if (showPoplayer) {
    map.addLayer(geojson2);
    map.addControl(poplegend);
    map.addControl(popinfo);
  }
};
Related Question