CreatedMarkerPropertiesType

CreatedMarkerPropertiesType

Type: Object

Properties
id (string)
longitude (number)
latitude (number)

CreatedTimelineItemType

CreatedTimelineItemType

Type: Object

Properties
id (string)
content (string) : The text to be displayed in the Timeline item.
group (string) : The group layer name.
start ((string | Date)) : A valid date.
end ((string | Date)?) : A valid date. Required if type will be range . Otherwise, not required nor used for type of box or `point.
type (string?) : The timeline item type to be displayed. See https://visjs.github.io/vis-timeline/docs/timeline/#items .

onClickCallbacks

onClickCallbacks

Type: {leafletMarker: Function, timelineItem: Function}

leafletMarkerLayers

Stores references to FeatureGroup layers that are used to manage and store markers into logical groups.

Note that these FeatureGroup layers are used as the overlay layers in the Leaflet map.

leafletMarkerLayers

Type: Map<string, L.FeatureGroup>

leafletControlLayer

leafletControlLayer

Type: L.Control

hasControlLayerBeenAddedToMap

hasControlLayerBeenAddedToMap

Type: boolean

constructor

constructor(map: L.Map, timelineHtmlRef: HTMLElement, timelineOptions: Object?)
Parameters
map (L.Map) An instance of a Leaflet map
timelineHtmlRef (HTMLElement)
timelineOptions (Object? = {})

addLayerControlOnce

Creates a leaflet control (if it does not exist) for handling the toggling of marker and timeline item groups.

addLayerControlOnce()

onMapMarkerClick

Register a callback function on map marker click event.

onMapMarkerClick(callback: function (x: MouseEvent): any)
Parameters
callback (function (x: MouseEvent): any) Function that will be provided a click event object when some map marker is clicked.

onTimelineItemClick

Register a callback function on timeline item click event.

onTimelineItemClick(callback: function (x: MouseEvent): any)
Parameters
callback (function (x: MouseEvent): any) Function that will be provided click event details of some timeline item.

panToTimelineItemIfExists

panToTimelineItemIfExists(itemId: string)
Parameters
itemId (string)

panToTimelineItem

panToTimelineItem(itemId: string)
Parameters
itemId (string)

panMapAndTimelineByItemId

A method intended to be used by api consumers to manually pan the map and the timeline to a common data item.

panMapAndTimelineByItemId(id: (number | string))
Parameters
id ((number | string))

populate

populate(dataset: Array<Object>, groupName: string, createMarkerProperties: function (x: Object): CreatedMarkerPropertiesType, createTimelineItem: function (x: Object): CreatedTimelineItemType, markerPopupRenderer: Function?): void
Parameters
dataset (Array<Object>) A 1-d array of data objects used to create the markers and timeline items.
groupName (string) An identifier used to group and organize similar markers and Timeline items.
createMarkerProperties (function (x: Object): CreatedMarkerPropertiesType) A callback function that takes an object from dataset and returns another object of with the expected type.
createTimelineItem (function (x: Object): CreatedTimelineItemType) A callback function that takes an item of dataset and returns the expected object type.

Note that it is the user's responsibility to provide values for start and end that comply with the type of Timeline item.

For example, box and point only require the start date whereas both the start and end properties are required for timeline items of type range.

markerPopupRenderer (Function?) A callback function that will be provided the current datum of dataset and is expected to return an html string.
Returns
void:

populateSingle

populateSingle(datasetItem: Object, groupName: string, createMarkerProperties: function (x: Object): CreatedMarkerPropertiesType, createTimelineItem: function (x: Object): CreatedTimelineItemType, markerPopupRenderer: Function?): void
Parameters
datasetItem (Object) The data object used to create the marker and the timeline item.
groupName (string) An identifier used to group and organize similar markers and Timeline items.
createMarkerProperties (function (x: Object): CreatedMarkerPropertiesType) A callback function that takes an object from dataset and returns another object of with the expected type.
createTimelineItem (function (x: Object): CreatedTimelineItemType) A callback function that takes an item of dataset and returns the expected object type.

Note that it is the user's responsibility to provide values for start and end that comply with the type of Timeline item.

For example, box and point only require the start date whereas both the start and end properties are required for timeline items of type range.

markerPopupRenderer (Function?) A callback function that will be provided the current datum of dataset and is expected to return an html string.
Returns
void:

populateWithCustomMarker

The user must handle the creation of the leaflet marker on their own. The intended use case is for users that want to use an external leaflet marker library or otherwise want to fully control how the marker is created.

populateWithCustomMarker(dataset: Array<Object>, groupName: string, createMarker: function (x: Object): L.marker, createTimelineItem: function (x: Object): CreatedTimelineItemType): void
Parameters
dataset (Array<Object>) A 1-d array of data objects.
groupName (string) An identifier used to group and organize similar markers and Timeline items.
createMarker (function (x: Object): L.marker) A callback function that takes an object from dataset and returns a leaflet marker.
createTimelineItem (function (x: Object): CreatedTimelineItemType) A callback function that takes an item of dataset and returns the expected object type.

Note that it is the user's responsibility to provide values for start and end that comply with the type of Timeline item.

For example, box and point only require the start date whereas both the start and end properties are required for timeline items of type range.

Returns
void:

populateWithCustomMarkerSingle

populateWithCustomMarkerSingle(data: Object, groupName: string, createMarker: function (x: Object): L.marker, createTimelineItem: function (x: Object): CreatedTimelineItemType)
Parameters
data (Object)
groupName (string)
createMarker (function (x: Object): L.marker) A callback function that takes an object and returns a leaflet marker.
createTimelineItem (function (x: Object): CreatedTimelineItemType) A callback function that takes an object and returns the expected type.

fit

fit()

fitTimeline

fitTimeline()

fitMap

Fits map viewport to show all markers from all layers.

fitMap()

scrollTimelineToBottom

scrollTimelineToBottom()

clearMapAndTimeline

clearMapAndTimeline()

clearMap

Clears all existing Leaflet LayerGroups including their markers as well as removing the LayerGroup from the Layer Control and the Leaflet Map instance.

clearMap()

clearTimeline

clearTimeline()

doesMapMarkerExist

Determines whether or not a marker exists within the grouping layers.

doesMapMarkerExist(id: string): boolean
Parameters
id (string)
Returns
boolean:

doesTimelineItemExist

Determines whether or not an item exists in the Timeline.

doesTimelineItemExist(id: string): boolean
Parameters
id (string)
Returns
boolean:

removeItemById

removeItemById(id: string)
Parameters
id (string)

removeGroup

Removes an entire group at once.

removeGroup(group: string)
Parameters
group (string)

destroy

Cleans up the Leaflet and Timeline instances as well as the associated event listeners.

destroy()

updateItem

updateItem(item: any)
Parameters
item (any)