[GIS] leaflet create legend

Question

I am following this video tutorial on how to create a leaflet legend.

here is my full JS code

            function getCountyColor(popEst){
                if(popEst>100000000){
                    return 'red';
                }else if(popEst > 50000000){
                    return 'blue';
                }else{
                    return 'green';
                }
            };
            function countriesStyle(feature){
                return {
                    fillColor:getCountyColor(feature.properties.pop_est),
                    weight: 2,
                    opacity: 1,
                    color: 'white',
                    dashArray: 3,
                    fillOpacity: 0.7
                }
            };
            var map=L.map('map').setView([40.876,-74.9999],8);
            var countries_layer=L.geoJSON(countries,{
                style: countriesStyle
            }).addTo(map);
            map.fitBounds(countries_layer.getBounds());
            var legend = L.control({position: 'botomright'});
            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:'+getCountyColor(grades[i])+'''>&nbsp;</i>&nbsp;&nbsp;'
                    +labels[i]+'<br/>';
                }
                return div;
            }
        legend.addTo(map);

before I tried adding a legend it looked like this

now since I added the legend code no map shows up and in the console I see this error

I am following this tutorial https://www.youtube.com/watch?v=WXSIU05It4g&index=3&list=PLNCPalajQvg55_lI2bkO2mvESqxrTwyJJ

Answer 1

There's a typo in the code. It should be:

var legend = L.control({position: 'bottomright'});

instead of:

var legend = L.control({position: 'botomright'});