Open Hikers App HK

BY Jamie Hsieh & Chris Kusada

“Hike smart. Stay safe. Share the trail.”

🌿 What This App Will Do

Imagine a smart map just for hikers. When someone finds something dangerous — a snake on the trail, a small landslide, or a broken bridge — they can tap a button and share it. Everyone else sees the update right away on the map, so they can stay safe!

🗺️ The Heart of It: A Live Map

The map shows trails, mountains, and all the shared alerts with colorful icons. You can zoom, move around, or tap on a marker to read what happened there.

Later on, the map could also show statistics — like how many accidents happened this month — or even show heat colors for busy or risky zones.

👷 What We'll Learn Over Time

• How to use Mapbox to show real maps in your app.

• How to let users add new alerts.

• How to make the app save and share data safely.

  
  

The Ultimate Goal

Build something real, useful, and kind — a tool that helps hikers look out for one another. Step by step, we’ll learn how maps, apps, and communities connect.

---

🗺️ Day 1

We are not hiking yet or showing trails — that’s for later! For now, our goal is simple: get a map to appear in our app.

🧰 Step 1 – Open your Xcode project

1. Open your app project (or create a new iOS App (App) → SwiftUI project).

2. Name it for example: MapboxDay1.

🔑 Step 2 – Get Your Mapbox Token

1. Go to https://account.mapbox.com/.

2. Create a free account if you haven’t.

3. You’ll get a token that looks like:

   pk.eyJ1IjoiZXhhbXBsZSIsImEiOiJjb...

4. Copy it — you’ll need it soon.

📦 Step 3 – Add Mapbox SDK

1. In Xcode, click:

   
   

   File → Add Packages…

2. Paste this URL:

   https://github.com/mapbox/mapbox-maps-ios.git

3. Choose version rule: Up to Next Major (use latest stable, usually v12+).

4. Add the package to your app target.

Xcode will download and link the Mapbox SDK.

🗂️ Step 4 – Add Token to Info.plist

Open your app’s Info.plist fileand add this new key and string value:

xml

<key>MBXAccessToken</key>
<string>YOUR_MAPBOX_ACCESS_TOKEN_HERE</string>

(replace the text inside the string with your real token)

🖥️ Step 5 – Create a Map View

You’ll use a UIViewRepresentable wrapper so a UIKit map can appear inside SwiftUI.

Create a new Swift file called MapView.swift and paste this code:

swift

import SwiftUI
import MapboxMaps
import CoreLocation

struct MapboxView: UIViewRepresentable {
    func makeUIView(context: Context) -> MapView {
        // Set up how the map begins
        let resourceOptions = ResourceOptionsManager.default.resourceOptions
        let initOptions = MapInitOptions(resourceOptions: resourceOptions)

        let mapView = MapView(frame: .zero, mapInitOptions: initOptions)

        // Set the initial camera (center on Hong Kong)
        let center = CLLocationCoordinate2D(latitude: 22.3193, longitude: 114.1694)
        mapView.mapboxMap.setCamera(to: CameraOptions(center: center, zoom: 10))

        return mapView
    }

    func updateUIView(_ uiView: MapView, context: Context) {
        // For now, nothing to update
    }
}

🧱 Step 6 – Show It in Your ContentView

Edit your ContentView.swift to display that map:

swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        MapboxView()
            .ignoresSafeArea()   // make it full screen
    }
}

#Preview {
    ContentView()
}

▶️ Step 7 – Run the App

1. Choose a simulator (like iPhone 15 Pro)

2. Press Run ▶️

If you see a real interactive map of Hong Kong, congratulations! 🎉You can pinch to zoom or move around with the mouse.

🧩 Optional Nice Touches

Show user location (bonus):In your app’s Info.plist, also add:

xml

<key>NSLocationWhenInUseUsageDescription</key>
<string>We use your location to show where you are on the hiking map.</string>