Hfrhyu

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');
 this.update();
 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');;

info.addTo(map);

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

function infoFeatureStates(e) 
var layer = e.target;
info.update(layer.feature.properties);

To empty the infobox

function resetInfoState(e) 
info.update();

Eventlistener

function onEachFeatureState(feature, layer) 
layer.on(
 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?