[GIS] Converting JSON data to GeoJSON data from an Arduino GPS tracker

geojsonjsonleaflet

I am working on a school project that tracks the location of someone via an Arduino GPS tracker. The issue I am running into is trying to convert JSON data into GeoJSON data. When the console is opened the error presented is invalid GeoJSON object. I have seen posts here describing the process to convert the data, but due to my rudimentary understanding of coding I am not sure how to implement this conversion into code. The code is based on this: https://github.com/perliedman/leaflet-realtime

index.js

var map = L.map('map');
    realtime = L.realtime({
        url: 'https://data.sparkfun.com/output/3J0bK7jKYvs6OL6V5zZE.json',
        jsonp: 'callback',
        cache: true,
        crossOrigin: true,
        type: 'GET',
    },
    {
        interval: 10 * 1000
    }).addTo(map);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

realtime.on('update', function() {
    map.fitBounds(realtime.getBounds(), {maxZoom: 3});
});

The url https://data.sparkfun.com/output/3J0bK7jKYvs6OL6V5zZE.json describes the provided JSON data from my Arduino, but in order for the code to work it seems the data needs to be in GeoJSON format.

Best Answer

The documentation for leaflet-realtime says:

The source can either be an options object that is passed to reqwest for fetching the data, or a function in case you need more freedom.

In case you use a function, the function should take two callbacks as arguments: fn(success, error), with the callbacks:

a success callback that takes GeoJSON as argument: success( features) an error callback that should take an error object and an error message (string) as argument: error( error, message)

So what needs to be done, is to have a Custom function which will query the streaming data, and then convert that to GeoJSON using a JavaScript function

Your source function can be like this:

function getCustomData(success, error) {
    let url = "stream.json"; //url of service
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function () {
        if (xhr.status === 200) {
            var res = convertToGeoJSON(xhr.responseText);
            success(res);
        } else {
            var e = new Error("HTTP Rquest")
                error(e, xhr.status);
        }
    };
    xhr.send();
}

The conversion function can be like this: 

function convertToGeoJSON(input){
    var fs={"type": "FeatureCollection",   "features": []};
    for(var i=0;i<input.length;i++){
        var ele=input[i];
        var feature={
              "type": "Feature",
              "geometry": {
                "type": "Point",
                "coordinates":[ele['longitude'],ele['latitude']]
                }};
        feature.properties=ele;

        //add this feature to the features array
        fs.features.push(feature)

    }
    //return the GeoJSON FeatureCollection
    return fs;
}

A complete GIST is available here: https://gist.github.com/devdattaT/41aa886a74c904671b2c26a2c0c0a959

Related Question