Tutorial: Carga de datos GeoJSON en Android SDK de Azure Maps

Artículo
04/09/2024

Este tutorial le guiará por el proceso de importación de un archivo GeoJSON de datos de ubicación en Android SDK de Azure Maps. En este tutorial, aprenderá a:

Incorporar Azure Maps a una aplicación para Android.
Crear un origen de datos y cargarlo en un archivo GeoJSON desde un archivo local o desde la web.
Mostrar los datos en el mapa.
Interactuar con los datos de los mapas para ver sus detalles.

Nota:

Retirada de Android SDK para Azure Maps

El SDK nativo de Azure Maps para Android ya está en desuso y se retirará el 31 de marzo de 2025. Para evitar interrupciones del servicio, migre al SDK web de Azure Maps antes del 31 de marzo de 2025. Para obtener más información, consulta la Guía de migración del SDK de Maps para Android.

Requisitos previos

Complete la guía Inicio rápido: Creación de una aplicación para Android. En este tutorial se ampliará el código de ese inicio rápido.
Descargue los puntos de interés de ejemplo del archivo GeoJSON.

Importación de los datos GeoJSON de la web o de la carpeta de recursos

La mayoría de los archivos GeoJSON encapsulan todos los datos en FeatureCollection. Teniendo en cuenta este escenario, si los archivos GeoJSON se cargan en la aplicación en forma de cadena, se pueden pasar al método fromJson estático de la colección de características, que deserializará la cadena en un objeto FeatureCollection GeoJSON que se puede agregar al mapa.

En los pasos siguientes se muestra cómo importar un archivo GeoJSON en la aplicación y deserializarlo como objeto FeatureCollection de GeoJSON.

Complete la guía Inicio rápido: Creación de una aplicación para Android, ya que los pasos siguientes se basan en el uso de esta aplicación.
En el panel del proyecto de Android Studio, haga clic con el botón derecho en la carpeta app y vaya a New > Folder > Assets Folder.
Arrastre y coloque los puntos de interés de ejemplo del archivo GeoJSON en la carpeta de recursos.

Vaya al archivo MainActivity.java y agregue el siguiente código en la devolución de llamada para el evento mapControl.onReady, dentro del método onCreate. Este código carga el archivo SamplePoiDataSet.json de la carpeta assets en un origen de datos mediante el método importDataFromUrl y, después, lo agrega al mapa.

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);

Vaya al archivo MainActivity.kt y agregue el siguiente código en la devolución de llamada para el evento mapControl.onReady, dentro del método onCreate. Este código carga el archivo SamplePoiDataSet.json de la carpeta assets en un origen de datos mediante el método importDataFromUrl y, después, lo agrega al mapa.

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

//Import the geojson data and add it to the data source.
source.importDataFromUrl("asset://SamplePoiDataSet.json");

//Add data source to the map.
map.sources.add(source);

Mediante el código para cargar los datos GeoJSON como un origen de datos, ahora debemos especificar cómo se deben mostrar los datos en el mapa. Hay varias capas de representación diferentes para los datos de punto; la capa de burbujas, la capa de símbolos y la capa de mapas térmicos son los niveles más frecuentes. Agregue el código siguiente para representar los datos de una capa de burbujas en la devolución de llamada para el evento mapControl.onReady después del código para importar los datos.

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

//Create a layer and add it to the map.
val layer = new BubbleLayer(source)
map.layers.add(layer)

En el panel de proyectos de Android Studio, haga clic con el botón derecho en la carpeta layout en la ruta de acceso app > res > layout y vaya a New > File. Cree un archivo denominado popup_text.xml.
Abra el archivo popup_text.xml. Si el archivo se abre en una vista del diseñador, haga clic con el botón derecho en la pantalla y seleccione Ir a XML. Copie y pegue el siguiente XML en este archivo. Este XML crea un diseño simple que se puede usar con un elemento emergente y contiene una vista de texto.

<?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>

Vuelva al archivo MainActivity.java y, después del código de la capa de burbujas, agregue el código siguiente para crear un elemento emergente reutilizable.

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

//Close it initially.
popup.close();

Vuelva al archivo MainActivity.java y, después del código de la capa de burbujas, agregue el código siguiente para crear un elemento emergente reutilizable.

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

//Close it initially.
popup.close()

Agregue el código siguiente para asociar un evento de click a la capa de burbujas. Cuando se pulse cualquiera de las burbujas de la capa de burbujas, el evento se activa y recupera detalles de las propiedades de la característica seleccionada, crea una vista mediante el archivo de diseño popup_text.xml, lo pasa como contenido al elemento emergente y, después, se muestra el elemento emergente en la posición de las características.

//Add a click event to the layer.
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);

    //Display the name and entity type information of the feature into the text view of the popup layout.
    TextView tv = customView.findViewById(R.id.message);
    tv.setText("%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    );

    //Get the position of the clicked feature.
    Position pos = MapMath.getPosition((Point)f.geometry());

    //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)
    );

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

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

//Add a click event to the layer.
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)

    //Display the name and entity type information of the feature into the text view of the popup layout.
    val tv = customView.findViewById<TextView>(R.id.message)
    tv.text = String.format(
        "%s\n%s",
        f.getStringProperty("Name"),
        f.getStringProperty("EntityType")
    )

    //Get the position of the clicked feature.
    val pos = MapMath.getPosition(f.geometry() as Point?)

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

    //Open the popup.
    popup.open()

    //Return a boolean indicating if event should be consumed or continue to bubble up.
    false
} as OnFeatureClick, layer)

Ejecute la aplicación. Se muestra un mapa con burbujas superpuestas para cada ubicación en el archivo GeoJSON. Al pulsar en cualquiera de ellas se mostrará un elemento emergente con el nombre y tipo de entidad de la característica tocada.