[Click Here] to check out the Spots live demo.
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 re-render the map the next time it loads.