Maptastic is a React web application that makes U.S. demographic data, such as population, housing characteristics, and related socioeconomic characteristics easily obtainable to local governments, nonprofits, and regional planning agencies.
Organizations can use the app to search demographic data for regions throughout the U.S. and save their searches for future reference.
As part of a small team at Whitelabel, I served as the lead front-end developer and worked with a designer and several backend developers to bring the project to life.
Maptastic gave me the opportunity try out new libraries like Chartist, used to display data obtained through U.S. Census APIs, and explore the Google Maps API and Geosuggest (through libraries like React Geosuggest) for geolocation searches.
Making Data Beautiful
In order to make large amounts of demographic data easy to understand, we used Chartist to create a variety of charts, from comparison bar charts to pie charts, to visualize the data.
Chartist proved to be a handy library that allowed for easy customization and let me build a set of restackable, collapsible cards for the end user.
A Flexible, Responsive Layout
Using Flexbox, I created a responsive masonry-style layout to accomodate a range of device sizes. It was important to give the map and chart cards room to breath in order keep data digestible, but the layout also had to be flexible enough to re-stack on smaller devices.
Additionally, on desktop, we wanted to keep several elements, such as the map and main navigation, in a fixed position so that users could scroll through the cards of data, but always have easy access to these primary elements in order to refine their search location and radius.
As the name “Maptastic” implies, maps (and location search) were a critical part of the project. Our goal was to allow users to easily search for a location, visualize it via Google Maps, and modify their search radius to hone in on their targets.
Searching on Maptastic
The search experience is comprised of three primary elements:
- A geosuggest search input
- A Google Map to display the search
- A slider to refine the range of the search area
Conclusion & Lessons Learned
While concise in scope, Maptastic helped me explore new terrain. From learning how interact with and customize map elements with Google Maps to styling large chunks of data using Chartist, this project exposed me to new front-end features. Front-end development continues to excite me as I discover how much more there is to learn every day.