Multiple choropleth layers apply different styles

Question

I tried following the tutorial about layer controls on leaflet but can not get it to function the way I want. I'm looking to have 2 different choropleth layers available for the user to select in the layer control that are displayed one at a time. However, when I uncheck the herion or total layer radio button the styles don't seem to be taking and they overlap each other. Is it possible to correct this?

My code is as follows.

var total_layer =
    //ADDS GEOJSON DATA TO MAP
    L.geoJson(totalData) 

    //SETS CHOROPLETH COLORS TO MAP colorbrewer2.org
    function getColor(d) {
        return d > 489  ? '#084594' :
            d > 408  ? '#2171b5' :
            d > 326  ? '#4292c6' :
            d > 245  ? '#6baed6' :
            d > 163  ? '#9ecae1' :
            d > 82   ? '#c6dbef' :
                        '#eff3ff';
    }

    //APPLYS COLOR TO MAP BASED OFF SELECTED PROPERTY IN GEOSJON
    function style(feature) {
        return {
            fillColor: getColor(feature.properties.rate),
            weight: 1,
            opacity: 1,
            color: 'black',
            fillOpacity: 0.7
        };
    }
;

var herion_layer =
    //ADDS GEOJSON DATA TO MAP
    L.geoJson(herData) 

    //SETS CHOROPLETH COLORS TO MAP colorbrewer2.org
    function getColor(d) {
        return d > 472  ? '#99000d' :
            d > 394  ? '#cb181d' :
            d > 315  ? '#ef3b2c' :
            d > 236  ? '#fb6a4a' :
            d > 157  ? '#fc9272' :
            d > 79   ? '#fcbba1' :
                        '#fee5d9';
    }

    //APPLYS COLOR TO MAP BASED OFF SELECTED PROPERTY IN GEOSJON
    function style(feature) {
        return {
            fillColor: getColor(feature.properties.rate),
            weight: 1,
            opacity: 1,
            color: 'black',
            fillOpacity: 0.7
        };
    }
;

//SETS MAP STARTING LOCATION
var map = L.map('map',{
    center: [41.05, -77.5],
    zoom: 8,
    minZoom: 2,
    maxZoom: 18,
    layers: [total_layer, herion_layer]
});

//CREATES TILE LAYER
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: ""
}).addTo(map);

var overlayMaps = {
    "Total": total_layer,
    "Herion": herion_layer,
};

var controlLayers = L.control.layers(overlayMaps).addTo(map);
//************USER INTERACTION************

//APPLYS HIGHLIGHT FEATURE
function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: 'black',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
    info.update(layer.feature.properties);
}

//RESETS STYLE WHEN MOUSE LEAVES TARGETED HIGHLIGHT
function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}

//APPLYS CLICK ZOOOM FEATURE WHEN TARGET IS CLICKED
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

//APPLYS FUNCTIONS ON EAACH FEATURE USING MOUSEOVER, MOUSEOUT, AND CLICK
function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

//STYLES DATA FROM GEOJSON AND APPLYS THE LAYER TO MAP
var geojson = L.geoJson(totalData, {
                    style: style,
                    onEachFeature: onEachFeature
                    }).addTo(map);
var geojson1 = L.geoJson(herData, {
                    style: style,
                    onEachFeature: onEachFeature
                    }).addTo(herion_layer);

Answer 1

You define twice your getColor and style functions in the same scope. In JavaScript, indentation does not create a new scope.

Therefore only 1 of each is used, and you end up with the same style.

You could simply use different names for your functions.