I need to add all geofences from a project to a map on my local http server

REST APIs
#1

I need help with coming up with code to take the geofences from the list fences endpoint and have them end up on a vector map. I watched the dev video where they put one geofence on the map, but I need to put all the fences from the list fences endpoint which, in my case, will be changing with new fences coming in and ones being deleted. I was trying to use a for loop but the fences are not showing up. Can someone help me at least get an idea of how I should approach this please. Thank you.

#2

Hmmmm… your question is too general.
One hint that I can give: not all fence shapes are GeoJson compatible. Some of them need to be converted to polygons (with for example Turfjs) to place them on a map.

Can you show your code somehow?

#3

I am using the CDN; this is my head tag: <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.13.0/maps/maps.css'> <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/6.x/6.13.0/maps/maps-web.min.js"></script>. I created a function to take data from the fence list endpoint and feed it to the get fence details endpoint in a for loop. Then it takes each response and creates a new layer for each (that’s my goal). `async function main() {

      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);
          return fenceData;
          // add layer
          map.addLayer({
              'id': listData.fences[i],
              'type': 'fill',
              'source': {
                  'type': 'geojson',
                  'data': {
                    'type': 'Feature',
                    'geometry': fenceData.geometry
                  }
              }

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

Also, I get an error “Unhandled Promise Rejection: TypeError: i[r].call is not a function. (In ‘i[r].call(this,t)’, ‘i[r].call’ is undefined)” It is from the mapbox-gl.js file line 31 I think; says it is orginally located at maps-web.min.js.
Thank you for your help.

#4

I made some progress now but there are a bunch of 404 errors in the javascript console because there are supposedly attempts load a resource from the localhost server where the fence id is a directory. For example http://localhost/[fence id]; resource not found (404 error). It says it comes from the mapbox-gl.js file. There is also another error saying “Error {status: 404, url: “http://localhost:8080/6c9c588c-f995-4e53-8485-b0f73d79c9e1”, name: “e”, message: “Not Found”}”. Same error just in a different way. I don’t know what to do when it comes to the mapbox file.

#5

I will try your code. Meanwhile you can check the Geofences creator code, which is also showing fences on a map:

#6

Thank you for the tip because the code for the creator is a good base for me.