Building a Virtual Compass App

Building a Virtual Compass App with React and TypeScript: Technical Details

This artigo dives deeper into the technical aspects of building the virtual compass app introduced in the previous post. We'll explore the key features, the mathematical formulas used for calculations, and how city coordinates were fetched using an API.

Key Features of the App

• Distance Calculation: Computes the straight-line distance (in kilometers) between two cities based on their geographic coordinates.
• Bearing Calculation: Determines the orientation from the origin city to the destination, displayed as a directional arrow in the virtual compass.
• City Coordinate Lookup: Fetches latitude and longitude for cities using a public API.
• Interactive Virtual Compass: Renders a compass with a pointer dynamically oriented toward the destination.

Mathematical Formulas

1. Distance Calculation (Haversine Formula)

The Haversine formula is used to calculate the great-circle distance between two points on the Earth:

d = 2 * R * arcsin(√(sin²(Δφ/2) + cos(φ1) * cos(φ2) * sin²(Δλ/2)))

Where:

• φ1, φ2: Latitudes of the two points in radians.
• Δφ: Difference in latitudes (φ2 - φ1).
• Δλ: Difference in longitudes (λ2 - λ1).
• R: Radius of the Earth (approximately 6371 km).

2. Bearing Calculation

The formula for calculating the bearing from one point to another is:

θ = atan2(sin(Δλ) * cos(φ2), cos(φ1) * sin(φ2) - sin(φ1) * cos(φ2) * cos(Δλ))

Where θ is the bearing in radians, converted to degrees after calculation.

Fetching City Coordinates

To fetch the coordinates of cities, the app uses the OpenStreetMap Geocoding API:

`https://nominatim.openstreetmap.org/search` params: q: city, format: "json", limit: 1

The response includes latitude and longitude, which are used in the distance and bearing calculations.

Technical Details

1. Built with React and TypeScript

The app leverages React for its component-based architecture and TypeScript for type safety and improved development experience.

2. Interactive Compass

The compass is rendered using CSS and dynamically rotates based on the bearing calculated. A red pointer marks the direction toward the destination.

3. API Integration

The app integrates with the OpenCage API to fetch city coordinates dynamically based on user input. Error handling is implemented to ensure robustness.

4. Deployment

The app is deployed for a seamless and scalable hosting solution, ensuring fast performance.

Conclusion

This app demonstrates how mathematical principles, modern web technologies, and APIs can be combined to create an interactive and educational tool. Try the app now and explore the distances and orientations between cities!