Visualizing Art Deco Building Locations with Mapbox’s flyTo Function and React
Mapbox offers users a simple way to build high-quality, interactive maps, and their integration with React makes this process even easier. Using a combination of Mapbox Studio — for designing the map style — and the react-map-gl wrapper — for building the map itself — , creating online maps has become very fun.
I came across Mapbox’s flyTo function and decided to leverage it in a map that visualizes Art Deco buildings around the world. Art Deco, an art style from the late 1910’s and 1920’s, is seen in many of the world’s most famous structures, including the Empire State and Chrysler buildings in New York, Cristo Redentor in Rio de Janeiro, and the Palais de Tokyo in Paris.
The end result is the following map, allowing the user to navigate between six cities around the world:
The six cities — New York, Chicago, Rio de Janeiro, Paris, Miami, and Napier — all play a significant role in Art Deco history and help illustrate the range of styles within the movement itself (there are, of course, many other cities that were integral as well).
When you click on a new city, the flyTo function (which in the react-map-gl is called FlyToInterpolator) will animate movement from one’s current location to the chosen city’s location. So for example, when clicking on the “Paris” location, we leave our current location and fly to the French capital.
How this was created:
The style itself was designed in Mapbox Studio, using a simple grey/white color palette and no other specific configurations.
The other aspects of the map were created using the react-map-gl wrapper, specifically with the MapGl, Marker, Popup, and FlyToInterpolator components. Together, these four components are used to read the data (in JSON format), display the points as markers, and enable the user to move/fly around the map. Many parts of the code, particularly the sidebar, were influenced by this example on the react-map-gl website, which shows how to use the FlyToInterpolator function.
Finally, the map was hosted in Netlify, which offers an easy way to deploy React apps via the CLI.
Feel free to play around with the map and please comment any questions/feedback. Thanks!
