2

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;
2

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.

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.