Reactjs get coordinates from (geo)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?

score 0 · Answer 1 · answered Jan 30 '17 at 11:42

0

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.

answered Jan 30 '17 at 11:42

otorrillas

4,357
1
21
34

yeah, I was wondering if this could be the problem, but I can't change de json who's gigantic, So, a loop for check item one by one is the solution? – vmazet Jan 30 '17 at 14:32
No. Have a look at this: http://stackoverflow.com/questions/237104/how-do-i-check-if-an-array-includes-an-object-in-javascript TL;DR loop through all `coordinates` element and check `indexOf` of the object you're trying to find – otorrillas Jan 30 '17 at 15:02

score 0 · Answer 2 · answered Jan 30 '17 at 20:47

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.

Reactjs get coordinates from (geo)json

2 Answers2