By: Madison Draper
Remembering my freshman year of college, I would have loved a functional map loaded with my class schedule and favorite restaurants right on my phone. Even though I’ve graduated, I decided to build the map I dream of now using the Mapbox + Framer X integration to create an interactive prototype.
Creating the data
Using our Dataset Editor, I traced outlines of the buildings of my old class schedule and my favorite restaurants. For each building, I added properties that had important information, such as the class name and times. For campus buildings, I added the building name and class times, and for restaurants, I included the name and hours of operation.
Building the map
When I was a student, I usually studied on campus pretty late, so I wanted to make both a daytime and nighttime mode for my app, assuring the map was responsive eye-sensitivity throughout the day. To do this I created a custom Light and Dark map style for each mode
Navigating in 2D is difficult when buildings and classes are close together. I decided to extrude 3D building to make on-the-ground navigation simpler and the final destination easier to identify. I colored the buildings with UC Berkley’s colors to make the map match the university’s brand and eventual app UI. To make my class buildings stand out, I colored them yellow and the rest of the buildings a darker blue. Finally, to add class names and times, I drew from the properties listed out in the dataset editor.
Designing the Prototype
Once I had my map style, I dropped my accessToken into Framer to retrieve my custom styles. Using the Mapbox component in the Framer Store, I designed the rest of the app UI and functionality.
To create an animation, I added a SequentialLocationMap and wrote the following code to give the map location values.
What’s next?
Now that you’ve seen how to make a function design, try building it out yourself. You could create an actual app and add our Navigation SDK to get turn-by-turn directions to each of your classes. To get started, check out the Navigation SDK tutorials for iOS and Android. The Navigation SDK lets you add walking and cycling modes with turn by turn directions from a custom synthesized voice.
This design is a canvas. So much more could be added, like ETAs and alternate routes. Tweet me what you build with the tag #BuiltWithMapbox, I’d love to check it out!
Madison Draper - Designer - Mapbox | LinkedIn
Building a back-to-school campus guide prototype with Framer X was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.