Mostrar información de característicasDisplay feature information

Los datos espaciales a menudo se representan mediante puntos, líneas y polígonos.Spatial data is often represented using points, lines, and polygons. Estos datos con frecuencia tienen información de metadatos asociada.This data often has metadata information associated with it. Por ejemplo, un punto puede representar la ubicación de un restaurante y los metadatos de ese restaurante pueden ser su nombre, dirección y el tipo de comida que sirve.For example, a point may represent the location of a restaurant and metadata about that restaurant may be its name, address, and type of food it serves. Estos metadatos se pueden agregar como propiedades de un elemento Feature GeoJSON.This metadata can be added as properties of a GeoJSON Feature. El siguiente código crea una característica de punto simple con una propiedad title cuyo valor es "Hello world!"The following code creates a simple point feature with a title property that has a value of "Hello World!"

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

//Create a point feature.
Feature feature = Feature.fromGeometry(Point.fromLngLat(-122.33, 47.64));

//Add a property to the feature.
feature.addStringProperty("title", "Hello World!");

//Create a point feature, pass in the metadata properties, and add it to the data source.
source.add(feature);
//Create a data source and add it to the map.
val source = DataSource()
map.sources.add(source)

//Create a point feature.
val feature = Feature.fromGeometry(Point.fromLngLat(-122.33, 47.64))

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

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

Consulte Creación de un origen de datos para obtener información sobre cómo crear y agregar datos al mapa.See the Create a data source documentation for ways to create and add data to the map.

Cuando un usuario interactúa con cualquier característica del mapa, se pueden usar eventos para reaccionar ante esas acciones.When a user interacts with a feature on the map, events can be used to react to those actions. Un escenario común es mostrar un mensaje creado con las propiedades de los metadatos de una característica con la que el usuario ha interactuado.A common scenario is to display a message made of the metadata properties of a feature the user interacted with. OnFeatureClick es el evento principal que se usa para detectar cuándo el usuario ha pulsado una característica en el mapa.The OnFeatureClick event is the main event used to detect when the user tapped a feature on the map. También hay un evento OnLongFeatureClick.There's also an OnLongFeatureClick event. Al agregar el evento OnFeatureClick al mapa, se puede limitar a una sola capa. Para ello, solo hay que pasar el identificador de una capa.When adding the OnFeatureClick event to the map, it can be limited to a single layer by passing in the ID of a layer to limit it to. Si no se pasa ningún identificador de capa, al pulsar cualquiera de las características del mapa se activaría este evento, independientemente de la capa en la que se encuentre.If no layer ID is passed in, tapping any feature on the map, regardless of which layer it is in, would fire this event. El código siguiente crea una capa de símbolos que representa datos de puntos en el mapa y, después, agrega un evento OnFeatureClick y lo limita a esta capa de símbolos.The following code creates a symbol layer to render point data on the map, then adds an OnFeatureClick event and limits it to this symbol layer.

//Create a symbol and add it to the map.
SymbolLayer layer = new SymbolLayer(source);
map.layers.add(layer);

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.
//Create a symbol and add it to the map.
val layer = SymbolLayer(source)
map.layers.add(layer)

//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Do something with the message.

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

Presentación de mensajes de notificación del sistemaDisplay a toast message

Un mensaje de notificación del sistema es una de las formas más sencillas de mostrar información al usuario y está disponible en todas las versiones de Android.A toast message is one of the easiest ways to display information to the user and is available in all versions of Android. No admite ningún tipo de entrada del usuario y solo se muestra durante un período breve.It doesn't support any type of user input and is only displayed for a short period of time. Si desea que el usuario sepa algo acerca del elemento que ha pulsado, un mensaje de notificación del sistema puede ser una buena opción.If you want to quickly let the user know something about what they tapped on, a toast message might be a good option. En el código siguiente se muestra cómo se puede utilizar un mensaje de notificación del sistema con el evento OnFeatureClick.The following code shows how a toast message can be used with the OnFeatureClick event.

//Add a feature click event to the map.
map.events.add((OnFeatureClick) (features) -> {
    //Retrieve the title property of the feature as a string.
    String msg = features.get(0).getStringProperty("title");

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
}, layer.getId());    //Limit this event to the symbol layer.
//Add a feature click event to the map.
map.events.add(OnFeatureClick { features: List<Feature> ->
    //Retrieve the title property of the feature as a string.
    val msg = features[0].getStringProperty("title")

    //Display a toast message with the title information.
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
}, layer.getId()) //Limit this event to the symbol layer.

Animación de una característica que se pulsa y se muestra un mensaje de notificación del sistema

Además de los mensajes de notificación del sistema, hay muchas otras maneras de presentar las propiedades de los metadatos de una característica, como:In addition to toast messages, There are many other ways to present the metadata properties of a feature, such as:

  • Widget Snackbar: los Snackbars proporcionan pequeños comentarios acerca de una operación.Snackbar widget - Snackbars provide lightweight feedback about an operation. Muestran un mensaje corto en la parte inferior de la pantalla del dispositivo móvil y en la parte inferior izquierda en dispositivos mayores.They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Los Snackbars aparecen encima de los demás elementos de la pantalla y no pueden mostrarse varios a la vez.Snackbars appear above all other elements on screen and only one can be displayed at a time.
  • Cuadros de diálogo: un cuadro de diálogo es una ventana pequeña que solicita al usuario que tome una decisión o escriba más información.Dialogs - A dialog is a small window that prompts the user to make a decision or enter additional information. Un cuadro de diálogo no llena la pantalla y normalmente se usa para eventos modales que requieren que los usuarios realicen una acción para poder continuar.A dialog doesn't fill the screen and is normally used for modal events that require users to take an action before they can continue.
  • Agregue un fragmento a la actividad actual.Add a Fragment to the current activity.
  • Vaya a otra actividad o vista.Navigate to another activity or view.

Mostrar una ventana emergenteDisplay a popup

El Android SDK de Azure Maps proporciona una clase Popup que facilita la creación de elementos de anotación de interfaz de usuario que estén anclados en una posición del mapa.The Azure Maps Android SDK provides a Popup class that makes it easy to create UI annotation elements that are anchored to a position on the map. En el caso de los elementos emergentes, debe pasar una vista con un diseño relativo en la opción content del elemento emergente.For popups, you have to pass in a view with a relative layout into the content option of the popup. Este es un ejemplo de diseño sencillo que muestra texto oscuro encima de un fondo blanco.Here is a simple layout example that displays dark text on top of a while background.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_margin="8dp"
    android:padding="10dp"

    android:layout_height="match_parent">

    <TextView
        android:id="@+id/message"
        android:layout_width="wrap_content"
        android:text=""
        android:textSize="18dp"
        android:textColor="#222"
        android:layout_height="wrap_content"
        android:width="200dp"/>

</RelativeLayout>

Suponiendo que el diseño anterior está almacenado en un archivo denominado popup_text.xml en la carpeta res -> layout de una aplicación, el siguiente código crea un elemento emergente y lo agrega al mapa.Assuming the above layout is stored in a file called popup_text.xml in the res -> layout folder of an app, the following code creates a popup, adds it to the map. Cuando se hace clic en una característica, la propiedad title se muestra mediante el diseño popup_text.xml, con el centro inferior del diseño anclado a la posición especificada en el mapa.When a feature is clicked, the title property is displayed using the popup_text.xml layout, with the bottom center of the layout anchored to the specified position on the map.

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

map.events.add((OnFeatureClick)(feature) -> {
    //Get the first feature and it's properties.
    Feature f = feature.get(0);
    JsonObject props = f.properties();

    //Retrieve the custom layout for the popup.
    View customView = LayoutInflater.from(this).inflate(R.layout.popup_text, null);

    //Access the text view within the custom view and set the text to the title property of the feature.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText(props.get("title").getAsString());

    //Get the coordinates from the clicked feature and create a position object.
    List<Double> c = ((Point)(f.geometry())).coordinates();
    Position pos = new Position(c.get(0), c.get(1));

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

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

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

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

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

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false;
});
//Create a popup and add it to the map.
val popup = Popup()
map.popups.add(popup)

map.events.add(OnFeatureClick { feature: List<Feature> ->
    //Get the first feature and it's properties.
    val f = feature[0]
    val props = f.properties()

    //Retrieve the custom layout for the popup.
    val customView: View = LayoutInflater.from(this).inflate(R.layout.popup_text, null)

    //Access the text view within the custom view and set the text to the title property of the feature.
    val tv: TextView = customView.findViewById(R.id.message)
    tv.text = props!!["title"].asString

    //Get the coordinates from the clicked feature and create a position object.
    val c: List<Double> = (f.geometry() as Point?).coordinates()
    val pos = Position(c[0], c[1])

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

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

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

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

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue bubble up.
    return false
})

En la siguiente captura de pantalla se muestran los elementos emergentes que aparecen cuando se hace clic en las características, y permanecen anclados a su ubicación especificada en el mapa a medida que este se mueve.The following screen capture shows popups appearing when features are clicked and staying anchored to their specified location on the map as it moves.

Animación de un elemento emergente que se muestra y el mapa que se mueve con el elemento emergente anclado a una posición en el mapa.

Pasos siguientesNext steps

Para agregar más datos al mapa:To add more data to your map: