By: Nadia Barbosa
The great American solar eclipse of 2017 is underway, and we’ve been blown away by all the cool maps people are making. I wanted to create my own take on the event by visualizing where the path of totality will be for each minute during the eclipse — everybody wants to be in the right spot at the right time. Using Mapbox Studio, the Mapbox iOS SDK, and open data from NASA, I was able to bring this awesome eclipse data into my own iOS application.
Preparing the data
I started out by downloading a shapefile from NASA’s Scientific Visualization Studio. The shapefile I used contains umbra shapes at one second intervals that cover the timespan of the totality. Each umbra covers a region that will experience complete totality, where 100% of the sun will be shielded by the moon. To cut down on size, I edited the shapefile to only contain features that appeared every 60 seconds and removed any data fields that wouldn’t be used in the final application. Then, using Tippecanoe, I adjusted the zoom extent of the data so that it would be visible between zoom levels 2 through 8. Once the data was to my liking, I created a vector tileset from the data by uploading this to my Mapbox account.
Creating a custom map style
For this use case, I wanted to create a darker map style to better visualize the data that would be later added to the map. Using Cartogram, I used an image of space to create this awesome dark blue style with just a few clicks. With the style saved in Mapbox Studio, it’s ready to use in an iOS app.
Bringing the map and data together
To bring my custom map and data into an iOS application, I created a single page application in Xcode and imported the Mapbox iOS SDK. I added my custom style that I created with Cartogram and then inserted a new MGLVectorSource, which referenced the tileset previously uploaded.
Animating the data
To perform the animation, I relied on data-driven styling to help bring my map to life. Each umbra feature has a data attribute called UTCSec which represents the time that umbra exists as UTC seconds. Since the Mapbox iOS SDK allows me to access the data attributes in vector tileset features, I can selectively highlight the features that match any criteria I define. In this case, I’ve defined a variable called utcSecTime that has a value of 61920 which initially represents the first umbra feature in the path of totality. Using a timer function, every second the utcSecTime increases by 60 seconds, data-driven styling makes it so that only the feature that matches the utcSecTime variable is highlighted. Here’s a generalized example of how the code works:
The above code runs on a timer function, so it repeats every second. Since the umbra features only exist every 60 seconds and the utcSecTime increases by 60 seconds every iteration, we’ll only see one feature highlighted in yellow every second.
Making the camera move smoothly between selected features was also an interesting challenge. Luckily, since vector tilesets inherit the data properties of the original uploaded file, I was able to query my source layer for the features that matched the criteria I defined. The shapefile data I used contained CenterLat and CenterLon properties for all of the umbra features, and the Mapbox iOS SDK allowed me to access this data at runtime. Within the same timer function, I could move the map camera along the center coordinates of each umbra feature as so:
Putting it all together
The app involved three main tasks — creating a custom style, adding custom data, and styling custom data. From being able to style data at runtime to querying for map features directly, the Mapbox iOS SDK enables unparalleled customization.
Building something new? Check out our documentation and examples to learn about other ways you can use our iOS SDK. We’d love for you to share it with us on Twitter using the hashtag #BuiltWithMapbox!
Visualizing the 2017 solar eclipse with the Mapbox iOS SDK was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.