Errors from mapbox-gl.js requesting http://localhost[fence id]

I wrote a script to loop through the list of geofences from my project, take their data, and add them to a map. I can see that the data is being retrieved and the loop is working, but no fences are being displayed. Instead, I get a bunch of strange errors where it tries to load a resource from http://localhost/[my fence id]. “For example Error {status: 404, url: “http://localhost:8080/0e8386c0-d8ac-4ece-b41e-ccb7d2a2a0f5”, name: “e”, message: “Not Found”}” Along with this, two other errors for the same fence return as 404 errors from my local server since there is no directory for my fence id. Here’s my code: `var map ={
key: APIKEY’,
container: ‘map’,
center: [-95.362763, 29.744479],
zoom: 10

  map.addControl(new tt.NavigationControl(), 'top-left');

  const turfOptions = {
    steps: 60,
    units: "meters"

  function displayFence(data) {
    const polygon = new Polygon(data)

  function transformFenceToGeoJson(data) {
    if (data.geometry.type == "Polygon" || data.geometry.type == "MultiPolygon") {
      return data;
    } else {
      switch (data.geometry.shapeType) {
        case "Circle":
          geoJsonData =
          data.geometry = geoJsonData.geometry;
          return data;
        case "Rectangle":
          geoJsonData = turf.envelope(data.geometry);
          data.geometry = geoJsonData.geometry;
          return data;

  async function main() {
    const transformedFences = [];

      let response = await fetch('' + PROJECTID + '/fences?key=' + APIKEY);
      let listData = await response.json();

      for (var i = 0; i < listData.fences.length; i++) {
          let response2 = await fetch('' + listData.fences[i].id + '?key=' + APIKEY);
          let fenceData = await response2.json();

          var fence = transformFenceToGeoJson(fenceData);

  map.on('load', main());`

Edit: I forgot to mention that the Polygon method comes from the polygon.js file I copied from the geofences creator on GitHub. I tried to take some of the code from the creator to be a base for this.

First thing that I see:


should be

displayFence(fence); // we need transformed fence data


map.on('load', main());

should be

map.on('load', main);

function() already calls that function, so

map.on('load', main());

already fires main function instead of assigning it

I hope that this solves your problems.

Unfortunately, the same errors still appear with the mapbox-gl file where it tries to load resources from http://localhost/[fenceid]. I don’t know why it tries to load resources from there.

For me this was caused with:


where it expected a full set of data instead of pure ID

Thank you so much sir it fixed the problem!