DelayedPointLayer

Example

Example Source Code

<template>
  <div class="map-container">
    <mb-map :zoom="4" :center="[-96, 37]" background-color="black">
      <mb-delayed-point-layer
        :data="__RESOURCE_URL__ + 'json/americanLibraries.json'"
        :get-position="(d) => d.position"
        :get-fill-color="[49, 92, 114]"
        :get-radius="50"
        :radius-min-pixels="3"
        :get-delay-factor="
          (d) => {
            const result = Math.abs(d.position[0] + 71) / 50
            return result < 0 ? 0 : result > 1 ? 1 : result
          }
        "
      />
    </mb-map>
  </div>
</template>

<script setup lang="ts"></script>

API

PROPS

Name	Description	Type	Default
id	Layer ID	string	-
get-delay-factor	Function to retrieve the delay factor.	AnyFunc	-
data	Source data for the layer.	string / IndexAny / AnyArr / Promise<any>	''
show	Whether the layer is visible.	boolean	true
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
auto-highlight	When this property is true and pickable is also true, the hovered object will be highlighted.	boolean	false
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
on-data-load	Callback function invoked after data loading is complete.	AnyFunc	-
data-transform	Function to transform the data before rendering.	AnyFunc	-
transitions	Transition settings for the layer.	IndexAny	{}
radius-units	Units for the radius: 'meters' or 'pixels'.	string ('meters', 'pixels')	'meters'
radius-scale	A scaling factor applied to the radius.	number	1
line-width-units	Units for the line width: 'meter'.	string	'meter'
line-width-scale	A scaling factor applied to the line width.	number	1
stroked	Whether the object has a stroke (outline).	boolean	false
filled	Whether the object is filled.	boolean	true
radius-min-pixels	Minimum radius in pixels.	number	0
radius-max-pixels	Maximum radius in pixels.	number	Number.MAX_SAFE_INTEGER
line-width-min-pixels	Minimum line width in pixels.	number	0
line-width-max-pixels	Maximum line width in pixels.	number	Number.MAX_SAFE_INTEGER
get-position	Function to retrieve the position. Defaults to accessing the position property of the data object.	AnyFunc	(d) => d.position
get-radius	Function to retrieve the radius.	number / AnyNumberFunc	1
get-fill-color	Function to retrieve the fill color.	number[] / AnyFunc	[0, 0, 0, 255]
get-line-color	Function to retrieve the line color.	number[] / AnyFunc	[0, 0, 0, 255]
get-line-width	Function to retrieve the line width.	number / AnyNumberFunc	1

EVENTS

Name	Description	Parameters

SLOTS

Name	Description

METHODS

Name	Description	Definition