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> — Map data © <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 © <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 ? '–' + 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>
countiesDataGeoJSON. My first guess would be that thefirehousesproperty is being stored as a string, whilegetColoris expecting a numeric value, in which case you should tryfillColor: getColor(parseInt(feature.properties.firehouses)).parseInt(x, 10):-)