Menggunakan MapLibre Native SDK for iOS dengan Amazon Location Service

Gunakan MapLibreNative SDK for iOS untuk menyematkan peta sisi klien ke dalam aplikasi iOS.

MapLibre Native SDK for iOS adalah pustaka berdasarkan Mapbox GL Native, dan kompatibel dengan gaya dan ubin yang disediakan oleh Amazon Location Service Maps API. Anda dapat mengintegrasikan MapLibre Native SDK for iOS untuk menyematkan tampilan peta interaktif dengan peta vektor yang dapat diskalakan dan dapat disesuaikan ke dalam aplikasi iOS Anda.

Tutorial ini menjelaskan cara mengintegrasikan MapLibre Native SDK for iOS dengan Amazon Location. Aplikasi sampel untuk tutorial ini tersedia sebagai bagian dari repositori sampel Amazon Location Service di. GitHub

Membangun aplikasi: Inisialisasi

Untuk menginisialisasi aplikasi Anda:

1. Buat proyek Xcode baru dari template App.

2. Pilih SwiftUI untuk antarmukanya.

3. Pilih aplikasi SwiftUI untuk Siklus Hidupnya.

4. Pilih Swift untuk bahasanya.

Menambahkan MapLibre dependensi menggunakan Paket Swift

Untuk menambahkan ketergantungan paket ke proyek Xcode Anda:

1. Arahkan ke File> Paket Swift > Add Package Dependency.

2. Masukkan URL repositori: https://github.com/maplibre/maplibre-gl-native-distribution

   catatan

   Untuk informasi selengkapnya tentang Paket Swift, lihat Menambahkan Dependensi Paket ke Aplikasi Anda di Apple.com

3. Di terminal Anda, instal CocoaPods:

   sudo gem install cocoapods

4. Arahkan ke direktori proyek aplikasi Anda dan inisialisasi Podfile dengan manajer CocoaPods paket:

   pod init

5. Buka Podfile untuk ditambahkan AWSCore sebagai dependensi:

   platform :ios, '12.0'
    
   target 'Amazon Location Service Demo' do
     use_frameworks!
    
     pod 'AWSCore'
   end

6. Unduh dan instal dependensi:

   pod install --repo-update

7. Buka ruang kerja Xcode yang membuat CocoaPods :

   xed .

Membangun aplikasi: Konfigurasi

Tambahkan kunci dan nilai berikut ke Info.plist untuk mengkonfigurasi aplikasi:

Kunci	Nilai
AWSRegion	us-east-1
IdentityPoolId	us-timur- 1:54 f2ba88-9390-498d-aaa5-0d97fb7ca3bd
MapName	ExampleMap

Membangun aplikasi: ContentView tata letak

Untuk merender peta, editContentView.swift:

• Tambahkan MapView yang membuat peta.

• Tambahkan TextField yang menampilkan atribusi.

Ini juga menetapkan titik pusat awal peta.

import SwiftUI
 
struct ContentView: View {
    @State private var attribution = ""
 
    var body: some View {
        MapView(attribution: $attribution)
            .centerCoordinate(.init(latitude: 49.2819, longitude: -123.1187))
            .zoomLevel(12)
            .edgesIgnoringSafeArea(.all)
            .overlay(
                TextField("", text: $attribution)
                    .disabled(true)
                    .font(.system(size: 12, weight: .light, design: .default))
                    .foregroundColor(.black)
                    .background(Color.init(Color.RGBColorSpace.sRGB, white: 0.5, opacity: 0.5))
                    .cornerRadius(1),
                alignment: .bottomTrailing)
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

catatan

Anda harus memberikan tanda kata atau atribusi teks untuk setiap penyedia data yang Anda gunakan, baik pada aplikasi atau dokumentasi Anda. String atribusi disertakan dalam respons deskriptor gaya di bawahsources.esri.attribution,sources.here.attribution, dan kunci. source.grabmaptiles.attribution Saat menggunakan sumber daya Lokasi Amazon dengan penyedia data, pastikan untuk membaca syarat dan ketentuan layanan.

Membangun aplikasi: Minta transformasi

Buat file Swift baru bernama AWSSignatureV4Delegate.swift berisi definisi kelas berikut untuk mencegat permintaan AWS dan menandatanganinya menggunakan Signature Version 4. Sebuah instance dari kelas ini akan ditetapkan sebagai delegasi penyimpanan offline, yang juga bertanggung jawab untuk menulis ulang URL, dalam tampilan peta.

import AWSCore
import Mapbox
 
class AWSSignatureV4Delegate : NSObject, MGLOfflineStorageDelegate {
    private let region: AWSRegionType
    private let identityPoolId: String
    private let credentialsProvider: AWSCredentialsProvider
 
    init(region: AWSRegionType, identityPoolId: String) {
        self.region = region
        self.identityPoolId = identityPoolId
        self.credentialsProvider = AWSCognitoCredentialsProvider(regionType: region, identityPoolId: identityPoolId)
        super.init()
    }
 
    class func doubleEncode(path: String) -> String? {
        return path.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)?
            .addingPercentEncoding(withAllowedCharacters: .urlPathAllowed)
    }
 
    func offlineStorage(_ storage: MGLOfflineStorage, urlForResourceOf kind: MGLResourceKind, with url: URL) -> URL {
        if url.host?.contains("amazonaws.com") != true {
            // not an AWS URL
            return url
        }
 
        // URL-encode spaces, etc.
        let keyPath = String(url.path.dropFirst())
        guard let percentEncodedKeyPath = keyPath.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed) else {
            print("Invalid characters in path '\(keyPath)'; unsafe to sign")
            return url
        }
 
        let endpoint = AWSEndpoint(region: region, serviceName: "geo", url: url)
        let requestHeaders: [String: String] = ["host": endpoint!.hostName]
 
        // sign the URL
        let task = AWSSignatureV4Signer
            .generateQueryStringForSignatureV4(
                withCredentialProvider: credentialsProvider,
                httpMethod: .GET,
                expireDuration: 60,
                endpoint: endpoint!,
                // workaround for https://github.com/aws-amplify/aws-sdk-ios/issues/3215
                keyPath: AWSSignatureV4Delegate.doubleEncode(path: percentEncodedKeyPath),
                requestHeaders: requestHeaders,
                requestParameters: .none,
                signBody: true)
        task.waitUntilFinished()
 
        if let error = task.error as NSError? {
            print("Error occurred: \(error)")
        }
 
        if let result = task.result {
            var urlComponents = URLComponents(url: (result as URL), resolvingAgainstBaseURL: false)!
            // re-use the original path; workaround for https://github.com/aws-amplify/aws-sdk-ios/issues/3215
            urlComponents.path = url.path
 
            // have Mapbox GL fetch the signed URL
            return (urlComponents.url)!
        }
 
        // fall back to an unsigned URL
        return url
    }
}

Membangun aplikasi: Tampilan peta

Tampilan Peta bertanggung jawab untuk menginisialisasi instance AWSSignatureV4Delegate dan mengonfigurasi yang mendasarinyaMGLMapView, yang mengambil sumber daya dan merender peta. Ini juga menangani penyebaran string atribusi dari sumber deskriptor gaya kembali ke. ContentView

Buat file Swift baru bernama MapView.swift berisi struct definisi berikut:

import SwiftUI
import AWSCore
import Mapbox
 
struct MapView: UIViewRepresentable {
    @Binding var attribution: String
 
    private var mapView: MGLMapView
    private var signingDelegate: MGLOfflineStorageDelegate
 
    init(attribution: Binding<String>) {
        let regionName = Bundle.main.object(forInfoDictionaryKey: "AWSRegion") as! String
        let identityPoolId = Bundle.main.object(forInfoDictionaryKey: "IdentityPoolId") as! String
        let mapName = Bundle.main.object(forInfoDictionaryKey: "MapName") as! String
 
        let region = (regionName as NSString).aws_regionTypeValue()
 
        // MGLOfflineStorage doesn't take ownership, so this needs to be a member here
        signingDelegate = AWSSignatureV4Delegate(region: region, identityPoolId: identityPoolId)
 
        // register a delegate that will handle SigV4 signing
        MGLOfflineStorage.shared.delegate = signingDelegate
 
        mapView = MGLMapView(
            frame: .zero,
            styleURL: URL(string: "https://maps.geo.\(regionName).amazonaws.com/maps/v0/maps/\(mapName)/style-descriptor"))
 
        _attribution = attribution
    }
 
    func makeCoordinator() -> Coordinator {
        Coordinator($attribution)
    }
 
    class Coordinator: NSObject, MGLMapViewDelegate {
        var attribution: Binding<String>
 
        init(_ attribution: Binding<String>) {
            self.attribution = attribution
        }
 
        func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
            let source = style.sources.first as? MGLVectorTileSource
            let attribution = source?.attributionInfos.first
            self.attribution.wrappedValue = attribution?.title.string ?? ""
        }
    }
 
    // MARK: - UIViewRepresentable protocol
 
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MGLMapView {
        mapView.delegate = context.coordinator
 
        mapView.logoView.isHidden = true
        mapView.attributionButton.isHidden = true
        return mapView
    }
 
    func updateUIView(_ uiView: MGLMapView, context: UIViewRepresentableContext<MapView>) {
    }
 
    // MARK: - MGLMapView proxy
 
    func centerCoordinate(_ centerCoordinate: CLLocationCoordinate2D) -> MapView {
        mapView.centerCoordinate = centerCoordinate
        return self
    }
 
    func zoomLevel(_ zoomLevel: Double) -> MapView {
        mapView.zoomLevel = zoomLevel
        return self
    }
}

Menjalankan aplikasi ini menampilkan peta layar penuh dengan gaya yang Anda pilih. Sampel ini tersedia sebagai bagian dari repositori sampel Amazon Location Service di. GitHub