Aplica diseño a un mapa

En este documento, se explica cómo personalizar el aspecto de un mapa y controlar la visibilidad de los datos y las opciones de viewport. Puedes hacerlo de las siguientes maneras:

• Usa el diseño de mapas basado en Cloud
• Establece opciones de diseño de mapa directamente en tu propio código

Cómo aplicar diseño al mapa con el diseño de mapas basado en Cloud

Para aplicar un diseño de mapa a tu mapa de uso compartido de viajes para consumidores de JavaScript, especifica un mapId y cualquier otro mapOptions cuando crees el JourneySharingMapView.

En los siguientes ejemplos, se muestra cómo aplicar un diseño de mapa con un ID de mapa.

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

Asigna un diseño a los mapas directamente en tu propio código

También puedes personalizar el diseño del mapa configurando las opciones de mapa cuando creas el objeto JourneySharingMapView. En los siguientes ejemplos, se muestra cómo aplicar diseño a un mapa con las opciones de mapa. Para obtener más información sobre las opciones de Google Maps que puedes configurar, consulta mapOptions en la referencia de la API de 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" }
        ]
      }
    ]
  }
});

Controla la visibilidad de los datos de tareas para el SDK

Puedes controlar la visibilidad de ciertos objetos de tareas en el mapa con las reglas de visibilidad.

Visibilidad predeterminada de los datos de las tareas

De forma predeterminada, los datos de las tareas asignadas a un vehículo son visibles cuando el vehículo se encuentra a 5 paradas de la tarea. La visibilidad finaliza cuando se completa o cancela la tarea.

En esta tabla, se muestra la visibilidad predeterminada para cada tipo de tarea. Puedes personalizar la visibilidad de muchas tareas, pero no de todas. Para obtener más detalles sobre los tipos de tareas, consulta Tipos de tareas en la guía Tareas programadas.

Personaliza la visibilidad de las tareas de vehículos abiertas

La interfaz TaskTrackingInfo proporciona una serie de elementos de datos de tareas que se pueden hacer visibles con el SDK de consumidor.

Opciones de visibilidad por tarea

Puedes personalizar la configuración de visibilidad para cada tarea estableciendo el TaskTrackingViewConfig cuando creas o actualizas una tarea en Fleet Engine. Usa las siguientes opciones de visibilidad para crear criterios que determinen la visibilidad de un elemento de tarea:

Para ilustrar, supongamos que una personalización de ejemplo ajusta la visibilidad de tres elementos de datos con los criterios que se muestran en la siguiente tabla. Todos los demás elementos siguen las reglas de visibilidad predeterminadas.

En el siguiente ejemplo, se muestra esta configuración:

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

Polilíneas de ruta y reglas de visibilidad de la ubicación del vehículo

Las polilíneas de ruta no pueden ser visibles, a menos que la ubicación del vehículo también lo sea. De lo contrario, la ubicación del vehículo se puede inferir al final de una polilínea.

Estos lineamientos te ayudan a proporcionar una combinación válida para las opciones de visibilidad de la polilínea de la ruta y la ubicación del vehículo.

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

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

Inhabilitar el ajuste automático

Puedes inhabilitar el ajuste automático para evitar que el mapa ajuste automáticamente el viewport al vehículo y a la ruta prevista. En el siguiente ejemplo, se muestra cómo inhabilitar el ajuste automático cuando configuras la vista de mapa de uso compartido del recorrido.

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

¿Qué sigue?

• Personaliza los marcadores
• Personaliza polilíneas