Estilizar um mapa

Este documento aborda como personalizar a aparência de um mapa e controlar as opções de visualização e visibilidade de dados. Você pode fazer isso das seguintes maneiras:

• Usar a Estilização de mapas baseada na nuvem
• Definir opções de estilo do mapa diretamente no seu código

Estilo do mapa com a Estilização de mapas baseada na nuvem

Para aplicar um estilo de mapa ao seu mapa de compartilhamento de viagens do consumidor em JavaScript, especifique um mapId e qualquer outro mapOptions ao criar o JourneySharingMapView.

Os exemplos a seguir mostram como aplicar um estilo de mapa com um ID.

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.
});

Personalizar mapas diretamente no seu código

Também é possível personalizar o estilo do mapa definindo as opções ao criar o JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando as opções de mapa. Para mais informações sobre as opções de mapa que você pode definir, consulte mapOptions na referência da API Maps 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" }
        ]
      }
    ]
  }
});

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

Controlar a visibilidade dos dados da tarefa para o SDK

É possível controlar a visibilidade de determinados objetos de tarefas no mapa usando regras de visibilidade.

Visibilidade padrão dos dados da tarefa

Por padrão, os dados das tarefas atribuídas a um veículo ficam visíveis quando o veículo está a até cinco paradas da tarefa. A visibilidade termina quando a tarefa é concluída ou cancelada.

Esta tabela mostra a visibilidade padrão para cada tipo de tarefa. É possível personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre os tipos de tarefa, consulte Tipos de tarefa no guia Tarefas programadas.

Personalizar a visibilidade das tarefas de veículos abertos

A interface TaskTrackingInfo fornece vários elementos de dados de tarefas que podem ser mostrados com o SDK do consumidor.

Opções de visibilidade por tarefa

É possível personalizar a configuração de visibilidade por tarefa definindo o TaskTrackingViewConfig ao criar ou atualizar uma tarefa no Fleet Engine. Use as opções de visibilidade a seguir para criar critérios para determinar a visibilidade de um elemento de tarefa:

Para ilustrar, suponha que um exemplo de personalização ajuste a visibilidade de três elementos de dados usando os critérios mostrados na tabela a seguir. Todos os outros elementos seguem as regras de visibilidade padrão.

O exemplo a seguir mostra essa configuração:

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

Polilinhas de rota e regras de visibilidade da localização do veículo

As polilinhas de trajeto não podem ser mostradas a menos que a localização do veículo também esteja visível. Caso contrário, a localização do veículo pode ser inferida pelo fim de uma polilinha.

Estas diretrizes ajudam a fornecer uma combinação válida para as opções de visibilidade de poligonal de rota e de localização do veículo.

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

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

Desativar o ajuste automático

É possível desativar o ajuste automático para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e à rota prevista. O exemplo a seguir mostra como desativar o ajuste automático ao configurar a visualização do mapa de compartilhamento de trajeto.

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,
  ...
});

A seguir

• Personalizar marcadores
• Personalizar polilinhas