Loading GeoJSON data into an array with OpenLayers 3?

Question

I'm using OL 3.6 with no additional plugins.

Is there a way to store points from a GeoJSON file to an array?

I'm thinking it would look something like this(?):

var features = new Array(of_some_size);
for(var i = 0; i < of_some_size; i++)
{
features[i] = new ol.format.GeoJSON(
    url: './testData.geojson')
};

The file is local and this is just for personal use and I want it to work offline first and foremost, and I would like to try and shy away from ajax requests just because I am very new to javascript and OpenLayers and I am definitely still trying to grasp everything I've learned so far. I don't want to exclude it as a solution but I would prefer not to, if that's the only way, then that's the only way, nothing you can do about it. The .geojson looks like this:

{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[0.13138000,49.475577]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.4194417,51.237658]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.3200333,51.967037]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[23.603633,37.955883]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.3477200,51.879885]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.9328833,51.237590]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.5443450,51.901482]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.3775917,51.246228]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[64.590805,80.017233]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.3227933,51.309633]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.3792850,51.894750]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[126.61195,37.452907]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[181.04453,10.541228]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[12.310667,56.126228]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[119.69861,39.932017]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[120.36516,35.997872]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[122.51503,31.652833]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[122.53808,31.740652]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.8763183,51.820857]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[122.50555,31.088703]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[113.52357,23.017340]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[121.49781,31.232340]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[113.49693,23.058202]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[120.28608,37.623298]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.72028,23.351192]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[22.201193,26.432858]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[3.2204667,51.331417]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[8.2859650,43.842337]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[139.90506,35.512442]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.2957683,52.700947]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[160.39418,85.900905]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[139.67816,35.435755]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[4.4195283,51.237385]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[18.663568,54.408705]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.2238400,51.815872]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[117.74743,38.981598]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[12.686615,56.045867]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.8864050,51.154272]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[90.610383,104.58641]},"properties":{}}]

---

I edited the above geojson so it includes but does not go past the point that causes it to fail for me ([90.610383,104.58641]). If I change the 104 to anything below 90 it works. Now why this is happening I have absolutely no idea and I've double checked the formatting 5 times over. If you take out the last point it works.

---

This is a JSfiddle with what I'm trying to do for more clarifiaction. If you un-comment the first bit of code it will work fine, if you want to use the chunk I wrote everything loads except for the cluster layer. I feel like this should work but I'm not sure why it doesn't. Possibly an error reading in the geoJSON(I know it will not work in the fiddle because I don't have my .geojson hosted anywhere but it doesn't work loading directly to my browser either). I know it doesn't have the .geojson in the external files so I will add more points to the example above so you can maybe load it on your own machine?

Answer 1

It seems you re mixing some concepts

features[i] = new ol.format.GeoJSON(
    url: './testData.geojson')
};

The above code can't work because the ol.format.GeoJSON API does not accept url as a parameter eg the official doc. You also try to loop on a GeoJSON call (if I consider above sample was intented for this)

The normal way (there are more than one) could be the following:

• make a call using Ajax without relying on the OpenLayers 3 library with something like below :

  var url = 'testData.geojson';
  var r = new XMLHttpRequest();
  r.open("GET", url, true);
  r.onreadystatechange = function () {
      if (r.readyState != 4 || r.status != 200) {
          return;
      }
      console.log(r.responseText);
  };
  r.send();
  

• Then you need to parse the response (it's a string not a js object) with

  var obj = JSON.parse(r.responseText);
  console.log(obj);
  

• Finally, just loop, through the obj.features (it's a js array) to convert it to a simpler array using the following

  var features = obj.features;
  for (var i = 0, len = features.length; i < len; i++) {
      var feat = features[i].properties;
      feat['type'] = features[i].geometry.type;
      feat['coordinates'] = features[i].geometry.coordinates;
      features_data_array.push(feat);
  }
  console.log(features_data_array);
  

The last part IMO, should not be used. I answered this last part due to your question but if you don't use a FeatureCollection (GeoJSON is a bit more complex although quite simple), you will have to "reinvent the wheel" with boiler plate code. Moreover, the features within a GeoJSON are already a js array.

For going back and forth between string and json objects, take a look at JSON.stringify and JSON.parse. It can be useful depending of the storage choice for your offline use (if you choose HTML 5 storage).