Day 21 of #javascript30 is making a compass and speedometer for the phone.
Using the iOS simulator on the mac for development I made a compass and speedometer.
Launching iOS Simulator
The simulator is built into Xcode which I never use. I do like the simulator for testing though, so I thought I'd post a tip on how to launch it without seeing Xcode:
- One last time — launch Xcode and use the menu item Xcode -> Open Developer Tool -> Simulator
- Drag the icon from the "open apps" area to the dock somewhere.
Next time you need the simulator, you can just launch it from the Dock instead of opening Xcode to open it.
Geolocation in the browser
There is a Navigator.geolocation property that has a watchPosition() method. The first parameter is a success callback and the (optional) second parameter is an error callback. There is a third one for options.
Putting it all together is as easy as this:
const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');
navigator.geolocation.watchPosition((data) => {
arrow.style.transform =`rotate(${data.coords.heading}deg)`;
speed.textContent = data.coords.speed;
}, (err) => {
alert('Allow location or no worky');
});
where arrow is a round object that can be rotated and speed is just text. It will update when you move around. If you are not moving around while developing you are a lot like me, so in Simulator — go to Debug -> Location and choose "City Bicycle Ride" for instance to simulate a you moving around. You can open Safari and use the Web Inspector to inspect the simulated iOS by choosing Develop -> Simulator from Safari's menu.