Convert JSON to GeoJSON frontend

Question

I have json from an open data API that I need to convert into geojson so that it can be displayed as layer on my Mapbox map. I am using Mapbox GL JS library: https://docs.mapbox.com/mapbox-gl-js/api/. Here's the link to the open data json api: https://data.cityofnewyork.us/resource/64uk-42ks.json.

I can successfully fetch the json api and print it to console, but now I need to convert it to a geojson. I know that I can do this entirely frontend because it is open data.

Here's my code:

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/niki12step/ck8q9fgpx00d91ipipual7mrl', // replace this with your style URL
  center: [-73.961581,40.683868],
  zoom: 9.5
})

var pluto_url = 'https://data.cityofnewyork.us/resource/64uk-42ks.json'

getData();

async function getData () {
   await fetch(pluto_url)
  .then(response => response.json())
  .then(data => console.log(data))
}

Answer 1

A GeoJSON file typically looks like this:

{
 "type": "FeatureCollection",
 "features": [
   {
     "type": "Feature",
     "geometry": {
       "type": "Point",
       "coordinates": [75, 25]
     },
     "properties": {
        "name": "earth"
     }
   }
 ]
}

"features" is the list of all your features. Each feature is a object with the keys "type", "geometry" and "properties" and eventually "id".

That means you have to loop through all data points in your JSON file and convert it to this format. This could look like this:

const pluto_url = 'https://data.cityofnewyork.us/resource/64uk-42ks.json';
getData();

async function getData () {
   let mygeojson = {"type": "FeatureCollection", "features": []}
   await fetch(pluto_url)
  .then(response => response.json())
  .then(data => {
    for(let point of data){
      let coordinate = [parseFloat(point.longitude), parseFloat(point.latitude)];
      let properties = point;
      delete properties.longitude;
      delete properties.latitude;          
      let feature = {"type": "Feature", "geometry": {"type": "Point", "coordinates": coordinate}, "properties": properties}
      mygeojson.features.push(feature);
    }
  });
  console.log(mygeojson);
}

I assumed that you only have Point geometries. I used parsedFloat() because coordinates are stored as String in your file but the GeoJSON format required float values. With delete properties.longitude and delete properties.latitude I achieve that the coordinates are not needlessly part of the properties field.