How to display data from api on map from mapbox

I am trying to display data from an api https://spotternetwork.docs.apiary.io/#reference/spotter-positions/get-positions/get-spotters’-positions. That display a marker for each person on the map but im not sure how to do it or would like to know if im missing some code.

index.js code from the api

var request = new XMLHttpRequest();

request.open("POST", "https://www.spotternetwork.org/positions");

request.setRequestHeader("Content-Type", "application/json");

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log("Status:", this.status);
    console.log("Headers:", this.getAllResponseHeaders());
    console.log("Body:", this.responseText);
    document.getElementById("myData").innerHTML = this.responseText;
  }
};

var body = {
  id: "APPLICATION-ID"
};

request.send(JSON.stringify(body));

map.js

mapboxgl.accessToken =
  "pk.eyJ1Ijoiam9leWNyZWF0b3IiLCJhIjoiY2t5MXR4Z3p2MDZoMzJwcWt0eXN2a2N2NyJ9.8YrcNEDK812L6d-DrFbrtg";
const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/dark-v10",
  center: [-96.052335, 39.159882],
  zoom: 2.5
});

map.on("load", () => {
  map.addSource("spcday1", {
    type: "geojson",
    data: "https://www.spc.noaa.gov/products/outlook/day1otlk_cat.nolyr.geojson"
  });

  map.addLayer({
    id: "spcday1",
    type: "fill",
    source: "spcday1",
    paint: {
      "fill-color": ["get", "fill"],
      "fill-outline-color": ["get", "stroke"],
      "fill-opacity": 0.5
    }
  });
});

map.on("load", function () {
  $.ajax({
    url: "https://www.spotternetwork.org/positions",
    type: "POST",
    proccessData: false,
    dataType: "JSON",
    success: function (json) {
      map.addSource("chasers", {
        type: "geojson",
        data: json
      });

      map.addLayer({
        id: "chasers",
        type: "marker",
        source: "chasers",
        paint: {
          "circle-color": "#4264fb",
          "circle-radius": 8,
          "circle-stroke-width": 2,
          "circle-stroke-color": "#ffffff"
        }
      });
    },
    error: function (xhr, status, error) {
      var errorMessage = xhr.status + ": " + xhr.statusText;
      alert("Error - " + errorMessage);
    }
  });
});
//  mapbox marker

new mapboxgl.Marker({}).setLngLat([0, 0]).addTo(map);