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
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.