4

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

enter image description here

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

enter image description here

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

6

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

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

instead of:

var legend = L.control({position: 'botomright'});
  • this one of of the errors, I also had getCountyColor(grades[i])+'''>&nbsp; instead of getCountyColor(grades[i])+' ">&nbsp; – ziggy Oct 19 '17 at 15:08

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.