Usando o Tangram ES para iOS com o Amazon Location Service

O Tangram ES é uma biblioteca C++ para renderizar mapas 2D e 3D a partir de dados vetoriais usando o OpenGL ES. É a contraparte nativa do Tangram.

Os estilos do Tangram criados para funcionar com o esquema Tilezen são amplamente compatíveis com o Amazon Location ao usar mapas da HERE. Isso inclui:

• Bubble Wrap — Um estilo de orientação completo com ícones úteis para pontos de interesse

• Cinnabar — Um visual clássico e ideal para aplicações gerais de mapeamento

• Refill — Um estilo de mapa minimalista projetado para sobreposições de visualização de dados, inspirado no estilo seminal de Toner da Stamen Design

• Tron — Uma exploração das transformações de escala na linguagem visual de TRON

• Walkabout — Um estilo voltado para atividades ao ar livre que é perfeito para caminhar ou passear

Este guia descreve como integrar o Tangram ES para iOS com o Amazon Location usando o estilo Tangram chamado Cinnabar. Essa amostra está disponível como parte do repositório de amostras do Amazon Location Service em GitHub.

Embora outros estilos do Tangram sejam melhor acompanhados por blocos raster, que codificam informações sobre o terreno, esse atributo ainda não é suportado pelo Amazon Location.

Importante

Os estilos do Tangram no tutorial a seguir são compatíveis somente com os recursos de mapa do Amazon Location configurados com o estilo VectorHereContrast.

Construindo o aplicativo: inicialização

Como inicializar o aplicativo:

1. Crie um novo projeto Xcode a partir do modelo Aplicativo.

2. Selecione SwiftUI para sua interface.

3. Selecione o aplicativo SwiftUI para seu Ciclo de vida.

4. Selecione Swift como seu idioma.

Construindo o aplicativo: adicionar dependências

Para adicionar dependências, você pode usar um gerenciador de dependências, como: CocoaPods

1. No seu terminal, instale CocoaPods:

   sudo gem install cocoapods

2. Navegue até o diretório do projeto do seu aplicativo e inicialize o Podfile com o gerenciador de CocoaPods pacotes:

   pod init

3. Abra o Podfile para adicionar AWSCore e Tangram-es como dependências:

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

4. Baixe e instale dependências:

   pod install --repo-update

5. Abra a área de trabalho do Xcode que CocoaPods criou:

   xed .

Construindo o aplicativo: configuração

Adicione as seguintes chaves e valores ao Info.plist para configurar o aplicativo e desativar a telemetria:

Chave	Valor
AWSRegion	us-east-1
IdentityPoolId	us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd
MapName	ExampleMap
SceneURL	https://www.nextzen.org/carto/cinnabar-style/9/cinnabar-style.zip

Construindo o aplicativo: ContentView layout

Para renderizar o mapa, edite ContentView.swift:

• Adicione um MapView que renderiza o mapa.

• Adicione um TextField que exiba a atribuição.

Isso também define o ponto central inicial do mapa.

nota

Você deve fornecer uma marca nominativa ou atribuição de texto para cada provedor de dados que você usa, seja em seu aplicativo ou em sua documentação. As strings de atribuição estão incluídas na resposta do descritor de estilo sob as teclas sources.esri.attribution, sources.here.attribution e source.grabmaptiles.attribution. Ao usar os recursos do Amazon Location com provedores de dados, certifique-se de ler os termos e condições do serviço.

import SwiftUI
import TangramMap
 
struct ContentView: View {
    var body: some View {
        MapView()
            .cameraPosition(TGCameraPosition(
                                center: CLLocationCoordinate2DMake(49.2819, -123.1187),
                                zoom: 10,
                                bearing: 0,
                                pitch: 0))
            .edgesIgnoringSafeArea(.all)
            .overlay(
                Text("© 2020 HERE")
                    .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()
    }
}

Construindo o aplicativo: Solicitar transformação

Crie um novo arquivo Swift chamado AWSSignatureV4URLHandler.swift contendo a seguinte definição de classe para interceptar solicitações AWS e assiná-las usando o Signature versão 4. Isso será registrado como um manipulador de URL dentro do MapView do Tangram.

import AWSCore
import TangramMap
 
class AWSSignatureV4URLHandler: TGDefaultURLHandler {
    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()
    }
 
    override func downloadRequestAsync(_ url: URL, completionHandler: @escaping TGDownloadCompletionHandler) -> UInt {
        if url.host?.contains("amazonaws.com") != true {
            // not an AWS URL
            return super.downloadRequestAsync(url, completionHandler: completionHandler)
        }
 
        // URL-encode spaces, etc.
        let keyPath = String(url.path.dropFirst())
        guard let keyPathSafe = keyPath.addingPercentEncoding(withAllowedCharacters: .urlPathAllowed) else {
            print("Invalid characters in path '\(keyPath)'; unsafe to sign")
            return super.downloadRequestAsync(url, completionHandler: completionHandler)
        }
 
        // sign the URL
        let endpoint = AWSEndpoint(region: region, serviceName: "geo", url: url)
        let requestHeaders: [String: String] = ["host": endpoint!.hostName]
        let task = AWSSignatureV4Signer
            .generateQueryStringForSignatureV4(
                withCredentialProvider: credentialsProvider,
                httpMethod: .GET,
                expireDuration: 60,
                endpoint: endpoint!,
                keyPath: keyPathSafe,
                requestHeaders: requestHeaders,
                requestParameters: .none,
                signBody: true)
        task.waitUntilFinished()
 
        if let error = task.error as NSError? {
            print("Error occurred: \(error)")
        }
 
        if let result = task.result {
            // have Tangram fetch the signed URL
            return super.downloadRequestAsync(result as URL, completionHandler: completionHandler)
        }
 
        // fall back to an unsigned URL
        return super.downloadRequestAsync(url, completionHandler: completionHandler)
    }
}

Construindo o aplicativo: visualização do mapa

A visualização do mapa é responsável por inicializar uma instância de AWSSignatureV4Delegate e configurar o MGLMapView subjacente, que busca recursos e renderiza o mapa. Ele também lida com a propagação de cadeias de atribuição da fonte do descritor de estilo de volta para o ContentView.

Crie um novo arquivo Swift chamado MapView.swift contendo a seguinte definição de struct:

import AWSCore
import TangramMap
import SwiftUI
 
struct MapView: UIViewRepresentable {
    private let mapView: TGMapView
 
    init() {
        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 sceneURL = URL(string: Bundle.main.object(forInfoDictionaryKey: "SceneURL") as! String)!
 
        let region = (regionName as NSString).aws_regionTypeValue()
 
        // rewrite tile URLs to point at AWS resources
        let sceneUpdates = [
            TGSceneUpdate(path: "sources.mapzen.url",
                          value: "https://maps.geo.\(regionName).amazonaws.com/maps/v0/maps/\(mapName)/tiles/{z}/{x}/{y}")]
 
        // instantiate a TGURLHandler that will sign AWS requests
        let urlHandler = AWSSignatureV4URLHandler(region: region, identityPoolId: identityPoolId)
 
        // instantiate the map view and attach the URL handler
        mapView = TGMapView(frame: .zero, urlHandler: urlHandler)
 
        // load the map style and apply scene updates (properties modified at runtime)
        mapView.loadScene(from: sceneURL, with: sceneUpdates)
    }
 
    func cameraPosition(_ cameraPosition: TGCameraPosition) -> MapView {
        mapView.cameraPosition = cameraPosition
 
        return self
    }
 
    // MARK: - UIViewRepresentable protocol
 
    func makeUIView(context: Context) -> TGMapView {
        return mapView
    }
 
    func updateUIView(_ uiView: TGMapView, context: Context) {
    }
}

A execução deste aplicativo exibe um mapa em tela cheia no estilo de sua escolha. Essa amostra está disponível como parte do repositório de amostras do Amazon Location Service em GitHub.