I would like to use the info box as shown in the tutorial interactive choropleth map with multiple layers and properties from different layers. The idea is to only show the properties from the selected layer.

For example the infobox has both Statename and Cityname as properties. Statename is a property in the layer States and Cityname is a property in the layer Cities.

var info = L.control({position:'topleft'});

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    return this._div;};

info.update = function (pro) {
this._div.innerHTML = '<h4>Information</h4>' +  (pro ?
    '<b>State ' + pro.Statename + '</b><br />City ' + pro.Cityname + ''
    : 'hover over map');};


And to use the infobox the following three parts within the var for each layer

function infoFeatureStates(e) {
var layer = e.target;

To empty the infobox

function resetInfoState(e) {


function onEachFeatureState(feature, layer) {
    mouseover: infoFeatureState,
    mouseout: resetInfoState,});}

And similar functions for the other layer: infoFeatureCities, resetInfoCities, onEachFeatureCity.

When hovering over a feature from the layer States, the infobox now shows both properties, with the correct value for Statename and showing Cityname 'Undefined' as it is not a property of that layer. And vice versa when hovering over a feature from Cities layer.

I would like the info box to only be populated by the properties that are part of the selected layer (based on the feature selected by mouseover). So it doesn't show Cityname Undefined when hovering over a feature from layer States.

How do I tell the infobox with property belongs to which layer? And how do I change which properties are shown depending on which feature (layer) is selected?

Or should I build something else completely?


1 Answer 1


If you only want to display info about topmost feature, simply ignore undefined properties:

info.update = function (pro) {
  var lineBreak = '';
  this._div.innerHTML = '<h4>Information</h4>';

  if (pro.Statename !== undefined) {
    this._div.innerHTML += '<b>State ' + pro.Statename + '</b>';
    lineBreak = '<br />'
  if (pro.Cityname !== undefined) {
    this._div.innerHTML += lineBreak + '<b>State ' + pro.Statename + '</b>';
  • I like your idea, however I can not get it to work at this moment. The map does not render, so I am making some mistake somewhere. To me it doesn't seem correct to have pro.Statename in both if blocks. Where does the 'hover over map part go to?
    – JoeneGB
    Apr 16, 2019 at 13:49

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.