Uso de Tangram ES para iOS con Amazon Location Service

Tangram ES es una biblioteca de C++ para renderizar mapas 2D y 3D a partir de datos vectoriales utilizando OpenGL ES. Es la contraparte nativa de Tangram.

Los estilos de Tangram diseñados para funcionar con el esquema de Tilezen son en gran medida compatibles con Amazon Location cuando se utilizan mapas de HERE. Entre ellos se incluyen:

• Bubble Wrap: un estilo de orientación con todas las funciones e íconos útiles para los puntos de interés

• Cinnabar: un diseño clásico, ideal para aplicaciones generales de cartografía

• Refill: un estilo de mapa minimalista diseñado para superposiciones de visualización de datos, inspirado en el popular estilo de Toner de Stamen Design

• Tron: una exploración de las transformaciones de escala en el lenguaje visual de TRON

• Walkabout: un estilo centrado en actividades al aire libre que es perfecto para practicar senderismo o salir a pasear

Esta guía describe cómo integrar Tangram ES para iOS con Amazon Location utilizando el estilo Tangram llamado Cinnabar. Este ejemplo está disponible como parte del repositorio de muestras de Amazon Location Service en GitHub.

Mientras que otros estilos de Tangram se acompañan mejor de mosaicos rasterizados, que codifican la información del terreno, esta característica aún no es compatible con Amazon Location.

importante

Los estilos Tangram del siguiente tutorial sólo son compatibles con los recursos de mapa de Amazon Location configurados con el estilo VectorHereContrast.

Creación de la aplicación: inicialización

Para inicializar la aplicación:

1. Crear un nuevo proyecto Xcode a partir de la plantilla App.

2. Seleccione SwiftUI para su interfaz.

3. Seleccione la aplicación SwiftUI para su ciclo de vida.

4. Seleccione Swift como su idioma.

Creación de la aplicación: agregar dependencias

Para añadir dependencias, puede utilizar un administrador de dependencias, como CocoaPods:

1. En tu terminal, instala CocoaPods:

   sudo gem install cocoapods

2. Navega hasta el directorio de proyectos de tu aplicación e inicializa el Podfile con el administrador de CocoaPods paquetes:

   pod init

3. Abra el Podfile para agregar AWSCore y Tangram-es como dependencias:

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

4. Descarga e instalación de dependencias:

   pod install --repo-update

5. Abre el espacio de trabajo de Xcode que creó: CocoaPods

   xed .

Creación de la aplicación: configuración

Agregue las siguientes claves y valores a Info.plist para configurar la aplicación y deshabilitar la telemetría:

Clave	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

Creación de la aplicación: diseño ContentView

Para renderizar el mapa, edite ContentView.swift:

• Agregue un MapView, que renderice el mapa.

• Agregue un TextField, que muestre la atribución.

Esto también establece el punto central inicial del mapa.

nota

Debe proporcionar una marca denominativa o una atribución de texto para cada proveedor de datos que utilice, ya sea en su solicitud o en su documentación. Los string de atribución se incluyen en la respuesta del descriptor de estilo, debajo de las claves sources.esri.attribution, sources.here.attribution, y source.grabmaptiles.attribution. Cuando utilice los recursos de Amazon Location con proveedores de datos, asegúrese de leer los términos y condiciones del servicio.

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()
    }
}

Creación de la aplicación: solicite la transformación

Cree un nuevo archivo Swift denominado AWSSignatureV4URLHandler.swift que contenga la siguiente definición de clase para interceptar las solicitudes de AWS y firmarlas con Signature Version 4. Esto se registrará como un controlador de URL en Tangram MapView.

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)
    }
}

Creación de la aplicación: vista de mapa

La vista de mapa se encarga de inicializar una instancia AWSSignatureV4Delegate y configurar la instancia subyacenteMGLMapView, que recupera los recursos y renderiza el mapa. También gestiona la propagación de las cadenas de atribución desde la fuente del descriptor de estilo hasta la ContentView.

Cree un nuevo archivo Swift denominado MapView.swift que contenga la structsiguiente definición:

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) {
    }
}

Al ejecutar esta aplicación, se muestra un mapa a pantalla completa con el estilo que elija. Este ejemplo está disponible como parte del repositorio de muestras de Amazon Location Service en GitHub.