Customizing leaflet layer control

405 views
Skip to first unread message

Şan Özmen

unread,
Jan 21, 2015, 11:38:12 AM1/21/15
to leafl...@googlegroups.com
I am trying to customize standart layer control. This is the map I have created http://www.mapabase.com/ADNKS/adnks.html. I should also say that my javascript programming level is not beyond the modification of some pre-made codes. Now I would like to add a dropdown menu instead of L.control appearing with a symbol. The last part of my code is below just to show how it is related with geojson file and it updates the info box and legend. Basically I have one geojson file and I am using different columns from that geojson and switching between layers with baselayerchange command. So I wonder if there is a way to change layer control to a drop down without much pain. If it requires me to reshape the whole code all over again, I would ask for your help on adding group titles to standart leaflet control. For example all the age date will appear beneath the Age Groups title, and Single,Married etc. will appear under let's say Marital Status.
Thanks in advance.


var baseMaps = {
   
   
"0-14": firstAge,
   
"15-29": secondAge,
   
"30-44": thirdAge,
   
"45-59": forthAge,
   
"60-74": fifthAge,
   
"75+": sixthAge,
   
"Single":single,
   
"Married":married,
};

L
.control.layers(baseMaps, {
}).addTo(map);

map
.on('baselayerchange', function (eventLayer) {
   
if (eventLayer.name === '0-14') {
        map
.removeControl(currentLegend);
        currentLegend
= legend_0_14;
        legend_0_14
.addTo(map);
         map
.removeControl(currentInfo);
        currentInfo
=info1;
        info1
.addTo(map);
   
}
   
else if  (eventLayer.name === '15-29') {
        map
.removeControl(currentLegend);
        currentLegend
= legend_15_29;
        legend_15_29
.addTo(map);
         map
.removeControl(currentInfo);
        currentInfo
=info2;
        info2
.addTo(map);
   
}
   
else if  (eventLayer.name === '30-44') {
       map
.removeControl(currentLegend);
        currentLegend
= legend_30_44;
        legend_30_44
.addTo(map);
         map
.removeControl(currentInfo);
        currentInfo
=info3;
        info3
.addTo(map);
   
}
   
else if  (eventLayer.name === '45-59') {
       map
.removeControl(currentLegend);
        currentLegend
= legend_45_59;
       legend_45_59
.addTo(map);
        map
.removeControl(currentInfo);
           currentInfo
=info4;
        info4
.addTo(map);
   
}
   
else if  (eventLayer.name === '60-74') {
       map
.removeControl(currentLegend);
        currentLegend
= legend_60_74;
       legend_60_74
.addTo(map);
        map
.removeControl(currentInfo );
           currentInfo
=info5;
        info5
.addTo(map);
   
}
   
else if  (eventLayer.name === '75+') {
       map
.removeControl(currentLegend );
        currentLegend
= legend_75;
       legend_75
.addTo(map);
       map
.removeControl(currentInfo );
        currentInfo
=info6;
        info6
.addTo(map);
   
}
   
else if  (eventLayer.name === 'Single') {
       map
.removeControl(currentLegend );
        currentLegend
= legend_bekar;
       legend_bekar
.addTo(map);
       map
.removeControl(currentInfo );
        currentInfo
=infoBekar;
        infoBekar
.addTo(map);
   
}
   
else if  (eventLayer.name === 'Married') {
       map
.removeControl(currentLegend );
        currentLegend
= legend_evli;
       legend_evli
.addTo(map);
       map
.removeControl(currentInfo );
        currentInfo
=infoEvli;
        infoEvli
.addTo(map);
   
}
   
 
})

}





Reply all
Reply to author
Forward
0 new messages