PullUpPark – Parks with Pull-Up Bars

This is a self-indulgent app I made for my own park-hopping trips, with features I personally wanted (route search, filtering by whether photos exist, etc.). So the explanation here is also purely from my self-indulgent perspective (and I’ll drop in development talk without explanation).

Issues with the Web Version

Issue 1: Pin size

• On Google Maps, when you zoom out, the pins stay big.
• This hides pins in the background and makes it impossible to get a good overview of the color-coding when zoomed out.

Issue 2: Pin color-coding

• In Google My Maps, color-coding is manual and you can only have one type.
• Currently, the only color-coding is “whether there’s a photo” — which for me (as the administrator) also indicates “visited or not.” Not exactly user-friendly.

Issue 3: Pin visibility toggling

• I want to show only parks I haven’t visited yet (i.e., hide the red pins).

Issue 4: Route registration

• Google Maps can only register up to 10 places.
• You could bookmark them in sets of 10 in your browser, but rearranging them later is a hassle.

How the App Version Solves These

Solution 1: Pin size

• Using Mapbox’s expression conditions, the pin size can change depending on zoom level.
• Even the outlines can be changed, so you can make it “look like Google Maps when zoomed in, show only colors when zoomed out.” Very nice.

Solution 2: Pin color-coding

• This also uses Mapbox expressions for color-coding, so in theory, it could be changed to other criteria in the future.
• It might be fun to color-code by type of equipment or manufacturer… though I’m not sure anyone actually needs that.

Solution 3: Pin visibility toggling

• Now you can toggle them on/off with a single button. Very nice.
• Again, this just uses Mapbox expressions to hide items that match certain conditions.

→ I’ve posted a sample for this on my tips site. (With just that, you could recreate the same thing. I think that’s pretty generous of me.)

https://tips.takaaki024.com/memo/ios-app-dev-memo/mapbox/sample-park-coloring-by-status

Solution 4: Route registration

• You can now save routes as favorites.
• In a day, you can probably visit around 50 places at most, so that amount of registration is fine.
• Even if you’ve saved a route but later new pins are added, you can add them afterward. Very nice.

→ I’ve also posted details on integrating route search (via MapKit) with Mapbox on my tips site. (You won’t find it in search, so it’s probably rare info.)

https://tips.takaaki024.com/memo/ios-app-dev-memo/mapbox/sample-integration-with-mapkit

Development Issues & Solutions

This section is basically just me praising Mapbox.

Performance

• In the SwiftUI version of MapKit, drawing pins using Annotations becomes unusable at around 1,000 pins (lag… lag… with waits of 10 seconds or more).
• I haven’t tested massive numbers of pins with Mapbox Annotations, but if you use the Layer feature, it stays smooth even with 11,000 pins. Honestly unbelievable (which means: I think Mapbox is amazing).

Data management

Here’s the workflow for the website version:

• 1. Register pins in Google My Maps
• 2. Export as KML
• 3. Convert to Markdown
• 4. Publish on the web with VuePress

Here’s the workflow for the app version:

• 1. Register pins in Google My Maps
• 2. Export as KML
• 3. Convert to GeoJSON
• 4. Upload to Mapbox Tileset
• 5. App reads and displays the Mapbox Tileset

Steps 3 and 4 in the app version can be done via command line, and the app doesn’t need to be re-released, so operational workload doesn’t increase much.

I considered various options for data syncing — hosting GeoJSON on a server and fetching it (seemed troublesome), using Core Data on iCloud (too slow to be practical), or Firebase (don’t want to pay) — so in the end, using Mapbox’s own system made everything neat and simple.

One caution: if you experiment too much with step [4], you can easily rack up charges in the thousands of yen, so watch out.