Jack Sparrow's Compass

The iOS compass app is great for pointing north. But what about if you want to point somewhere else? This was a quick two-hour project to whip up a web app for pointing to a static location, much like Jack Sparrow's compass from the Pirates of the Caribbean.

Ideally something like this would be customizable where you could select the coordinates on the map, but this was a quick project for someone from college so it's just hosted with the coordinates he wanted at https://alexbeals.com/projects/barn/. However the GitHub (it's PHP but trivially convertible to HTML) for the website can all be found here if you wanted to customize it.

Alpha Chi Alpha barn AXA dartmouth old barn pong sink find the barn axa barn which direction salute sinking pong respecting women

When you first open the website two popups show up. 1 I think ideally it would wait until you responded to the first before prompting the second, overlapping permission dialogs looks horrendous. But again, two hour timebox so 🤷‍♂️. One stems from navigator.geolocation.getCurrentPosition which is used to calculate the distance you are from the given point. The other is from DeviceOrientationEvent.requestPermission() to know which direction your phone is pointing.

Once both are accepted then it calculates your distance and bearing, and has a live updating compass as you rotate the phone. You may need to tweak the CSS offsets for the rotating text that floats around, but "Barn" was short enough that it was relatively easy to fit and have look good.

All in all, a quick and easy project, made all the easier by iMac's iPhone Mirroring app for screen recording, which is quickly becoming a huge asset for automating stuff on iOS.

  1. I think ideally it would wait until you responded to the first before prompting the second, overlapping permission dialogs looks horrendous. But again, two hour timebox so 🤷‍♂️. ↩︎