[GIS] Update mouseover information with baselayerchange on leaflet map

javascriptleaflet

On leaflet map I use baselayerchange in order to change the legend box and the info popup on rollover. The legend change works perfectly but I have a problem with the infobox (name info0/info1…), I need to click on each layer in order to make it work. I think there is a "fire" problem or order problem in the following code, example just after loading if I click on "Entreprises" layer it will not display information in my infobox, so if you have any clue! 

legend0.addTo(map);
currentLegend = legend0;

// control that shows state info on hover
var info0 = L.control({position: 'topright'}); 
var info1 = L.control({position: 'topright'}); 
var info2 = L.control({position: 'topright'}); 
var info3 = L.control({position: 'topright'}); 
var info4 = L.control({position: 'topright'}); 
var info5 = L.control({position: 'topright'}); 
var info6 = L.control({position: 'topright'}); 


info0.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info0.update = function (props) { this._div.innerHTML = '<h4>Densité de population</h4>' +  (props ? '<b>' + props.Name +'</b><br />' + props.densite +' ha/km<sup>2</sup><br />' : 'Survolez une zone colorée'); 
}; 
info1.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info1.update = function (props) { this._div.innerHTML = '<h4>Sans activités</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.chomeur +' personnes<br />' : 'Survolez une zone colorée'); 
}; 

info2.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info2.update = function (props) { this._div.innerHTML = '<h4>Cadres</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.cadre +' personnes<br />' : 'Survolez une zone colorée'); 
}; 

info3.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info3.update = function (props) { this._div.innerHTML = '<h4>Ouvriers</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.ouvrier +' personnes<br />' : 'Survolez une zone colorée'); 
}; 

info4.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info4.update = function (props) { this._div.innerHTML = '<h4>Population 2007-2011</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.evo_POP +' %<br />' : 'Survolez une zone colorée'); 
}; 

info5.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info5.update = function (props) { this._div.innerHTML = '<h4>Divorces 2007-2011</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.evo_DIVOR +' %<br />' : 'Survolez une zone colorée'); 
}; 

info6.onAdd = function (map) { 
this._div = L.DomUtil.create('div', 'info'); 
this.update(); 
return this._div; 
}; 
info6.update = function (props) { this._div.innerHTML = '<h4>Nombre entreprises en 2011</h4>' +  (props ? '<b>' + props.nom +'</b><br />' + props.ENNTOT11 +' entreprises<br />' : 'Survolez une zone colorée'); 
}; 

map.on('baselayerchange', function (eventLayer) {
if (eventLayer.name === 'Densité') { 
map.removeControl(currentLegend); 
currentLegend = legend0; 
legend0.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info0; 
info0.addTo(map) 
} 
else if (eventLayer.name === 'Sans activités') { 
map.removeControl(currentLegend); 
currentLegend = legend1; 
legend1.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info1; 
info1.addTo(map); 
} 
else if (eventLayer.name === 'Cadres') { 
map.removeControl(currentLegend); 
currentLegend = legend2; 
legend2.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info2; 
info2.addTo(map); 
} 
else if (eventLayer.name === 'Ouvriers') { 
map.removeControl(currentLegend); 
currentLegend = legend3; 
legend3.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info3; 
info3.addTo(map); 
} 
else if (eventLayer.name === 'Evolution population') { 
map.removeControl(currentLegend); 
currentLegend = legend4; 
legend4.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info4; 
info4.addTo(map); 
} 
else if (eventLayer.name === 'Evolution divorces') { 
map.removeControl(currentLegend); 
currentLegend = legend5; 
legend5.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info5; 
info5.addTo(map); 
} 
else if (eventLayer.name === 'Entreprises') { 
map.removeControl(currentLegend); 
currentLegend = legend6; 
legend6.addTo(map); 
map.removeControl(currentInfo); 
currentInfo = info6; 
info6.addTo(map); 
} 
})

info0.addTo(map);
currentInfo = info0;

Best Answer

Found the solution. The problem highlightFeature function with display whole info.update(layer.feature.properties) aka info0, info1, info2... so I need to write a specific highlightFeature for each layer like that :

function highlightFeature0(e) { 
var layer = e.target; 
layer.setStyle({ 
weight: 3, 
color: '#666', 
dashArray: '', 
fillOpacity: 0.5, 
fillColor: '#444' 
}); 
if (!L.Browser.ie && !L.Browser.opera) { 
layer.bringToFront(); 
} 
info0.update(layer.feature.properties); 
} 
function highlightFeature1(e) { 
var layer = e.target; 
layer.setStyle({ 
weight: 3, 
color: '#666', 
dashArray: '', 
fillOpacity: 0.5, 
fillColor: '#444' 
}); 
if (!L.Browser.ie && !L.Browser.opera) { 
layer.bringToFront(); 
} 
info1.update(layer.feature.properties); 
}

And no more problem with the update information inside the infobox.

Related Question