TripsLayer

Example

Example Source Code

<template>
  <div style="height: 400px">
    <mb-map :zoom="10" :pitch="40" :center="[-73.9, 40.7]">
      <mb-trips-layer
        :data="__RESOURCE_URL__ + 'json/trips.json'"
        :get-path="(d) => d.path"
        :get-timestamps="(d) => d.timestamps"
        :trail-length="200"
        :current-time="currentTime"
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const currentTime = ref(0)

const loop = 1900
const animate = (timestamp: number) => {
  currentTime.value = (timestamp / 10) % loop
  requestAnimationFrame(animate)
}

onMounted(() => {
  animate(0)
})
</script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
auto-highlight	When this property is true and pickable is also true, the hovered object will be highlighted.	boolean	false
current-time	Current time.	number	0
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
get-color	Color information.	string / AnyFunc / number[]	'black'
get-timestamps	Function to retrieve timestamp information.	AnyFunc	-
get-path	Function to retrieve path information.	AnyFunc	object => object.path
get-width	Width information.	number / AnyNumberFunc	100
highlight-color	The color to blend with the original color of the highlighted object.	string / number[]	[255, 255, 128, 1]
highlighted-object-index	The index of the currently highlighted element.	number	-1
miter-limit	Applies when joint-rounded is false.	number	4
cap-rounded	Whether the line caps are rounded.	boolean	false
joint-rounded	Whether the line joints are rounded.	boolean	false
opacity	The opacity of the layer (0-1).	number	1
pickable	Whether the layer responds to mouse events. If false, the component will not emit mouse-related events.	boolean	false
show	Whether the layer is visible.	boolean	true
trail-length	Length of the trail.	number	120
width-max-pixels	Maximum width in pixels.	number	Number.MAX_SAFE_INTEGER
width-min-pixels	Minimum width in pixels.	number	0
width-scale	A scaling factor applied to the width.	number	1
width-units	Units for the width: 'pixels' or 'meters'.	string ('pixels', 'meters')	'meters'

EVENTS

Name	Description	Parameters
created	Initialization complete event	-
mousemove	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }
mouseleave	-	-
click	-	{ object: any; coordinates: mapboxgl.LngLat; pixel: [number, number] }

SLOTS

Name	Description

METHODS

Name	Description	Definition