[GIS] Leaflet Choropleth Map

I'm trying to create a choropleth map using leaflet. When running the code below the map just comes up with each county being the same color. How do I get each county to be colored based on the data associated with it? Can anyone figure out why I just get one color?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Basic Choropleth Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Start css file links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<link rel="stylesheet" href="css/L.Control.Locate.css"/>
<link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.5.css"/>
<!-- Start css file links -->

<!-- Start JavaScript calls -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script type="text/javascript" src="scripts/L.Control.Locate.js"></script>
<script type="text/javascript" src="scripts/Leaflet.Coordinates-0.1.5.js"></script>
<!-- End JavaScript calls -->

<!-- Start css -->
<style>
#map {
width: 1000px;
height: 650px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,1);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;

}
.info h4 {
margin: 0 0 5px;
color: #777;
background: white;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 1;
}
/*.leaflet-control-scale {
margin-left: 10px !important;
margin-bottom: 11px !important;
}*/
</style>
<!-- End css -->

</head>
<body>

<p><b>Leaflet Basic Choropleth Map</b></p>

<div id="map"></div>

<!-- Start geoJSON file input -->
<script type="text/javascript" src="data/counties.js"></script>
<!-- End geoJSON file input -->

<script type="text/javascript">

//  Instantiate map

        var map = L.map('map').setView([38.80690, -77.26940], 8);

        L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
            attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: '1234',
            maxZoom: 18,
             minZoom: 2
        }).addTo(map);

//  Display info window on hover
        var info = L.control();

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };

        info.update = function (props) {
            this._div.innerHTML = 'Number of Firehouses' + '<br>' +  (props ?
                '<b>' + props.name + '</b>' + '-' + props.Firehouses.toFixed()
                : 'Hover over a county');
        };

        info.addTo(map);

//  Assign colors to legend categories
        function getColor(d) {
            return d > 9 ? '#feedde' :
                   d > 15 ? '#fdbe85' :
                   d > 22 ? '#fd8d3c' :
                            '#d94701';
        }

        function style(feature) {
            return {
                fillColor: getColor(feature.properties.firehouses),
                weight: 1,
                opacity: 1,
                color: 'black',
                dashArray: '',
                fillOpacity: 0.7,
            };
        }

//  Highlight enumeration district boundaries on hover
        function highlightFeature(e) {
            var layer = e.target;

            layer.setStyle({
                weight: 3,
                opacity: 0.7,
                color: '#ff0000',
                dashArray: '',
                fillOpacity: 0.7
            });

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

            info.update(layer.feature.properties);
        }

        var geojson;

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

        function zoomToFeature(e) {
            map.fitBounds(e.target.getBounds());
        }

        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });
        }

//  Read geoJSON data and create map
        geojson = L.geoJson(countiesData, {
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map);

        map.attributionControl.addAttribution('Population data &copy; <a href="http://www.census.gov/">US Census Bureau</a>');

//  Create and display map legend
        var legend = L.control({position: 'bottomright'});

        legend.onAdd = function (map) {

            var div = L.DomUtil.create('div', 'info legend'),
                grades = [0, 9, 15, 22],
                labels = [],
                from, to;

            for (var i = 0; i < grades.length; i++) {
                from = grades[i];
                to = grades[i + 1];

                labels.push(
                    '<i style="background:' + getColor(from + 1) + '"></i> ' +
                    from + (to ? '&ndash;' + to : '+'));
            }

            div.innerHTML = labels.join('<br>');
            return div;
        };

        legend.addTo(map);

//  Display locate Control
var locateControl = new L.Control.Locate({
    follow: true,
    setView: true,
    position: 'topleft'
    });

// Display mouse coordinates
var mouseControl = new L.control.coordinates({
    position:"bottomleft",
    decimals:6,
    decimalSeperator:",",
    labelTemplateLat:"Latitude: {y}",
    labelTemplateLng:"Longitude: {x}"
    });

// Display scale control
var scaleControl = new L.control.scale({
    position: 'bottomleft'
    });

    map.addControl(locateControl);
    map.addControl(mouseControl);
    map.addControl(scaleControl);

</script>
</body>
</html>
Best Answer

Related Question

Best Answer

Related Solutions

[GIS] display a choropleth map using D3 and Leaflet

[GIS] leaflet choropleth map using dynamic value

Related Question
