Guide de migration Android SDK Azure Maps

Migrer du Android SDK Azure Maps vers le kit de développement logiciel (SDK) Web dans une WebView implique la transition de votre vue cartographique existante d’une implémentation native à une carte web en utilisant le kit de développement logiciel (SDK) Web Azure Maps. Ce guide vous montre comment migrer votre code et vos fonctionnalités du Android SDK vers le kit de développement logiciel (SDK) Web.

Remarque

Mise hors service d’Android SDK Azure Maps

Le kit de développement logiciel (SDK) natif Azure Maps pour Android est désormais déconseillé et va être mis hors service le 31 mars 2025. Pour éviter toute interruption de service, nous vous recommandons de migrer vers le kit de développement logiciel (SDK) web Azure Maps avant le 31 mars 2025.

Prérequis

Pour utiliser le contrôle de carte dans une page web, vous devez respecter l’un des prérequis suivants :

Créer une WebView

Ajoutez une WebView si votre application Android n’en a pas. Pour ce faire, ajoutez l’élément WebView à votre code XML de layout ou de manière programmatique dans votre code Java. Vérifiez qu’il est configuré pour occuper la zone souhaitée de votre layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Activez l’accès à Internet en ajoutant des autorisations dans AndroidManifest.xml.

<uses-permission android:name="android.permission.INTERNET" />

Dans votre activité ou fragment, initialisez WebView et activez JavaScript en mettant à jour les paramètres. Chargez le fichier HTML qui contient le code du kit de développement logiciel (SDK) Web. Vous pouvez soit le charger depuis le dossier des ressources, soit depuis une URL distante.

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);

        // Enable JavaScript
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // Load local HTML file from /src/main/assets/map.html
        webView.loadUrl("file:///android_asset/map.html");
    }
}

Configurer une carte avec le kit de développement logiciel (SDK) Web Azure Maps

Dans votre fichier HTML, initialisez une carte avec votre clé d’abonnement. Remplacez <YOUR_SUBSCRIPTION_KEY> par votre clé réelle.

<!DOCTYPE html>
<html>
   <head>
       <title>Azure Maps</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
       <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css"/>
       <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
       <style>
           html,
           body,
           #map {
               margin: 0;
               height: 100%;
               width: 100%;
           }
           body {
               display: flex;
               flex-direction: column;
           }
           main {
               flex: 1 1 auto;
           }
       </style>
       <script type="text/javascript">
           // Create an instance of the map control.
           function InitMap() {
               var map = new atlas.Map("map", {
                   center: [-122.33, 47.6],
                   zoom: 12,
                   authOptions: {
                       authType: "subscriptionKey",
                       subscriptionKey: "<YOUR_SUBSCRIPTION_KEY>"
                   }
               });

               // Wait until the map resources are ready.
               map.events.add("ready", function () {
                   // Resize the map to fill the container.
                   map.resize();
               });
           }
       </script>
   </head>
   <body onload="InitMap()">
       <main>
           <div id="map"></div>
       </main>
   </body>
</html>

Enregistrez et exécutez l’application. Une carte va s’afficher dans une WebView. Ajoutez les fonctionnalités ou caractéristiques requises depuis le kit de développement logiciel (SDK) Web. Pour plus d’informations, consultez la Documentation Azure Maps et les Exemples Azure Maps.

Capture d’écran d’une carte dans un WebView.

Communication entre code natif et WebView (facultatif)

Pour activer la communication entre votre application Android et la WebView, vous pouvez utiliser la méthode addJavascriptInterface de la WebView pour exposer un objet Java au JavaScript en cours d’exécution dans la WebView. Cela vous permet d’appeler des méthodes Java depuis votre code JavaScript. Pour plus d’informations, consultez WebView dans la documentation Android.

Nettoyer l’implémentation de carte native

Supprimez le code lié au Android SDK Azure Maps natif, y compris les dépendances et le code d’initialisation liés à com.azure.android:azure-maps-control.

Test

Testez soigneusement votre application pour vous assurer que la migration a réussi. Recherchez les problèmes liés aux fonctionnalités de mappage, aux interactions utilisateur et au niveau de performance.

Étapes suivantes

Découvrez comment ajouter des cartes aux applications web et mobiles à l’aide de la bibliothèque JavaScript côté client Map Control dans Azure Maps :