4

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.

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Joshua
  • 41
  • 2
  • 1
    you can convert this json into geojson using python https://gis.stackexchange.com/questions/73756/is-it-possible-to-convert-regular-json-to-geojson – Mapperz Apr 18 '17 at 01:20

1 Answers1

3

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

Devdatta Tengshe
  • 41,311
  • 35
  • 139
  • 263