Pinball Map App 5.3.0
This app update took an extensive amount of work over the past couple of months. And now, in this post, we will explain why.
don’t want to read this post, and would rather watch it on a vid? https://youtu.be/UftU6QE2-Ko
Here is the overall changelog. Side note: the Android Play Store has a very small character limit on the “what’s new” section when you submit an app update. You can’t fit all these bulletpoints into it! Why is it so small?
- Switched map library to Mapbox. This results in better map performance; fixes a bug when displaying lots of markers; and allows us to use custom markers in Android (previously not used due to performance issues).
- Show the map marker callouts in a bottom sheet, rather than floating near the marker. More standardized, and looks nicer.
- Majorly adjusted how the map display markers. There are no longer results “off the screen” to the left and right. So the “List” more accurately shows what is on the map. This saves resources and allows us to:
- Tweak the “max zoom” limits. You can zoom further out now. These limits differ depending on if you are filtering results, and what you are filtering.
- Added ability to select more than one filter item in Recent Activity.
- Added a Stern Insider Connected flag on eligible machines. If a machine has IC, no need to comment saying so - just tag it!
- Removed PT Sans font in favor of more Nunito weights. And tweaked some colors.
- Tablets can change to landscape orientation.
- Bug fixes!
Upon launching the app, the first thing you may notice is that the map looks different. The roads, parks, water, and so - displayed by something called map tiles - are different! That’s because in this update we have changed the source of these map tiles from Google Maps to Mapbox (which uses OpenStreetMap data). With Mapbox, we actually designed the dark mode theme ourselves. Anyway…
This change in libraries was largely made in order to improve performance and to have Android achieve feature parity with iOS. The performance issue was that our previous map package had a bug that resulted in map markers disappearing when you loaded too many at a time. And sometimes the callout that pops up when you click a marker was being rendered incorrectly.
The Android parity issue was that we couldn’t use the custom map markers that we are looking at here, that show the number of pinball machines per location, because it was severely impacting Android performance. The app would essentially grind to a halt.
The solution was to switch from the react-native-maps package to the only alternative, react native mapbox. We were already using mapbox tiles on the website, and in fact have used it off and on over the years. This change in the app was a significant amount of work.
Along with this - actually just prior to it - we also put a lot of effort into optimizing how data is pulled from our database into the app. Previously, when you loaded locations on the map, it would pull in locations that are within a radius of the center of the map (and the radius distance was based on your zoom level). However, since our phones are rectangles, this resulted in many venues being loaded off the screen. You may have noticed this after panning the map around and seeing other markers, or by clicking the List button and seeing venues that aren’t visible on the screen. Not only was it kind of confusing to have the List screen show locations that aren’t on the map, but it was a poor use of resources to pull in these data - which we’ll go into more in a minute. So instead, we created a new API endpoint that uses the bounding box of the screen - the corners - to calculate what should be visible on the screen and only loads those venues when you refresh the map. Additionally, we optimized that endpoint so that it only contains data that is needed with very little if anything extra.
Map Zooms and Filtering
As a result, now you can zoom out the map further! Previously, when using a radius to pull in locations, if you were able to zoom the map out so that you could see Mexico on the bottom edge of the screen and Canada at the top - that is, so the full width of the US was still not visible on the screen even though the full height is, the radius would be so wide that off-screen the map would be loading locations on the west and east coasts of the US. That’s no good.
But now, you can zoom out further. There are levels to how far you can zoom, based on which filter, if any, you have applied. For example, if you filter by an operator, you can zoom out very far. This is because operators likely do not operate at thousands of locations, and so pulling in all their data will never be a burden on the server and thus doesn’t need to be limited.
If you filter by locations that contains 2 or more machines, you can zoom out further than if you were showing all. If you adjust that filter to only show locations with 5 or more, or 10 or more, or 20 or more, then you can increasingly zoom out further. Because each of those filters will return fewer and fewer locations, we balance that out by increasing the allowed zoom.
Combos of filters will allow you to go further, too. Check out locations with 20+ machines that are arcades.
We updated the marker designs so that hearted locations are a simple pink icon instead of a heart icon.
We also changed the callouts. When you click on a marker, instead of the infowindow - or callout - floating above the marker, it is now in a fixed positions at the bottom of the map. It contains basic info, as well as a quick list of five machines, if there are at least five machines.
Recent Activity Filtering
This one was a user suggestion: if you show nearby map activity, previously you could only filter the items to one activity type, such as machines added. But now you can filter multiple types! Like machines added and removed. Thanks for the suggestion.
Stern Insider Connected Flag
Lastly, a lot of people leave machine comments that note whether or not a machine is connected to Stern’s Insider Connected. The problem here is that another person will then leave a comment saying the right flipper is moist, and then the Insider Connected comment gets buried. So we added a little toggle button for each machine. It’s a simple button that defaults to question mark, and when you click it, it toggles between yes and no. No need to go nuts clicking this.
That about wraps it up! Though we also added some additional advice to users when they are leaving machine comments - reminding you all that it’s a good idea to tell the business in person about issues. And we made many little design tweaks.