[GIS] Displaying properties from GeoJSON file in choropleth map using Leaflet.js

choroplethgeojsonleaflet

I'm using the Leaflet.js library to generate a choropleth map of zip codes colored by some property values stored within an externally loaded GeoJSON file. I'm following a tutorial here but have run into some trouble, since the tutorial shows how to access the data through assigning it to a variable within the code. I'd like to proceed without explicitly assigning a variable (i.e. using the AJAX function I currently have in place to load the data).

I've been able to display the raw data (viewable here, source code available upon "View Source" in your browser) on the map, but have been unsuccessful in displaying the properties I'm interested in showing. I suspect I need to add some lines within the function that is loading the data, but can't understand how to do that.

Best Answer

I checked your code and it appears all you did in your ajax success callback function is adding the features to the GeoJson Layer you created without calling the style function.

Try to update your code between line 116 - 124 to something like this below:

    $.ajax({
        dataType: 'json',
        url: 'atl_metro.geojson',
        success: function(data) {
            $(data.features).each(function(key, data) {

                var zips = L.geoJson(data,{
                    onEachFeature: onEachFeature, 
                    style: style
                }).addTo(map);  

            });
        }
    }).error(function() {});

Also, you need to update your getColor function and change your break values since the numbers in the PCT field are smaller than 1, you need to update it to something like:

    function getColor(d) {
        return d > 1 ? '#800026' :
               d > 0.8 ? '#BD0026' :
               d > 0.6 ? '#E31A1C' :
               d > 0.2 ? '#FC4E2A' :
                        '#FED976';
    }

These changes should be able to return you the choropleth map that you are looking for.

I got it working at my end after I made these updates to your code, here is a screen shot I got:

enter image description here

Related Question