0

Following the 'interactive choropleth map' tutorial, I am able to create my own custom info box in a map with multiple layers.

The properties called are within different layers. However, I have to make sure the properties have different names for each layer. For example using 'Statename' as a property in two layers (called States0 and States1) will result in an error: the layers will not render.

Having a third layer without the property Statename but with another property called Cityname, that is not a problem.

Here is the code used for the infobox

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 these three pieces of code for each layer

function infoFeatureStates0(e) {
var layer = e.target;
info.update(layer.feature.properties);}

To empty the infobox

function resetInfoState0(e) {
info.update();}

Eventlistener

function onEachFeatureState0(feature, layer) {
layer.on({
    mouseover: infoFeatureState,
    mouseout: resetInfoState,});}

And similar functions for the other layers: infoFeatureStates1, resetInfoStates1, onEachFeatureStates1 and infoFeatureCities, resetInfoCities, onEachFeatureCity.

Since the info box only shows the property values from the topmost layer visible/accessible (mouseover), I don't see why Leaflet doesn't know which value to return. If States0 is the topmost visible layer, it should return the value for Statename from the feature in Stats0 on mouseover.

It should be easy: Mouseover to 'select' a feature (which is part of just one layer), then update info box for properties as defined in this._div.innerHTML and return the values if those properties are indeed part of that specific layer.

  • Seeing some of your code would be helpful in helping you. – TomazicM Apr 4 at 15:17
  • Sorry for this post, I made a mistake somewhere else that was causing my map not to render. After testing I found that is entirely possible to have identical property names within different layers. And it performs as I was hoping it would: filling the infobox with the value belonging the the property of the topmost visible layer. – JoeneGB Apr 9 at 14:31

Your Answer

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

Browse other questions tagged or ask your own question.