0

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);
        }
      });
  };
5
  • I don't see any difference if you made one...? Apr 23 at 23:50
  • Difference is in the code formatting.
    – TomazicM
    Apr 24 at 6:56
  • My code is formatted properly in the codepen environment, but the functionality is still not doing what I want it to do Apr 24 at 18:43
  • This was done only to look nicer, not to change behavior.
    – TomazicM
    Apr 24 at 19:09
  • Oh okay, I see. Any thoughts on how to improve functionality? I'm trying to link three variables together (legend object, hover over object, and the choropleth map), but I don't think that's correct, nor is the change function working properly to add or remove all three variable objects at once. Apr 24 at 22:01

1 Answer 1

0

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);
  }
};
3
  • Thank you! That was very helpful. A couple of remaining glitches: 1) I cannot seem to get the info hover feature to work for both choropleth maps. It either works for one but not the other. 2) The hover functionality when EV is selected from the drop down, if you hover over a county polygon the polygon changes blue when it is supposed to stay green...? Apr 27 at 4:11
  • If answer helped you solve you problem, it's customary on GIS SE site to mark it as accepted, to let others with similar problems know that problem was resolved.
    – TomazicM
    Apr 27 at 6:52
  • GIS SE site is intended for focused question, which amongst other things means one question per question. There were already a few problems solved in the answer above. If you have additional questions/problems, post a new question/questions.
    – TomazicM
    Apr 27 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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