3

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>
  • 1
    It's hard to know without seeing a sample of your countiesData GeoJSON. My first guess would be that the firehouses property is being stored as a string, while getColor is expecting a numeric value, in which case you should try fillColor: getColor(parseInt(feature.properties.firehouses)). – nathansnider Mar 3 '16 at 23:53
  • 1
    @nathansnider do not forget the base as 2nd argument of parseInt please: parseInt(x, 10) :-) – ghybs Mar 4 '16 at 1:45
2

The way your getColor function is defined, the colors for d > 15 and d > 22 will never be reached, as the d > 9 condition will be met first.

You should list your conditions in decreasing order.

  • Still not working after changing the order – Steph P Mar 4 '16 at 3:19
  • Have you also used the parseInt as recommended by nathansnider in the question comment? If you need further help, we would need a sample of your countiesData GeoJSON. – ghybs Mar 4 '16 at 4:49

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.