Search code examples
javascriptjsonleafletgeojson

What is the better method to convert JSON to GeoJSON for Leaflet map

I wanted to convert JSON to GeoJSON to plot divIcons on a Leaflet map from a JSON file that I get from an API. Being new to javascript I am having a really difficult time finding a working solution. I thought I had my issue resolved in my other post How to convert JSON to GeoJSON but that only solved one piece of the puzzle I was not aware of with getting the data loaded into the code that I thought was my issue. I am still greatly struggling with trying to get a working solution to convert JSON to GeoJSON so I am able to work with it from there to plot the divIcons on the map.

I have done a lot of research both on here, YouTube and several other websites which most are outdated answers which don't seem to work or they do not apply to my situation. One of the methods I have tried for converting the JSON to GeoJSON is this. 

$.getJSON("./data/tracking.json", function(jsonData) {
  var outGeoJson = {}
  outGeoJson['properties'] = jsonData
  outGeoJson['type']= "Feature"
  outGeoJson['geometry']= {"type": "Point", "coordinates":
      [jsonData['lat'], jsonData['lon']]}

  console.log(outGeoJson)
});

While I thought it was working, after examining the console closer after getting some sleep I noticed that the coordinates are still coming up Undefined so it is not converting it to GeoJSON if though it is showing the data at the bottom, I still do not think it is loading it correctly.

enter image description here

The second method I tried, which I like, since I am able to pull in only the keys I need from the JSON file so I can use it in a popup is having the same results as the one above. 

$.getJSON("./data/tracking.json", function(jsonData) {
var geojson = {
  type: "FeatureCollection",
  features: [],
};

for (i = 0; i < jsonData.positions.length; i++)



    geojson.features.push({
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [jsonData.positions[i].longitude, jsonData.positions[i].latitude]
        },
        "properties": {
          "report_at": jsonData.positions[i].report_at,
          "lat": jsonData.positions[i].lat,
          "lon": jsonData.positions[i].lon,
          "dir": jsonData.positions[i].dir,
          "first": jsonData.positions[i].first,
          "last": jsonData.positions[i].last
        }
      });

    console.log(geojson)
    });

enter image description here

That is what I have tried so far along with countless other methods that would make this post too long to list. Is there a better and newer way to accomplish this than what I am trying that is easier or is there something that I am just overlooking in the above code is new to this language? I really prefer that second method unless anyone has a much better suggestion for converting JSON to GeoJSON so I am able to parse that in my GeoJSON layer.

EDIT:

Here is a sample of the original JSON response from the API that I am trying to convert to GeoJSON

{
  "positions": [
    {
      "report_at": "2015-01-21 21:00:08",
      "lat": "38.9080658",
      "lon": "-77.0030365",
      "elev": "0",
      "dir": "0",
      "gps": "0",
      "callsign": "WX2DX",
      "email": "",
      "phone": "",
      "ham": "WX2DX",
      "ham_show": "0",
      "freq": "",
      "note": "",
      "im": "",
      "twitter": null,
      "web": "",
      "unix": "1421874008",
      "first": "William",
      "last": "Smith",
      "marker": "36181"
    },
    {
      "report_at": "2015-01-21 11:45:12",
      "lat": "39.2716141",
      "lon": "-76.6192093",
      "elev": "0",
      "dir": "0",
      "gps": "0",
      "callsign": "rldovejr",
      "email": null,
      "phone": null,
      "ham": null,
      "ham_show": null,
      "freq": null,
      "note": null,
      "im": null,
      "twitter": null,
      "web": null,
      "unix": "1421840712",
      "first": "Ron",
      "last": "Dove",
      "marker": "13573"
    }
}
Solution

    • in your first code sample, you try populating your GeoJSON coordinates from your jsonData['lat'] and lon, but your screenshot below shows that your jsonData variable has only a positions member, which is an array, which in turn contains objects with lat and lon members.

    • in your second code sample, you try populating your coordinates this time from jsonData.positions[i].longitude and latitude. But again, your positions items do not have longitude and latitude, but lon and lat. You properly reference those when populating your GeoJSON properties just below.

    • coordinates should be converted to numbers (you can use parseFloat)

    • GeoJSON coordinates order should be longitude first, latitude next.