Every map has a purpose. That way, every map needs to tell a story. For this week assignment, I want to tell people if they are lost in Time Square and looking for a place to eat. It’s not innovative I know. Yelp does that. But hey, at least this is an exercise for me to tell a story through map.
The idea is to show people every restaurant around Time Square. And people can filter it based on the restaurant type. Also, when people click on the place, it will show the detail of the restaurant. But, the data I could get doesn’t have too much detail: only restaurant name, coordinates, and food type. I got the data from NYC Open Data: Time Square Food & Beverage Locations. I know Yelp has an API for more detail data, but I didn’t have time to learn about their API and implement it for this assignment.
Telling a Story
I want people to sort of experience what it will like to lost in Time Square, since it’s so crowded there! And are disoriented to look for where to eat. To make a user journey, I created a simple landing page only to make them feel they are at Time Square and lost.
When they click on the button, it will navigate them to the map. Here, people can see all the restaurants location around Time Square: Cafe/Deli, Quick Serve, Full Serve, Coffee, Bar/Lounge, Catering, Consumables. They can filter the restaurants based on its type. And when they click on the restaurant location, it will tell user the restaurant’s name.
I created an interactive area on the right so that user know that they can interact with the map. In this section, I put the title, filter, instruction what to do, and legend. To create a filter, I follow this Tutorial on Mapbox GL: Filter Symbols by Toggling a List. And to make a legend and clickable popup, I used the same technique as my last week assignment: Trying to Understand MapboxGL and Geojson.
Take a Look at the Map: Where to Eat Around Time Square here!
And here’s my code on Github.