Interactive Choropleth Map with Leaflet trouble

Question

edit** Here is a link to my website. The Leaflet test one page is what works so far and the leaflet test page 2 is when I try to add interactive features.

I'm having a hard time getting my interactive map to actually be interactive. I'm making a map of number of wells in PA counties. I've been following the instructions on

http://leafletjs.com/examples/choropleth.html#interactive-choropleth-map

I've managed to find/create a GeoJSON file with all the info I need and I can display it with colors corresponding to attribute data but when I try to make it interactive (county borders highlight when hovering over), it does't work.

    var map = L.map('map').setView([40.6473, -99.84375], 5);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);

// start GeoJson

function base (feature,layer){

    layer.bindPopup("<h1 class='info'> Hi, I'm a box</h1><p class='info2'>" + feature.properties.count_ + "</p>  <p class='info2'>" + feature.properties.name + "</p>");    
};



function getColor(d) {
    return d > 1000 ? '#800026' :
           d > 500  ? '#BD0026' :
           d > 200  ? '#E31A1C' :
           d > 100  ? '#FC4E2A' :
           d > 50   ? '#FD8D3C' :
           d > 20   ? '#FEB24C' :
           d > 10   ? '#FED976' :
                      '#FFEDA0';
}

function style(feature) {
    return {
        fillColor: getColor(feature.properties.count_),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

L.geoJson(wcc, {style: style}).addTo(map);

//good up to here

When I try to add the next block of code that deals with the interactive features, the map doesn't load.

    function highlightFeature(e) {
    var layer = e.target;

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

    if (!L.Browser.ie && !L.Browser.opera) {
        layer.bringToFront();
    }
}

function resetHighlight(e) {
    geojson.resetStyle(e.target);
}

I'm new to all of this so hopefully it is something simple. I don't really understand what the e.target is doing. I've been stuck on this for a while. Any ideas are appreciated!

Answer 1

I figured it out..There was a statement where I forgot to include my geojson variable.

I had

var geojson;
// ... our listeners
geojson = L.geoJson(...);

and I needed to include my geojson var name

var geojson;
// ... our listeners
geojson = L.geoJson(wcc);

(I could have sworn I tried that earlier but it's working now!)