Merge pull request #9 from mapbox/pjl/add-ios-interactions

Add Interactions API for iOS Tutorial

Author: pjleonard37

ios-interactions/Interactions.xcodeproj/project.pbxproj

@@ -0,0 +1,11 @@
+{
+  "colors" : [
+    {
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios-interactions/Interactions.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,35 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios-interactions/Interactions.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

ios-interactions/Interactions/Assets.xcassets/AccentColor.colorset/Contents.json

@@ -0,0 +1,85 @@
+import SwiftUI
+import MapboxMaps
+
+struct ContentView: View {
+    @State var selectedPlaces = [StandardPlaceLabelsFeature]()
+    @State private var selectedPriceLabel: FeaturesetFeature?
+
+    var body: some View {
+        Map(initialViewport: .camera(center: .init(latitude: 40.72, longitude: -73.99), zoom: 11, pitch: 45)) {
+            StyleImport(id: "new-york-hotels", uri: StyleURI(url: styleURL)!)
+
+            TapInteraction(.standardPlaceLabels) { placeLabel, _ in
+                selectedPlaces.append(placeLabel)
+                return true
+            }
+
+            ForEvery(selectedPlaces, id: \.id) { placeLabel in
+                FeatureState(placeLabel, .init(select: true))
+            }
+
+            LongPressInteraction { _ in
+                selectedPlaces.removeAll()
+                return true
+            }
+
+            TapInteraction(.featureset("hotels-price", importId: "new-york-hotels")) { priceLabel, _ in
+                /// Select a price label when it's clicked
+                selectedPriceLabel = priceLabel
+                return true
+            }
+
+            if let selectedPriceLabel, let coordinate = selectedPriceLabel.geometry.point?.coordinates {
+                /// When there's a selected price label, we use it to set a feature state.
+                /// The `hidden` state is implemented in `new-york-hotels.json` and hides label and icon.
+                FeatureState(selectedPriceLabel, ["hidden": true])
+
+                /// Instead of label we show a callout annotation with animation.
+                MapViewAnnotation(coordinate: coordinate) {
+                    HotelCallout(feature: selectedPriceLabel)
+                    /// The `id` makes the view to be re-created for each unique feature
+                    /// so appearing animation plays each time.
+                        .id(selectedPriceLabel.id)
+                }
+                .variableAnchors([.init(anchor: .bottom)])
+            }
+        }
+        .mapStyle(.standard(
+            lightPreset: .dawn
+        ))
+        .ignoresSafeArea()
+    }
+}
+
+private struct HotelCallout: View {
+    var feature: FeaturesetFeature
+
+    @State private var scale: CGFloat = 0.1
+
+    var body: some View {
+        VStack(alignment: .center, spacing: 2) {
+            Text(feature.properties["name"]??.string ?? "—")
+                .font(.headline)
+                .foregroundColor(.black)
+            Text(feature.properties["price"]??.number.map { "$ \(Int($0))" } ?? "—")
+                .font(.subheadline)
+                .foregroundColor(.green)
+                .fontWeight(.bold)
+        }
+        .padding(6)
+        .background(Color.white.opacity(0.9))
+        .cornerRadius(8)
+        .scaleEffect(scale, anchor: .bottom)
+        .onAppear {
+            withAnimation(Animation.interpolatingSpring(stiffness: 200, damping: 16)) {
+                scale = 1.0
+            }
+        }
+    }
+}
+
+private let styleURL = Bundle.main.url(forResource: "new-york-hotels", withExtension: "json")!
+
+#Preview {
+    ContentView()
+}

ios-interactions/Interactions/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>MBXAccessToken</key>
+	<string>YOUR_MAPBOX_ACCESS_TOKEN</string>
+</dict>
+</plist>

ios-interactions/Interactions/Assets.xcassets/Contents.json

@@ -0,0 +1,10 @@
+import SwiftUI
+
+@main
+struct InteractionsApp: App {
+    var body: some Scene {
+        WindowGroup {
+            ContentView()
+        }
+    }
+}