[GIS] How to convert JavaScript array into geoJSON data

geojsonjavascriptjqueryleaflet

I want to upload txt, xls and csv files into leaflet. Firstly I am trying it for txt files. Js reads my txt as a js array. Now that I want to convert my js array into geoJSON. But I am confused here. I need some clue about which way should I follow.

$(function () {
        document.getElementById('file').onchange = function () {
            debugger;
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function (progressEvent) {
                // Entire file
                console.log(this.result);
                // By lines
                var lines = this.result.split('\n');
                var list = [];
                for (var line = 0; line < lines.length; line++) {
                    list.push(lines[line]);
                }
            };
            reader.readAsText(file);
        };
    });

Best Answer

GeoJSON is not a specific object format (in terms of programing language). It is a data format specification. It is kind of a restriction to JSON for GIS data. GeoJSON data is in fact JSON with limited accepted field names and structure.

A nice aspect of Javascript is that it can read a JSON string and make an strict equivalent Object with same field structure.

If your data string is already in GeoJSON, you can give it to most Leaflet functions.

If you want to produce GeoJSON, just start like that :

var myGeoJSON = {};
myGeoJSON.type = "FeatureCollection";
myGeoJSON.features = [];
// etc...

and continue producing something that respects GeoJSON specification.

Related Solutions

[GIS] How to add elevation data to a GeoJSON line from a GPX file

You can create or import routes on bikemap.net. After that, export them as GPX, load the GPX file in geojson.io, and save it as GeoJSON. You can add as many GPX files as you want to a single GeoJSON.

[GIS] Loading GeoJSON data into an array with OpenLayers 3

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

Best Answer

Related Solutions

[GIS] How to add elevation data to a GeoJSON line from a GPX file

[GIS] Loading GeoJSON data into an array with OpenLayers 3

Related Question