@belom88/vehicle-layer NPM

VehicleLayer

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.

Demo image

Short example

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

Requirements

Web-browser with WebGL API support(see https://caniuse.com/webgl)

Dependencies

Versions compatibility

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 types

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 modes

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

Properties

data

type: T[] where T is a Vehicle object type;

default: []

description: Array of vehicles objects. Vehicle object must containt position information.

dimensionMode

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.

sizeMode

type: VehicleSizeMode

default: VehicleSizeMode.Original

description: Change the way to set size of vehicles.

size

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.

sizeScale

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