Reactjs get coordinates from (geo)json - json

Question

I'm a beginner in ReactJS, I use react-leaflet for map rendering,
On this map I put some marker with coordinates point.
Short story, I try to get some object from JSON files, containing values by area, and coordinates points for polygon render on the map, it looks like this:
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"id": 656,
"properties": {
"DCOMIRIS": "940180101",
"DEPCOM": "94018",
"NOM_COM": "Charenton-le-Pont",
"IRIS": "0101",
"TYP_IRIS": "H",
"DEP": "94",
"aire": 0.2069,
"population": 3974
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[2.4197, 48.8214],
[2.4196, 48.8205],
[2.4196, 48.8199],
[2.4196, 48.819],
[2.4196, 48.8181],
[2.4196, 48.8172],
[2.4196, 48.8169],
[2.4183, 48.8167],
[2.418, 48.8166],
[2.4166, 48.8164],
[2.4159, 48.8163],
[2.4159, 48.8163],
[2.4159, 48.8163],
[2.4155, 48.817],
[2.4152, 48.8175],
[2.4149, 48.8178],
[2.4148, 48.8181]
]
]
]
}
},
{
"type": "Feature",
"id": 657,
"properties": {
"DCOMIRIS": "940180109",
"DEPCOM": "94018",
"NOM_COM": "Charenton-le-Pont",
"IRIS": "0109",
"TYP_IRIS": "H",
"DEP": "94",
"aire": 0.4146,
"population": 3906
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[2.4055, 48.8245],
[2.4053, 48.8244],
[2.4042, 48.8235],
[2.4032, 48.8226],
[2.4024, 48.8219],
[2.4014, 48.8211],
[2.4013, 48.821],
[2.4011, 48.8209],
[2.401, 48.8207],
[2.4009, 48.8207],
[2.4009, 48.8206],
[2.4007, 48.8207],
[2.3996, 48.8212]
]
]
]
}
}
With underscore I try to get some object with coordinates value, like this:
var find = _.findWhere(this.state.data, {coordinates: [2.4055, 48.8245]});
but I got nothing, I don't know how to search "deeper" in my json.
If I try:
var find = _.findWhere(this.state.data, {id: 656});
underscore get me the object...
Any advice?

Answer 1

The problem you are facing is that the find method is probably comparing each of the json coordinates object, like:
"coordinates": [
[
[
[2.4055, 48.8245],
[2.4053, 48.8244],
[2.4042, 48.8235],
[2.4032, 48.8226],
[2.4024, 48.8219],
[2.4014, 48.8211],
[2.4013, 48.821],
]
]
]
With the object you provide:
"coordinates":
[2.4055, 48.8245]
And this comparison returns false.

Answer 2

As far as I understood you're searching for a "feature" object inside a JSON that contains coordinates [2.4055, 48.8245].
You need to do several steps to search for an element:
Loop through the features property.
Find your coordinate inside geometry.coordinates array.
The problem here could be that the coordinates array could be nested because it is a MultiPolygon object. It may be a one level deep:
[ [ 1.1, 2.2 ], [ 3.3, 4.4 ] ]
... or two and more levels deep like in your example:
[ [ [ 5.1, 6.2 ], [ 7.3, 8.4 ] ] ]
In this case you need to do a search using recursion.
Here is how this could be done with lodash or underscore (I tested with lodash).
// Recursive search function.
function find(coords, items) {
var i = 0, found;
for (; i < items.length; i++) {
if (_.isArray(items[i])) {
if (items[i].length === 2 && _.isNumber(items[i][0]) && _.isNumber(items[i][1]) && _.isEqual(items[i], coords)) {
return items[i];
} else {
found = find(coords, items[i]);
if (found) {
return found;
}
}
}
}
}
// Coordinates you're looking for
var coords = [2.4055, 48.8245];
// Loop through the features and find coordinates.
var result = _.find(_.get(data, 'features'), function (feature) {
return find(coords, _.get(feature, 'geometry.coordinates'));
});
The result is a "feature" object that contains coordinate that you're looking for.