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:
Style markers based on type: Specify a
MarkerOptionsobject 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.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.
Add click handling to markers: For examples, see Add click handling.
Filter which markers are visible: Filter which markers appear with the filtering capabilities available in the JavaScript location provider. For example:
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);
}
};