5 votos

folleto de crear la leyenda

Estoy siguiendo este tutorial de vídeo sobre cómo crear un folleto de la leyenda.

aquí está mi código JS

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

antes he intentado añadir una leyenda que se veía así

enter image description here

ahora ya he añadido la leyenda de código no muestra el mapa y en la consola me aparece este error

enter image description here

Estoy siguiendo este tutorial https://www.youtube.com/watch?v=WXSIU05It4g&index=3&list=PLNCPalajQvg55_lI2bkO2mvESqxrTwyJJ

7voto

Nikola Puntos 21

Hay un error en el código. Debe ser:

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

en lugar de:

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

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X