Appliquer un style à une carte

Ce document explique comment personnaliser l'apparence d'une carte, et comment contrôler la visibilité des données et les options de fenêtre d'affichage. Pour ce faire, utilisez l'une des méthodes suivantes :

  • Utiliser les styles de carte basés dans le cloud
  • Définir des options de style de carte directement dans votre propre code

Appliquer un style à la carte avec les styles de cartes basés dans le cloud

Personnalisez l'apparence du composant Maps à l'aide de styles de carte basés dans le cloud. Vous pouvez créer et modifier 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 le style de carte 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 :

  • De manière statique avec le fichier XML.
  • Dynamiquement 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 les styles de cartes basés 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
  }
}

Pour appliquer un style de carte à votre carte de partage de trajets des consommateurs JavaScript, spécifiez un mapId et tout autre mapOptions lorsque vous créez JourneySharingMapView.

Les exemples suivants montrent comment appliquer un style de carte avec un ID de carte.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Styliser les cartes directement dans votre propre code

Vous pouvez également personnaliser le style de carte en définissant des options de carte lorsque vous créez le JourneySharingMapView. Les exemples suivants montrent comment styliser une carte à l'aide d'options de carte. Pour en savoir plus sur les options de carte que vous pouvez définir, consultez mapOptions dans la documentation de référence de l'API Google Maps JavaScript.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Contrôler la visibilité des données de tâche sur le SDK

Vous pouvez contrôler la visibilité de certains objets de tâche sur la carte à l'aide de règles de visibilité.

Visibilité par défaut des données de tâche

Par défaut, les données des tâches attribuées à un véhicule sont visibles lorsque le véhicule se trouve à moins de cinq arrêts de la tâche. La visibilité se termine lorsque la tâche est terminée ou annulée.

Ce tableau indique la visibilité par défaut pour chaque type de tâche. Vous pouvez personnaliser la visibilité de nombreuses tâches, mais pas de toutes. Pour en savoir plus sur les types de tâches, consultez la section Types de tâches dans le guide Tâches planifiées.

Type de tâche Visibilité par défaut Personnalisable ? Description
Tâches d'indisponibilité Non visible Non Utilisé pour les pauses et le ravitaillement en carburant. Si un itinéraire vers une tâche de livraison contient également un autre arrêt de véhicule, cet arrêt ne s'affiche pas s'il ne contient que des tâches d'indisponibilité. L'heure d'arrivée estimée et l'heure de fin de la tâche sont toujours affichées pour la tâche de livraison elle-même.
Ouvrir les tâches du véhicule Visible Oui La visibilité prend fin lorsque la tâche est terminée ou annulée. Vous pouvez personnaliser la visibilité des tâches ouvertes pour les véhicules. Consultez Personnaliser la visibilité des tâches ouvertes pour les véhicules.
Tâches de véhicule terminées Non visible Non Vous ne pouvez pas personnaliser la visibilité des tâches fermées.

Personnaliser la visibilité des tâches ouvertes pour les véhicules

L'interface TaskTrackingInfo fournit un certain nombre d'éléments de données de tâche pouvant être rendus visibles avec le SDK Consumer.

Éléments de données de tâche personnalisables

Polylignes de parcours

Heure d'arrivée estimée

Temps d'exécution estimé de la tâche

Distance de conduite restante pour effectuer la tâche

Nombre d'arrêts restants

Emplacement du véhicule

Options de visibilité par tâche

Vous pouvez personnaliser la configuration de la visibilité pour chaque tâche en définissant TaskTrackingViewConfig lors de la création ou de la mise à jour d'une tâche dans Fleet Engine. Utilisez les options de visibilité suivantes pour créer des critères permettant de déterminer la visibilité d'un élément de tâche :

Options de visibilité

Nombre d'arrêts restants

Temps restant avant l'heure d'arrivée estimée

Distance restante à parcourir en voiture

Toujours visible

Jamais visible

Par exemple, supposons qu'un exemple de personnalisation ajuste la visibilité de trois éléments de données à l'aide des critères présentés dans le tableau suivant. Tous les autres éléments respectent les règles de visibilité par défaut.

Élément de données à ajuster Visibilité Critère
Polyligne d'itinéraire Afficher Le véhicule se trouve à moins de trois arrêts.
ETA Afficher La distance de conduite restante est inférieure à 5 000 mètres.
Nombre d'arrêts restants Ne jamais afficher Le véhicule est à moins de 3 arrêts.

L'exemple suivant illustre cette configuration:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Polylignes d'itinéraire et règles de visibilité de la position des véhicules

Les polylignes de parcours ne peuvent pas être visibles si la position du véhicule ne l'est pas également. Sinon, la position du véhicule peut être déduite de la fin d'une polyligne.

Ces consignes vous aident à fournir une combinaison valide pour les options de visibilité de la polyligne d'itinéraire et de la position des véhicules.

Mêmes options de visibilité Critère de visibilité Conseils
Options de polylignes d'itinéraire définies sur "Toujours visible". Définissez la position du véhicule sur "Toujours visible".
La localisation du véhicule est définie sur "Jamais visible". Définissez les polylignes de l'itinéraire sur "Never visible" (Jamais visible).
L'option de visibilité peut être l'une des suivantes :
  • nombre d'arrêts restants
  • durée jusqu'à l'heure d'arrivée prévue
  • distance restante à parcourir en voiture

Définissez les options de la polyligne de l'itinéraire sur une valeur inférieure ou égale à la valeur définie pour l'emplacement du véhicule. Exemple :

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Différentes options de visibilité Critères de visibilité Conseils
L'emplacement du véhicule est visible

Cela ne se produit que lorsque les options de visibilité de la position du véhicule et de la polyligne sont toutes deux remplies. Exemple :

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

Dans cet exemple, la position du véhicule n'est visible que si le nombre d'arrêts restants est d'au moins 3 ET la distance de conduite restante est d'au moins 3 000 mètres.

Désactiver l'ajustement automatique

Vous pouvez empêcher la carte d'ajuster automatiquement la fenêtre d'affichage au véhicule et à l'itinéraire prévu en désactivant l'ajustement automatique. L'exemple suivant montre comment désactiver l'ajustement automatique lorsque vous configurez la vue de la carte avec partage du parcours.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

Étape suivante