For my Designing for Data Personalization Final, I made Spots—a web app that allows you to pin your favorite places on to a map and share it with your friends. The idea is that you can view only your favorite spots or see all the favorite spots of a selected group of friends that you follow on the platform (although this social functionality does not exist yet). As I mentioned in class, it’s not a revolutionary idea but it was surprising to me that there is not an easy way to share a custom pinned map of a city with friends or family. Now next time a visiting relative asks what they should do, you can just send them your Spots map.
Design and ux
To give the map application a unique feel, I designed my own map using Mapbox and created pins that matched the Spots visual ID. Currently a user can pin either a bar, restaurant or “other” and each location type is illustrated by a different pin color. To the left, there is a control panel that allows a person to choose their display options or add a new place. Among the display options, a user can either filter the pins displayed on the map by type (by selecting or unselecting the custom checkboxes for each location type that are represented through their respective pins) or they can choose to only show their pins or show all of the pins from the people they follow by adjusting the slider at the bottom. Lastly, if you click on the pins, it will bring up all the info you’d need about the place (unfortunately, this part is incomplete as not all the desired info is being rendered).
The last piece that’s worth explaining with regards to the product is how you add a new spot. If you click the add button in the control panel, an overlay will appear that will allow you to search and add a new place.
As you can see here, once you execute the search, all the results are pulled from Foursquare and the appropriate pin type is added to each listing (in this case it’s magenta because they are all food listings). Once you click on a listing, it saves the location to the database and will render on the map the next time it loads. Currently, the search modal doesn’t close when a user clicks on a listing and that’s a mistake in UX. However, I need to resolve something in my MapBox code so that when a user clicks on the listing, they receive some feedback that the location has been saved, the search modal should then close and the map should re-render to show the new location that was saved.
[Click Here] to check out the Spots demo I presented in class.
Data and Technology
For data, I chose to work with peoples’ favorite locations. Beyond the use case that I described at the beginning of the blog post, I feel like people take a lot of pride in sharing their favorite places. They serve as an extension of people’s identities. When I sent an email out to friends asking for some of their favorite spots, I was really surprised at how enthusiastic the responses were.
Given my dataset, I used the Foursquare Search and Places API to access everything I needed. At first, I started out by using their Restful API urls (not really sure what you would call it). Essentially, by constructing a url with the proper structure and parameters, you could query their database in a very similar way to how you would query your own database. While it was totally adequate during my testing, I started running into issues once I wanted to render that data by appending html to my page in a for loop. The problem was that you cannot use a third-party url in an Ajax Get request (Cross-Domain Origin Something 🙂 ). Therefore, I switched to using the foursquarevenues npm module and it was smooth sailing from there on out for the most part. There were, however, some annoying things that I noticed with the responses from the foursquare API:
- They did not provide the parent category for a location, only the very specific type ( i.e. they would give my Pizza Place, not Food). Since the parent category was what was important to me, I was able to parse it out from the category url that was included in the response.
- I had to concatenate the image url which led to unnecessary complication. The API response only gave you parts of the image URL.
- Lastly, and most importantly, the responses did not always seem to have a consistent structure. This became particularly apparent when I was trying to integrate the Foursquare comments. The dot syntax for the object would fail for certain locations because they were missing some of the key properties that I was trying to access. After meeting with Sam, it seems like I will have to put in some fail safes to check if the properties exist in the object first as a type of error handling.
As far as Mapbox is concerned, I wasted many hours trying to figure out why my pins weren’t being rendered properly on the map, only to find out that it’s because Mapbox only accepts (long, lat) coordinates vs. the more typical (lat,long). Separately, to my earlier point about needing to change some of my MapBox code so I can re-render my map after a user selects a listing from the search results, I need to make my MapBox functions more specific. Currently, when I try to redraw the map after saving a location, I get an error saying the map has already been initialized as I call a function that initializes the map and draws the pins. To get my desired result, I’ll have to break down this function into more specific, modular pieces.
I really enjoyed this project and fully intend to continue you building and fixing it up. To be continued…
For the time being, here is all the code up on GitHub.