Appliquer un style à une carte

Sélectionnez une plate-forme : Android iOS JavaScript

Ce guide décrit comment styliser la carte affichée dans votre application iOS lorsque vous suivez un trajet.

Avant de commencer

Avant de styliser une carte, vous devez disposer d'une application grand public dans laquelle les éléments suivants sont implémentés :

Vous devez également avoir configuré les services backend dont le SDK Consumer a besoin et le SDK Consumer. Pour en savoir plus, consultez les pages Configurer le SDK client et Qu'est-ce que Fleet Engine ?.

Personnalisations de carte

Les personnalisations disponibles sont les suivantes:

  • Appliquer un style à la carte : vous pouvez appliquer un style aux couleurs, aux polylignes et à d'autres éléments cartographiques à l'aide des styles de cartes basés dans le cloud. Consultez Appliquer un style à la carte.

  • Ajuster le zoom de l'appareil photo : vous pouvez utiliser la fonctionnalité intégrée ou définir vos propres options d'appareil photo pour vous concentrer sur un trajet. Consultez Régler le zoom de l'appareil photo pour faire la mise au point sur un trajet.

  • Personnaliser les repères et les polylignes : vous pouvez ajouter des repères et des polylignes de parcours personnalisés à la conception de votre application. Ces éléments de conception permettent à votre application grand public d'afficher un aperçu dynamique du trajet du véhicule. Consultez les articles Personnaliser les repères et Personnaliser les polylignes.

    Le SDK fournit ces options via la propriété consumerMapStyleCoordinator. Cette propriété est disponible via la classe GMTCMapView.

Appliquer des styles de cartes basés dans le cloud à la carte

Personnalisez l'apparence du composant Maps à l'aide de styles de carte basés dans le cloud. Vous créez et modifiez des styles de carte dans la console Google Cloud pour toutes vos applications qui utilisent Google Maps, sans avoir à modifier votre code. Pour en savoir plus, consultez Styles de cartes basés dans le cloud.

Les classes ConsumerMapView et ConsumerMapFragment sont compatibles avec les styles de cartes basés dans le cloud. Pour utiliser les styles de cartes basés dans le cloud, assurez-vous que le moteur de rendu de cartes sélectionné est LATEST. Les sections suivantes illustrent des exemples d'utilisation des styles de cartes basés dans le cloud avec votre projet.

ConsumerMapView

Pour utiliser les styles de cartes basés dans le cloud dans ConsumerMapView, définissez le champ mapId sur GoogleMapOptions et transmettez GoogleMapOptions à getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) ou getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).

Exemple

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Il existe deux façons d'utiliser les styles de cartes basés dans le cloud dans ConsumerMapFragments :

  • Statiquement avec le XML.
  • De manière dynamique avec newInstance.

Statiquement avec le code XML

Pour utiliser les styles de cartes basés dans le cloud avec le code XML dans ConsumerMapFragment, ajoutez l'attribut XML map:mapId avec le mapId spécifié. Consultez l'exemple ci-dessous :

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Dynamiquement avec newInstance

Pour utiliser le style de carte dans le cloud avec newInstance dans ConsumerMapFragment, définissez le champ mapId sur GoogleMapOptions et transmettez GoogleMapOptions à newInstance. Consultez l'exemple ci-dessous :

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

Ajuster le zoom de l'appareil photo pour se concentrer sur un trajet

Lors d'une session de partage de trajet active, il est utile que l'utilisateur voit une vue plus large du véhicule tout au long de son trajet plutôt qu'une vue rapprochée du véhicule sur un itinéraire. Pour ce faire, vous devez ajuster le niveau de zoom de la caméra à l'aide de AutoCamera intégré ou en personnalisant vous-même le comportement de la caméra comme suit :

  • AutoCamera : si vous souhaitez utiliser AutoCamera, vous n'avez rien à faire. La caméra suit le trajet par défaut.

  • Personnaliser le comportement de la caméra : pour personnaliser le comportement de la caméra, vous devez désactiver AutoCamera, puis effectuer vos personnalisations.

AutoCamera centre la caméra par défaut

Le SDK Consumer fournit une fonctionnalité AutoCamera activée par défaut sur le bouton Mon emplacement intégré du SDK Maps. L'appareil photo effectue un zoom pour faire la mise au point sur l'itinéraire et le point de cheminement du trajet suivant.

Si vous souhaitez utiliser AutoCamera, assurez-vous qu'il est activé. Pour en savoir plus, consultez allowCameraAutoUpdate.

&quot;AutoCamera&quot;

Pour en savoir plus sur le bouton Ma position du SDK Maps, consultez Bouton Ma position dans la documentation du SDK Maps pour iOS.

Personnaliser le comportement de la caméra

Pour mieux contrôler le comportement de la caméra, vous pouvez désactiver AutoCamera et personnaliser le comportement de la caméra.

Désactivez ou activez AutoCamera avec la propriété AllowCameraAutoUpdate.

Pour en savoir plus sur la personnalisation de l'appareil photo, consultez Déplacer la caméra dans la documentation du SDK Maps pour iOS.

Étape suivante

Suivre un trajet dans iOS