use app
logo

Pinball Map App 5.3.0

August 31, 2023 [news]   [app]

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?

The Map

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.

Map Markers

We updated the marker designs so that hearted locations are a simple pink icon instead of a heart icon.

Map Callouts

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.

Happy mapping!

Leave a Comment

Pinball Map App 5.3.0 - August 31, 2023 - Pinball Map