Afficher des informations sur les fonctionnalités dans le kit de développement logiciel (SDK) iOS (préversion)

Les données spatiales sont souvent représentées à l’aide de points, de lignes et de polygones. Ces données sont souvent associées à des informations de métadonnées. Par exemple, un point peut représenter l’emplacement d’un restaurant, dont le nom, l’adresse et le type de nourriture proposé constituent les métadonnées. Ces métadonnées peuvent être ajoutées dans les propriétés d’une Feature GeoJSON. Le code suivant crée une caractéristique de point simple avec une propriété title dont la valeur est "Hello World!".

// Create a data source and add it to the map.
let source = DataSource()
map.sources.add(source)

// Create a point feature.
let feature = Feature(Point(CLLocationCoordinate2D(latitude: -122.33, longitude: 47.64)))

// Add a property to the feature.
feature.addProperty("title", value: "Hello World!")

// Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature: feature)

Pour plus d’informations sur la création et l’ajout de données à la carte, consultez Créer une source de données.

Quand un utilisateur interagit avec une caractéristique sur la carte, des événements peuvent être utilisés pour réagir à ces actions. Un scénario courant consiste à afficher un message constitué des propriétés de métadonnées d’une caractéristique avec laquelle l’utilisateur a interagi. L’événement azureMap(_:didTapOn:) est l’événement principal utilisé pour détecter quand l’utilisateur a appuyé sur une caractéristique sur la carte. Il existe également un événement azureMap(_:didLongPressOn:). Quand vous ajoutez un délégué à la carte, vous pouvez le limiter à un seul calque en transmettant l’ID d’un calque auquel le limiter. Si aucun ID de calque n’est transmis, le fait de cliquer sur n’importe quelle caractéristique de la carte, quelle que soit le calque dans lequel elle se trouve, déclenche cet événement. Le code suivant crée un calque de symboles pour afficher des données de point sur la carte, puis ajoute un délégué, limité à ce calque de symboles qui gère l’événement azureMap(_:didTapOn:).

// Create a symbol and add it to the map.
let layer = SymbolLayer(source: source)
map.layers.addLayer(layer)

// Add the delegate to the map to handle feature tap events on the layer only.
map.events.addDelegate(self, for: [layer.id])

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    // Retrieve the title property of the feature as a string.
    let title = features.first?.properties["title"] as? String

    // Do something with the title.
}

Afficher une alerte

Les alertes sont l’un des moyens les plus simples de présenter des informations à l’utilisateur. Elles sont généralement disponibles dans toutes les versions d’iOS. Si vous souhaitez fournir rapidement une information à l’utilisateur concernant l’objet sur lequel il a appuyé, une alerte peut être une bonne option. Le code suivant montre comment utiliser une alerte avec l’événement azureMap(_:didTapOn:).

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    // Retrieve the title property of the feature as a string.
    let title = features.first?.properties["title"] as? String

    // Display an alert with the title information.
    let alert = UIAlertController(title: title, message: nil, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .cancel))
    present(alert, animated: true)
}

Outre les alertes, il existe de nombreuses autres façons de présenter les propriétés de métadonnées d’une caractéristique, par exemple :

• Ajouter une vue personnalisée sur la carte
• Ajouter un contrôleur d’affichage enfant sur la carte
• Présenter de façon modale un autre contrôleur d’affichage sur le contrôleur actuel.
• Accéder à un autre contrôleur d’affichage.

Afficher une fenêtre contextuelle

Le SDK Azure Maps iOS fournit une Popup classe qui facilite la création d’éléments d’annotation d’interface utilisateur qui sont ancrés à une position sur la carte. Pour les fenêtres contextuelles, vous devez passer une vue dimensionnée automatiquement dans l’option content de la fenêtre contextuelle. Voici un exemple de vue simple qui affiche un texte sombre sur un arrière-plan blanc.

class PopupTextView: UIView {
    private let textLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 0
        label.textColor = UIColor(red: 34 / 255, green: 34 / 255, blue: 34 / 255, alpha: 1)
        label.font = .systemFont(ofSize: 18)
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        setup()
    }

    private func setup() {
        backgroundColor = .white
        addSubview(textLabel)

        NSLayoutConstraint.activate([
            textLabel.topAnchor.constraint(equalTo: topAnchor, constant: 10),
            textLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10),
            textLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
            textLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -25)
        ])
    }

    func setText(_ text: String) {
        textLabel.text = text
    }
}

Le code suivant crée une fenêtre contextuelle et l’ajoute à la carte. Quand un utilisateur appuie sur une fonctionnalité, la title propriété est affichée à l’aide de la classe PopupTextView, avec le centre en bas de la disposition ancré à la position spécifiée sur la carte.

// Create a popup and add it to the map.
let popup = Popup()
map.popups.add(popup)

// Set popup to the class property to use in events handling later.
self.popup = popup

func azureMap(_ map: AzureMap, didTapOn features: [Feature]) {
    guard let popup = popup, let feature = features.first else {
        // Popup has been released or no features provided
        return
    }

    // Create the custom view for the popup.
    let customView = PopupTextView()

    // Set the text to the custom view.
    let text = feature.properties["title"] as! String
    customView.setText(text)

    // Get the position of the tapped feature.
    let position = Math.positions(from: feature).first!

    // Set the options on the popup.
    popup.setOptions([
        // Set the popups position.
        .position(position),

        // Set the anchor point of the popup content.
        .anchor(.bottom),

        // Set the content of the popup.
        .content(customView)

        // Optionally, hide the close button of the popup.
        // .closeButton(false)

        // Optionally offset the popup by a specified number of points.
        // .pointOffset(CGPoint(x: 10, y: 10))
    ])

    // Open the popup.
    popup.open()
}

La capture d’écran suivante montre des fenêtres contextuelles qui s’affichent en cas de pression sur les fonctionnalités et restent ancrées à leur emplacement spécifié sur la carte tandis que celle-ci se déplace.

Informations supplémentaires

Pour ajouter des données à votre carte :

• Réagir aux événements de carte
• Créer une source de données
• Ajouter une couche de symboles
• Ajouter une couche de bulles
• Ajouter une couche de lignes
• Ajouter une couche de polygones