takaaki024 appstakaaki024 apps
  • English
  • 日本語
  • English
  • 日本語
  • PullUpPark – Parks with Pull-Up Bars

PullUpPark – Parks with Pull-Up Bars

Collecting parks with horizontal bars or playground equipment for pull-ups. Time to do some pull-ups!

PullUpPark – Parks with Pull-Up Bars

This app simply displays the park pins published on the website “List of Parks with Pull-Up Bars.”

Available on the App Store

If you’re interested, search for “pull up” on the App Store, or use the link below to the App Store page.

Download pull-up-park on App Store

.

..

...


Info

Everything below is written purely from a geeky developer’s perspective, so please read on only if you’re interested.

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
    1. Export as KML
    1. Convert to Markdown
    1. Publish on the web with VuePress

Here’s the workflow for the app version:

    1. Register pins in Google My Maps
    1. Export as KML
    1. Convert to GeoJSON
    1. Upload to Mapbox Tileset
    1. 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.