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.
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?
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.
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.
I will try your code. Meanwhile you can check the Geofences creator code, which is also showing fences on a map:
Thank you for the tip because the code for the creator is a good base for me.