function getCountryColor(popEst){
            if(popEst > 100000000){
                return 'red';
            }else if(popEst > 50000000){
                return 'blue';
            }else{
                return 'green';
            }
        }

        function countriesStyle(feature){
            return {
                fillColor : getCountryColor(feature.properties.pop_est),
                weight : 2,
                opacity : 1,
                color : 'white',
                dashArray : 3,
                fillOpacity : 0.7
            }
        }
         var popmaps = function(feature,layer){
                    var popUp = feature.properties.name
                    layer.bindPopup(String(popUp));
                }


        var map = L.map('map').setView([43.8476, 18.3564], 13);//Sets the view of the map (geographical center and zoom) with the given animation options.
        var countriesLayer = L.geoJson(
            countries,
            {style : countriesStyle},{
                           pointToLayer:function (feature, latlng) {
                           return L.marker(latlng, {

                                                 fillColor: "#000000",
                                                 color: "green",

                                                 opacity: 1,

                                                 });
                           },
                           onEachFeature:popmaps
                           }).addTo(map);

        L.geoJSON(countries,{
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(name ,geojsonMarkerOptions);
            }
        }).addTo(map);

        map.fitBounds(countriesLayer.getBounds());//in order to cover the whole canvas

        countriesLayer.on("click", function (event) {//in order to zoom in each layer
            // Assuming the clicked feature is a shape, not a point marker.
            map.fitBounds(event.layer.getBounds());
        });

        var legend = L.control({position : 'bottomright'});
        legend.onAdd = function(map){
            var div = L.DomUtil.create('div', 'legend');
            var labels = [
                "Population greater than 100000000",
                "Population greater than 50000000",
                "Population equal or less than 50000000"
            ];


                    var grades = [100000001, 50000001, 50000000];
            div.innerHTML = '<div><b>Legend</b></div>';
            for(var i = 0; i < grades.length; i++){
                div.innerHTML += '<i style="background:'
                + getCountryColor(grades[i]) + '">&nbsp;&nbsp;</i>&nbsp;&nbsp;'
                + labels[i] + '<br />';
            }
            return div;
        }
        legend.addTo(map);
    </script>

    <div id='buttons'>

    <input type="button" id="l1" value="layer one" onclick="alert('layer one');msgr(); "/>
    <input type="button" id="l2" value="layer two" onclick="dofunction();"/>
    <input type="button" id="l3" value="layer three" onclick="dofunction(); "/>
    </div>

</body>