Customize Markers

With the JavaScript fleet tracking library, you can customize the look and feel of markers added to the map. You do this by specifying marker customizations, which the fleet tracking library then applies before adding markers to the map and with every marker update. You can customize the look and feel of markers in these ways:

  1. Style markers based on type: Specify a MarkerOptions object to style markers of the same type. The changes you specify are then applied after each marker is created, overwriting any default options. For examples, see Style markers based on type in this guide.

  2. Style markers based on data: Specify a customization function based on data, as well as adding interactivity to markers, such as click handling. You can style based on data from fleet tracking, or from outside sources:

    • Data from fleet tracking: Fleet Tracking passes data to the customization function including the type of object the marker represents: vehicle, stop, or task. Marker styling then changes based on the current state of the marker element. For example, the number of remaining stops or type of task.

    • Outside sources: You can combine fleet tracking data with data from sources outside Fleet Engine and style the marker based on that information as well.

    For examples, see Style markers based on data.

  3. Add click handling to markers: For examples, see Add click handling.

  4. Filter which markers are visible: Filter which markers appear with the filtering capabilities available in the JavaScript location provider. For example:

  5. Use marker customization to track a scheduled tasks delivery vehicle: You can customize markers to track vehicles. For more information, see Use marker customization to track a delivery vehicle.

Marker customization options

The fleet tracking library provides the following customization parameters:

On-demand trips customization parameters

Scheduled tasks customization parameters

Style markers based on type

The following example shows how to configure a vehicle marker's styling with a MarkerOptions object. Follow this pattern to customize the styling of any marker using any of the options listed in Marker customization options.

On-demand trips example

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Scheduled tasks example

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Style markers based on data

The following example shows how to configure a vehicle marker's styling using customization functions. Follow this pattern to customize the styling of any marker based on data using any of the options listed in Marker customization options listed above.

On-demand trips example

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Scheduled tasks example

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Add click handling to markers

The following example shows how to add click handling to a vehicle marker. Follow this pattern to add click handling to any marker using any of the options listed in Marker customization options listed above.

On-demand trips example

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Scheduled tasks example

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Filter which markers are visible

If you need to use setVisible, follow this pattern to filter any markers using any of the options listed in Marker customization options above.

On-demand trips example

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Scheduled tasks example

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

What's next