Premiers pas avec Google Maps pour Android: avancé

1. introduction

Bien que les fonctionnalités standard de Google Maps soient incroyablement utiles, vous voudrez parfois en faire un peu plus. Heureusement, Google a créé une bibliothèque open source contenant un ensemble d’utilitaires que les développeurs Android peuvent utiliser pour améliorer leurs applications avec des cartes améliorées.

Dans ce didacticiel, vous apprendrez à utiliser cette bibliothèque utilitaire pour ajouter des visualisations de carte de chaleur pour vos données, regrouper un grand nombre de marqueurs pour une visualisation plus facile et utiliser diverses méthodes utilitaires pour travailler avec la nature sphérique de la Terre ou dessiner des itinéraires sur les routes .

Les fichiers source de ce didacticiel se trouvent sur GitHub.

2. Installer

Dans le premier tutoriel de cette série, j’ai expliqué comment configurer un projet à l’aide de Google Developer Console et ajouter une clé API à votre manifeste. Pour ce didacticiel, vous devez obtenir une clé API et configurer votre projet avec un manifeste comme décrit ici.

Ensuite, ouvrez build.gradle et ajoutez deux nouvelles dépendances, une pour les services Play pour utiliser Google Maps et une autre pour la bibliothèque Google Maps Utils.

compile 'com.google.android.gms:play-services-maps:7.8.0'
compile 'com.google.maps.android:android-maps-utils:0.4'

Je dois noter que la bibliothèque Google Maps Utils est techniquement toujours en version bêta, bien qu’elle soit disponible depuis deux ans. Une fois que vous avez importé ces bibliothèques et synchronisé le projet, vous devez mettre à jour le fichier de mise en page pour MainActivity.java afin qu’il utilise le fragment personnalisé illustré ci-dessous.

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <fragment
        android:id="@+id/list_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.tutsplus.mapsdemo.fragment.UtilsListFragment" />

</RelativeLayout>

Ensuite, créez le UtilsListFragment classe utilisée ci-dessus afin d’afficher une liste simple d’éléments représentant les différentes parties de la bibliothèque que vous découvrirez dans ce didacticiel.

public class UtilsListFragment extends ListFragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>( getActivity(), android.R.layout.simple_list_item_1 );
        String[] items = getResources().getStringArray( R.array.list_items );
        adapter.addAll( new ArrayList( Arrays.asList(items) ) );
        setListAdapter( adapter );
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        super.onListItemClick(l, v, position, id);

        String item = ( (TextView) v ).getText().toString();
        if( getString( R.string.item_clustering ).equalsIgnoreCase( item ) ) {
            startActivity( new Intent( getActivity(), ClusterMarkerActivity.class ) );
        } else if( getString( R.string.item_heat_map ).equalsIgnoreCase( item ) ) {
            startActivity( new Intent( getActivity(), HeatMapActivity.class ) );
        } else if( getString( R.string.item_polylines ).equalsIgnoreCase( item ) ) {
            startActivity( new Intent( getActivity(), PolylineActivity.class ) );
        } else if( getString( R.string.item_spherical_geometry ).equalsIgnoreCase( item ) ) {
            startActivity( new Intent( getActivity(), SphericalGeometryActivity.class ) );
        }
    }
}

Chacune des chaînes est définie et placée dans un string-array pour l’uniformité.

<string name="item_clustering">Clustering</string>
<string name="item_heat_map">Heat Map</string>
<string name="item_polylines">Polyline Decoding</string>
<string name="item_spherical_geometry">Spherical Geometry Utils</string>

<string-array name="list_items">
    <item>@string/item_clustering</item>
    <item>@string/item_heat_map</item>
    <item>@string/item_polylines</item>
    <item>@string/item_spherical_geometry</item>
</string-array>

Une fois votre liste disponible, vous devez créer BaseMapActivity.java, qui gère toutes les configurations communes liées à la carte pour chacune des activités d’exemple que vous allez créer. Ce Activity initialise un GoogleMap et effectue un zoom avant de la caméra sur une zone spécifiée. Dans ce cas, cette zone est la ville de Denver dans le Colorado, aux États-Unis. Tout dans cette classe devrait sembler familier à partir des deux derniers articles de cette série.

public abstract class BaseMapActivity extends AppCompatActivity {

    protected LatLng mCenterLocation = new LatLng( 39.7392, -104.9903 );

    protected GoogleMap mGoogleMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView( getMapLayoutId() );
        initMapIfNecessary();
    }

    @Override
    protected void onResume() {
        super.onResume();
        initMapIfNecessary();
    }

    protected void initMapIfNecessary() {
        if( mGoogleMap != null ) {
            return;
        }

        mGoogleMap = ( (MapFragment) getFragmentManager().findFragmentById( R.id.map ) ).getMap();

        initMapSettings();
        initCamera();
    }

    protected void initCamera() {
        CameraPosition position = CameraPosition.builder()
                .target( mCenterLocation )
                .zoom( getInitialMapZoomLevel() )
                .build();

        mGoogleMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), null);
    }

    protected int getMapLayoutId() {
        return R.layout.activity_map;
    }

    protected float getInitialMapZoomLevel() {
        return 12.0f;
    }

    protected abstract void initMapSettings();
}

Maintenant que vous avez construit le projet initial, vous pouvez passer à la section suivante où vous allez créer un nouveau Activity pour chaque utilitaire que nous allons couvrir dans ce tutoriel.

3. Cartes thermiques

Les cartes thermiques sont un excellent moyen de représenter visuellement les concentrations de points de données sur une carte. La bibliothèque Google Maps Utils facilite leur ajout à une application. Pour commencer, créez un nouveau BaseMapActivity nommé HeatMapActivity et ajoutez-le à votre AndroidManifest.xml fichier. En haut de cette classe, déclarez un HeatmapTileProvider que nous utiliserons pour construire la superposition de carte.

private HeatmapTileProvider mProvider;

Dans BaseMapActivity, une méthode nommée initMapSettings est appelé qui vous permet d’ajouter vos personnalisations à la carte. Pour ça Activity, vous devez remplacer cette méthode pour obtenir un ArrayList de LatLng objets qui sont ensuite utilisés pour générer le HeatmapTileProvider objet.

Le fournisseur dispose de diverses méthodes qui peuvent être utilisées pour modifier l’apparence de votre carte thermique, telles que les couleurs de dégradé, le rayon de chaque point et le poids de chaque point. Une fois votre fournisseur créé, vous pouvez créer la carte thermique TileOverlay et appliquez-le à votre carte.

@Override
protected void initMapSettings() {
    ArrayList<LatLng> locations = generateLocations();
    mProvider = new HeatmapTileProvider.Builder().data( locations ).build();
    mProvider.setRadius( HeatmapTileProvider.DEFAULT_RADIUS );
    mGoogleMap.addTileOverlay(new TileOverlayOptions().tileProvider(mProvider));
}

Dans la mise en œuvre ci-dessus de initMapSettings, generateLocations est une méthode d’aide qui génère 1000 LatLng positions autour de l’emplacement central de la carte.

private ArrayList<LatLng> generateLocations() {
    ArrayList<LatLng> locations = new ArrayList<LatLng>();
    double lat;
    double lng;
    Random generator = new Random();
    for( int i = 0; i < 1000; i++ ) {
        lat = generator.nextDouble() / 3;
        lng = generator.nextDouble() / 3;
        if( generator.nextBoolean() ) {
            lat = -lat;
        }
        if( generator.nextBoolean() ) {
            lng = -lng;
        }
        locations.add(new LatLng(mCenterLocation.latitude + lat, mCenterLocation.longitude + lng));
    }

    return locations;
}

Une fois que vous avez terminé la mise en œuvre initMapSettings et generateLocations, vous pouvez exécuter votre application et cliquer sur la section de la carte thermique pour la voir en action.

4. Marqueurs de regroupement

Lorsqu’une carte a beaucoup de points de données dans une petite zone, elle peut être encombrée très rapidement lorsque l’utilisateur effectue un zoom arrière. Non seulement cela, mais le fait d’avoir trop de marqueurs affichés à la fois peut entraîner un ralentissement considérable de certains appareils.

Afin de contribuer à atténuer une partie de la frustration causée par ces problèmes, vous pouvez utiliser la bibliothèque Google Maps Utils pour animer vos marqueurs en clusters. La première chose à faire est de créer un nouvel objet modèle qui implémente le ClusterItem interface. Ce modèle doit implémenter le getPosition méthode de la ClusterItem interface afin de renvoyer un LatLng objet.

public class ClusterMarkerLocation implements ClusterItem {

    private LatLng position;

    public ClusterMarkerLocation( LatLng latLng ) {
        position = latLng;
    }

    @Override
    public LatLng getPosition() {
        return position;
    }

    public void setPosition( LatLng position ) {
        this.position = position;
    }
}

Une fois le modèle créé, vous pouvez créer un nouveau Activity appelé ClusterMarkerActivity et ajoutez-le à votre manifeste. Lorsque vous initialisez votre carte, vous devez créer un ClusterManager, associez-le à votre GoogleMapet ajoutez votre LatLng positions comme ClusterMarkerLocations à la ClusterManager pour que l’utilitaire sache quoi regrouper. Jetez un œil à la mise en œuvre de initMarkers pour mieux comprendre comment cela fonctionne.

private void initMarkers() {
    ClusterManager<ClusterMarkerLocation> clusterManager = new ClusterManager<ClusterMarkerLocation>( this, mGoogleMap );
    mGoogleMap.setOnCameraChangeListener(clusterManager);

    double lat;
    double lng;
    Random generator = new Random();
    for( int i = 0; i < 1000; i++ ) {
        lat = generator.nextDouble() / 3;
        lng = generator.nextDouble() / 3;
        if( generator.nextBoolean() ) {
            lat = -lat;
        }
        if( generator.nextBoolean() ) {
            lng = -lng;
        }
        clusterManager.addItem( new ClusterMarkerLocation( new LatLng( mCenterLocation.latitude + lat, mCenterLocation.longitude + lng ) ) );
    }
}

Dans cet exemple, nous créons 1000 points aléatoires à afficher et à les ajouter à la carte. La bibliothèque Google Maps Utils gère tout le reste pour nous.

5. Autres utilitaires

En plus des deux derniers éléments, la bibliothèque Google Maps Utils regorge de petits utilitaires utiles. Si vous avez de nombreux points différents qui composent un itinéraire, vous pouvez les encoder en tant que polyligne puis ajoutez cette polyligne à votre carte en utilisant PolyUtil. Cela affichera un chemin entre chacun des points le long de la carte.

public class PolylineActivity extends BaseMapActivity {

    private static final String polyline = "[email protected]{MsVc`AuHwbB}[email protected]}[goCqGe|BnUa`[email protected]}@_N}vKdB";

    @Override
    protected void initMapSettings() {
        List<LatLng> decodedPath = PolyUtil.decode(polyline);

        mGoogleMap.addPolyline(new PolylineOptions().addAll(decodedPath));
    }
}

En plus de PolyUtil, Google a ajouté SphericalUtil qui peut être utilisé pour mesurer des distances ou déterminer la géométrie le long de la surface d’une sphère. Si vous souhaitez trouver la distance entre deux points sur la carte, vous pouvez appeler SphericalUtil.computeDistanceBetween( LatLng position1, LatLng position2 ) retourner un double de la distance en mètres. Si vous souhaitez trouver le cap entre deux points, vous pouvez appeler SphericalUtil.computeHeading( LatLng point1, LatLng point2 ).

En relation avec cela, une autre méthode d’utilité dans le SpericalUtil class vous permet de trouver un point à un certain cap et à une certaine distance. Je recommande de parcourir le Documentation pour en savoir plus sur le SpericalUtil classe.

Conclusion

Dans ce tutoriel, vous venez de gratter la surface de la bibliothèque Google Maps Utils et tout ce qu’elle a à offrir. Les autres fonctionnalités qu’il peut ajouter à votre application incluent l’ajout de superpositions pour les données KML, la création de marqueurs personnalisés et des méthodes d’aide pour travailler avec GeoJSON.

Heureusement, Google a open source toute la bibliothèque, vous pouvez donc trouver le code source et le code de démonstration de la bibliothèque sur GitHub. Après avoir parcouru les trois dernières parties de cette série, vous devriez maintenant être suffisamment à l’aise avec Google Maps pour les ajouter à vos propres applications afin d’enrichir l’expérience utilisateur et de créer de superbes applications.