通过Leaflet中来自csv的数据定义json多边形的颜色

Question

I want to do something that i thought would be pretty easy but i face a problem.

I have two files : a geojson file with geometry and a csv with two columns, one for data and an another which shares attribute with a propertie in the geojson, a name to be simple.

I want to make a choropleth map depending of data from my csv to fill my geojson polygon. I check the leaflet documentation for choropleth map with json and i follow, in part, this answer for communication between json and csv in leaflet.

So, this is a part of my code which is problematic, json polygons are mapped but colors are not define. I learn JS so sorry for the mistakes :

EDIT : fix typo

Papa.parse("score.csv", {
    download: true,
    header: true,
    delimiter: "",
    complete: function(results) { //everything below runs only after the CSV has been loaded and processed.

        function getColor(d) {
            return d > 0.5 ? '#800026' :
                   d > 0.4  ? '#BD0026' :
                   d > 0.3  ? '#E31A1C' :
                   d > 0.25  ? '#FC4E2A' :
                   d > 0.2   ? '#FD8D3C' :
                   d > 0.15   ? '#FEB24C' :
                   d > 0.1   ? '#FED976' :
                              '#FFEDA0';
        }

        var oiseLayer = new L.geoJson(oise, {
                style: function(feature){
                    // var filtered = results.data.filter(function(data){return data.DCOMIRIS == this;}, feature.properties.DCOMIRIS.toString());

                    if (results.data.DCOMIRIS == feature.properties.DCOMIRIS){
                    return {
                        weight: 1,
                        opacity: 1,
                        color: 'white',
                        fillOpacity: 0.7,
                        fillColor: getColor(results.data.score)
                    }
                }
                }
           }).addTo(map);
}
});

My json looks like this :

var oise = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },                                                                                
"features": [
{ "type": "Feature", "properties": { "DEPCOM": "60538", "NOM_COM": "Ricquebourg", "IRIS": "0000", "DCOMIRIS": "605380000", "NOM_IRIS": "Ricquebourg", "TYP_IRIS": "Z" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 2.753862487322691, 49.568106423004863 ], [ 2.754834569610532, 49.567467723103867 ], [ 2.755374727888817, 49.567112846570275 ], [ 2.75585282747064, 49.566527871018629 ], [ 2.755916398961054, 49.56594385787055 ], [ 2.755844137158009, 49.565449439131314 ], [ 2.755354284133803, 49.564733104021172 ], [ 2.756729896258653, 49.564817378618457 ], [ 2.758105512897535, 49.564901637620451 ],...

And my csv :

DCOMIRIS;score
600010000;0.025
600020000;0.03333333333333333

Besides, i got an error in my console which says that my csv transform in json is "not well-formed".

Thanks

Answer 1

You have a typo in if (result.data.DCOMIRIS == feature.properties.DCOMIRIS){ => should be results with s to match your function argument identifier.

But this is not the core of your issue.

results.data is an array of items (one per line in your CSV file, except for the first / header line). So the if condition " result.data.DCOMIRIS == feature.properties.DCOMIRIS " will never be met.

You should rather map your DCOMIRIS codes in an object, so that you can easily refer to these codes when parsing the GeoJSON data and trying to determine the appropriate style / color. See my answer in that other question: Leaflet GeoJSON zoom to marker by id

// map the DCOMIRIS first, so that we can retrieve them by DCOMIRIS easily.
var DCOMIRIS = {},
  data = results.data;

for (var i = 0; i < data.length; i += 1) {
  DCOMIRIS[data[i].DCOMIRIS] = data[i].score;
}

Then you can retrieve the score of your feature by calling DCOMIRIS[feature.properties.DCOMIRIS]

Then, I think PapaParse gives you only strings, so you will have to convert the score to a float: parseFloat(score)

Finally you can use your getColor function:

var oiseLayer = L.geoJson(oise, {
  style: function(feature) {
    return {
      weight: 1,
      opacity: 1,
      color: 'white',
      fillOpacity: 0.7,
      fillColor: getColor(parseFloat(DCOMIRIS[feature.properties.DCOMIRIS]))
    };
  }
}).addTo(map);

Demo: http://jsfiddle.net/ve2huzxw/185/

NOTE: not sure about your delimiter: "" , that may explain your console error. Why not leaving the delimiter automatic detection?