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

Maps SDK for Web (JavaScript)
#1

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 = tt.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)
      .addTo(map)
  };

  function transformFenceToGeoJson(data) {
    if (data.geometry.type == "Polygon" || data.geometry.type == "MultiPolygon") {
      return data;
    } else {
      switch (data.geometry.shapeType) {
        case "Circle":
          geoJsonData = turf.circle(
            data.geometry.coordinates,
            data.geometry.radius,
            turfOptions
          );
          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('https://api.tomtom.com/geofencing/1/projects/' + PROJECTID + '/fences?key=' + APIKEY);
      let listData = await response.json();
      console.log(listData);

      for (var i = 0; i < listData.fences.length; i++) {
          let response2 = await fetch('https://api.tomtom.com/geofencing/1/fences/' + listData.fences[i].id + '?key=' + APIKEY);
          let fenceData = await response2.json();
          console.log(fenceData);

          var fence = transformFenceToGeoJson(fenceData);
          transformedFences.push(fenceData.id)
          displayFence(fenceData.id);

                  }
              };
  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.

#2

First thing that I see:

displayFence(fenceData.id);

should be

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

Also

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

#3

I hope that this solves your problems.

#4

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.

#5

For me this was caused with:

displayFence(fenceData.id)

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

#6

Thank you so much sir it fixed the problem!