In the last dev log (2026-05-09), I left off with a successfully implemented Mapbox Map through the IOS SDK! It wasn’t as smooth as I had hoped (mainly from my indecisiveness) but I managed to get it implemented with a custom style.
Vatsim API
Vatsim provides a range of APIs for developers to use but the main API that I’m interested in is the Data API -> Data Feed -> Get Live Network Data. As the name suggests this provides a live network feed of all of the users and servers that are currently on the network.
I can then call this API from the IOS app, parse the relevant data and then display it on the Mapbox map.
Sounds easy? To an experienced developer: Yes. To me? No!
This was the first time that I have ever done anything like this and at first it was quite daunting. After looking up quite a few website tutorials and some videos, I was able to get it up and running!
Displaying Aircraft
I had the data so the next step is to show the data!
After reading over the Mapbox docs, the only real option was to use Point Annotations instead of Markers. They are more performant and allow for the use of View Annotations which are labels for Point Annotations.
Instead of making a ForEach loop and looping over all of the pilots then passing over the array to Mapbox, it allows you to do that through a PointAnnotationGroup.
After passing in the array and id, I had to define a PointAnnotation with a coordinate.
There isn’t a default image or icon that is displayed so I needed to use .image and pass in an image from my project assets: which in this case is a “Airplane” Apple SF icon that i renamed to pilot. Since the icon faces the right by default, I rotated it to face up using an image editor as rotating it in swift is more complicated and creates another thing to cause a bug! Finally, I scaled down the icon size and boom! Were basically done! No i’m joking, we’ve barely started!
PointAnnotationGroup(viewModel.pilots, id: \.cid) { pilot in
PointAnnotation(coordinate: pilot.coordinate)
.image(.init(image: UIImage(named: "pilot")!, name: "pilot"))
.iconRotate(pilot.heading)
.iconSize(0.8)
}
More theme changes
I wasn’t 100% satisfied (I don’t think i ever will be) with the map as the oceans were one colour and when you zoomed in there was nothing. I played around with the Mapbox theme editor and managed to enable the ocean depths, buildings and roadways so when you zoom into an airport it and the surroundings are full of life! I made some more minor colour changes and called it a day! Check out the results!
Thanks for Reading!
Have a question, enquiry or proposition?
Feel free to contact me