marker.js 3 Documentation
    Preparing search index...

    Interface MarkerAreaEventMap

    Marker area custom event types.

    The MarkerAreaEventMap interface defines the events that can be dispatched by the MarkerArea component.

    You can listen to these events using the addEventListener method on the MarkerArea instance.

    The events can be logically grouped into two categories:

    1. Marker area events (start with area)
    2. Marker editor events (start with marker).

    The marker area events are related to the overall state of the MarkerArea component, while the marker editor events are related to the individual marker editors within the area.

    Marker area events receive MarkerAreaEventData as their event.detail, while marker editor events receive MarkerEditorEventData as their event.detail. Both event data types contain a reference to the MarkerArea instance and, for marker editor events, a reference to the specific marker editor that triggered the event.

    interface MarkerAreaEventMap {
        areablur: CustomEvent<MarkerAreaEventData>;
        areafocus: CustomEvent<MarkerAreaEventData>;
        areainit: CustomEvent<MarkerAreaEventData>;
        arearestorestate: CustomEvent<MarkerAreaEventData>;
        areashow: CustomEvent<MarkerAreaEventData>;
        areastatechange: CustomEvent<MarkerAreaEventData>;
        markerbeforedelete: CustomEvent<MarkerEditorEventData>;
        markerchange: CustomEvent<MarkerEditorEventData>;
        markercreate: CustomEvent<MarkerEditorEventData>;
        markercreating: CustomEvent<MarkerEditorEventData>;
        markerdelete: CustomEvent<MarkerEditorEventData>;
        markerdeselect: CustomEvent<MarkerEditorEventData>;
        markerselect: CustomEvent<MarkerEditorEventData>;
    }
    Index

    Properties

    areablur areafocus areainit arearestorestate areashow areastatechange markerbeforedelete markerchange markercreate markercreating markerdelete markerdeselect markerselect

    Properties

    areablur: CustomEvent<MarkerAreaEventData>

    Marker area lost focus.

    This event is dispatched when the MarkerArea component loses focus.

    areafocus: CustomEvent<MarkerAreaEventData>

    Marker area focused.

    This event is dispatched when the MarkerArea component receives focus.

    areainit: CustomEvent<MarkerAreaEventData>

    Marker area initialized.

    This event is dispatched early in the lifecycle when the MarkerArea component is initialized but none of its internal elements have been created yet.

    Use areashow to know when the component is fully initialized and ready to be used.

    arearestorestate: CustomEvent<MarkerAreaEventData>

    Marker area state restored.

    This event is dispatched when the MarkerArea component restores its state from a previously saved state.

    areashow: CustomEvent<MarkerAreaEventData>

    Marker area shown.

    This event is dispatched when the MarkerArea component is fully initialized and ready to be used.

    areastatechange: CustomEvent<MarkerAreaEventData>

    Marker area state changed.

    This event is dispatched when the MarkerArea component's state changes.

    This is a good place to implement auto-saving or update the UI based on the current state.

    markerbeforedelete: CustomEvent<MarkerEditorEventData>

    Marker about to be deleted.

    This event is dispatched before a marker editor is deleted.

    markerchange: CustomEvent<MarkerEditorEventData>

    Marker changed.

    This event is dispatched when a marker editor's state has changed.

    markercreate: CustomEvent<MarkerEditorEventData>

    Marker created.

    This event is dispatched when a marker has been created. You can use this event to update the UI or perform actions based on the created marker editor.

    One common use case is implementing continuous marker creation, where you create a new marker editor immediately after the previous one has been created.

    // create another marker of the same type
    markerArea.addEventListener("markercreate", (ev) => {
      markerArea.createMarker(ev.detail.markerEditor.marker.typeName);
    });
    markercreating: CustomEvent<MarkerEditorEventData>

    Marker creating.

    This event is dispatched when a marker creation has been initiated. You can use this event to update the UI or perform actions based on the marker creation process.

    markerdelete: CustomEvent<MarkerEditorEventData>

    Marker deleted.

    This event is dispatched after a marker editor is deleted. You can use this event to update the UI or perform actions based on the deleted marker editor.

    markerdeselect: CustomEvent<MarkerEditorEventData>

    Marker deselected.

    This event is dispatched when a marker editor is deselected. You can use this event to update the UI or perform actions based on the deselected marker editor.

    markerselect: CustomEvent<MarkerEditorEventData>

    Marker selected.

    This event is dispatched when a marker editor is selected. You can use this event to update the UI or perform actions based on the selected marker editor.

    Settings

    Member Visibility

    On This Page

    Properties