1

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?

| improve this question | |
4

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).

| improve this answer | |
  • Thanks a lot, very helpful! The reason I was asking was because I am attempting to replicate something like openlayers.org/en/v3.6.0/examples/cluster.html?mode=advanced but every time I try to add data like this: var originalSource = new ol.source.Vector({ url: 'test.geojson', format: new ol.format.GeoJSON({ defaultDataProjection :'EPSG:4326', projection: 'EPSG:3857' }) }); It doesn't work and they show adding points to a features array. – trevinator Jun 16 '15 at 15:21
  • Take a look at this sample bl.ocks.org/ThomasG77/badfca2694a7255fa2fa It does what you expect. IMO, next time, you should better ask about the first issue before, instead of asking for code to bypass it. – ThomasG77 Jun 16 '15 at 15:55
  • this is exactly why I asked the qestion because I tried just that and it doesn't work so I looked for a way to bypass the problem or if anyone could identify why it wasn't working – trevinator Jun 16 '15 at 16:08
  • Could it be the contents of my .geojson? Can clusters not handle specified properties? Even when I copy and paste your index.html into my file and load it, it doesn't work with my .geojson file. But i know my .geojson is formatted right because it works with other applications like just plotting the locations – trevinator Jun 16 '15 at 16:17
  • could it also be the coordinate system I am using? I notice in your sample .geojson your coordinates are typically much higher numbers than mine are you using a different projection? – trevinator Jun 16 '15 at 18:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.