Visualize transit vehicles on a map easily.
VehicleLayer package is a deck.gl layer. It is developed to visualize different vehicle types, for instance, transit buses and trams. The layer can visualize vehicles in 2D or 3D modes.
import { Deck } from '@deck.gl/core';
import { VehicleLayer, VehicleType } from '@belom88/vehicle-layer';
const INITIAL_VIEW_STATE = {
latitude: 53.431798446246546,
longitude: -2.957781323439993,
zoom: 20,
};
const deckgl = new Deck({
initialViewState: INITIAL_VIEW_STATE,
controller: true,
layers: [
new VehicleLayer({
id: 'vehicle-layer',
data: [
{
latitude: 53.43185529968051,
longitude: -2.9577037905967574,
bearing: -51.94099460927194,
vehilceType: VehicleType.TransitBus,
},
{
latitude: 53.431755073582494,
longitude: -2.9578708705967136,
bearing: -51.94099460927194,
vehilceType: VehicleType.Tram,
},
],
dimensionMode: '3D',
getColor: [238, 255, 203],
getPosition: (vehicle) => [vehicle.longitude, vehicle.latitude],
getBearing: (vehicle) => vehicle.bearing,
getVehicleType: (vehicle) => vehicle.vehilceType,
}),
],
});- Web-browser with WebGL API support(see https://caniuse.com/webgl)
The compatibility table mentions deck.gl version that was used to build the specific version of VehicleLayer. However the specific version of VehicleLayer might be compatible with other deck.gl versions although not tested with.
| VehicleLayer | built on deck.gl |
|---|---|
| 0.0.X | ^8.9.21 |
Vehicle type is a number that encodes a type of vehicle. VehicleType enum can be imported to define vehicle types in a human readable way.
| VehicleType | Code |
|---|---|
TransitBus |
0 |
Tram |
1 |
Size mode is a number that encodes a way to set size of vehicles. VehicleSizeMode enum can be imported to define size mode in a human readable way.
| VehicleSizeMode | Code | Description |
|---|---|---|
Original |
0 |
3D - get original size of 3D model. 2D - icon size is set in meters and multiplied by 5. The size might be scaled with sizeScale property. |
Pixel |
1 |
3D - size of vehicle is rescaled to be approximately equal to the size in pixels. 2D - icon size is set in pixels. The size is set with size property |
Combined |
2 |
3D - Original size mode behavior, 2D - Pixel size mode behavior |
type: T[] where T is a Vehicle object type;
default: []
description: Array of vehicles objects. Vehicle object must containt position information.
type: '2D' or '3D'
default: '3D'
description: In 2D mode vehicles are shown as arrow icons. In 3D mode vehicles are shown as 3D models.
type: VehicleSizeMode
default: VehicleSizeMode.Original
description: Change the way to set size of vehicles.
type: number
default: 20
description: Pixel size of vehicles. This property is active when sizeMode property is set to Pixel or dimensionMode is set to 2D and sizeMode is set to Combined.
type: number
default: 1
description: For 3D - scale multiplier for all dimensions. For 2D - icon size (in meters) multiplied by 5. This property is active when sizeMode property is set to Original or dimensionMode is set to 3D and sizeMode is set to Combined
type: Accessor<TProps, number>
default: 0
description: deck.gl accessor that transforms vehicle data to the movement direction of the vehicle.
type: Accessor<TProps, Color>
default: [255, 255, 255]
description: deck.gl accessor that transforms vehicle data to the vehicle color.
type: Accessor<TProps, Color>
default: undefined
description: deck.gl accessor that transforms vehicle data to the color of 3D model. This accessor overrides getColor accessor.
type: Accessor<TProps, Color>
default: [255, 255, 255]
description: deck.gl accessor that transforms vehicle data to the background color of 2D icon.
type: Accessor<TProps, Color>
default: [0, 0, 0]
description: deck.gl accessor that transforms vehicle data to the foreground color of 2D icon. This accessor overrides getColor accessor.
type: Accessor<TProps, VehicleType>
default: VehicleType.TransitBus
description: deck.gl accessor that transforms vehicle data to a vehicle type.