Appliquer un style à une carte

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

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

Styliser la carte avec les styles de cartes basés dans le cloud

Pour appliquer un style de carte à votre carte de partage de trajet pour les consommateurs JavaScript, spécifiez un mapId et d'autres mapOptions lorsque vous créez le JourneySharingMapView.

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

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

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 la 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 Maps JavaScript de Google.

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

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 pour 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é prend fin 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 toutes. Pour en savoir plus sur les types de tâches, consultez Types de tâches dans le guide Tâches planifiées.

Personnaliser la visibilité des tâches de véhicule ouvertes

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

Options de visibilité par tâche

Vous pouvez personnaliser la configuration de la visibilité pour chaque tâche en définissant le 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 :

Supposons qu'un exemple de personnalisation ajuste la visibilité de trois éléments de données à l'aide des critères indiqués dans le tableau suivant. Tous les autres éléments suivent les règles de visibilité par défaut.

L'exemple suivant montre cette configuration :

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

Règles de visibilité des polylignes d'itinéraire et de la position du véhicule

Les polylignes d'itinéraire ne peuvent pas être visibles à moins que la position du véhicule ne le soit é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é des polylignes d'itinéraire et de la position du véhicule.

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    

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

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 de partage de trajet.

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

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

Étape suivante

• Personnaliser les repères
• Personnaliser les polylignes