Event Operations

Applications can add interactivity by listening to events from Unfolded maps and implementing custom event handling functions.


Set Map Event Handlers

Sets event handlers to receive notifications for the specified map events.

Only one handler per event type can be registered, so subsequent calls will override previously set handlers for the specified event types. This method only updates handlers for those event types which are passed. The others will remain unchanged.

setMapEventHandlers reference

onLoad

Fires when the map loads.

map.setMapEventHandlers({
  onLoad: () => {
    console.log('Map has loaded');
  }
})
import ipywidgets as widgets
output = widgets.Output()
@output.capture(clear_output=True)
def on_load():
   print('Map loaded')
unfolded_map.set_map_event_handlers({
  'on_load': on_load
})
output

onClick

Fires when the map loads.

map.setMapEventHandlers({
  onClick: (clickEvent: ClickEvent) => {
    console.log(clickEvent);
  }
})
from unfolded.map_sdk import models
def on_click(event: models.ClickEvent):
  # do something
unfolded_map.set_map_event_handlers({
  'on_click': on_click
})

onHover

Fires when the cursor is being hovered over the map.

map.setMapEventHandlers({
  onHover: (hoverEvent: HoverEvent) => {
    console.log(hoverEvent);
  }
})
from unfolded.map_sdk import models
def on_hover(event: models.HoverEvent):
  # do something
unfolded_map.set_map_event_handlers({
  'on_hover': on_hover
})

onGeometrySelection

Fires when the user draws a polygon or rectangle using the draw tool.

map.setMapEventHandlers({
  onGeometrySelection: (geometrySelectionEvent: GeometrySelectionEvent) => {
    console.log(geometrySelectionEvent);
  }
})
from unfolded.map_sdk import models
def on_geometry_selection(event: models.GeometrySelectionEvent):
  # do something
unfolded_map.set_map_event_handlers({
  'on_geometry_selection': on_geometry_selection
})

onFilter

Fires when map filter changes.

map.setMapEventHandlers({
  onFilter: (filterChangeEvent: FilterChangeEvent) => {
    console.log(filterChangeEvent);
  }
})
from unfolded.map_sdk import models
def on_filter(event: models.FilterChangeEvent):
  # do something
unfolded_map.set_map_event_handlers({
  'on_filter': on_filter
})

onTimelineIntervalChange

Fires when the timeline interval changes.

map.setMapEventHandlers({
  onTimelineIntervalChange: (timelineInterval) => {
    const startingDateTime = new Date(timelineInterval[0]);
    const endingDateTime = new Date(timelineInterval[1]);
    console.log('Starting datetime: ' + startingDateTime);
    console.log('Ending datetime: ' + endingDateTime);
  }
})
def on_timeline_interval_change(interval: List[int]):
  start_time = interval[0]
  end_time = interval[1]
  # do something
unfolded_map.set_map_event_handlers({
  'on_timeline_interval_change': on_timeline_interval_change
})

onLayerTimelineTimeChange

Fires when the "current" time change events in the layer timeline.

map.setMapEventHandlers({
  onLayerTimelineTimeChange: (currentDateTimeUnix) => {
    const currentDateTime = new Date(currentDateTimeUnix);
    console.log('Current datetime: ' + currentDateTime);
  }
})
def on_layer_timeline_time_change(current_datetime_unix: int):
  # do something
unfolded_map.set_map_event_handlers({
  'on_layer_timeline_time_change': on_layer_timeline_time_change
})

Unregister an Event Handler

To unregister a specific event handler pass, null or undefined (or None in Python) to the appropriate parameter in the setMapEventHandlers function. The other event handlers will remain unchanged.

map.setMapEventHandlers({
  onLayerTimelineTimeChange: null,
  onFilter: null
})
unfolded_map.set_map_event_handlers({
  'on_timeline_interval_change': None,
  'on_filter': None
})

In case you want to unregister all event handlers, pass null or undefined (or None in Python) to the setMapEventHandlers function.

map.setMapEventHandlers(null)
unfolded_map.set_map_event_handlers(None)

Did this page help you?