Options
All
  • Public
  • Public/Protected
  • All
Menu

Class MarkerComponent

class

MarkerComponent

classdesc

Component for showing and editing 3D marker objects.

The add method is used for adding new markers or replacing markers already in the set.

If a marker already in the set has the same id as one of the markers added, the old marker will be removed and the added marker will take its place.

It is not possible to update markers in the set by updating any properties directly on the marker object. Markers need to be replaced by re-adding them for updates to geographic position or configuration to be reflected.

Markers added to the marker component can be either interactive or non-interactive. Different marker types define their behavior. Markers with interaction support can be configured with options to respond to dragging inside the viewer and be detected when retrieving markers from pixel points with the getMarkerIdAt method.

To retrive and use the marker component

example
var viewer = new Mapillary.Viewer(
    "<element-id>",
    "<client-id>",
    "<my key>",
    { component: { marker: true } });

var markerComponent = viewer.getComponent("marker");

Hierarchy

Index

Events

Static changed

changed: string = "changed"

Fired when the position of a marker is changed.

type

{IMarkerEvent} markerEvent - Marker event data.

example
markerComponent.on("changed", function(e) {
    console.log(e.marker.id, e.marker.latLon);
});

Static dragend

dragend: string = "dragend"

Fired when a marker drag interaction ends.

type

{IMarkerEvent} markerEvent - Marker event data.

example
markerComponent.on("dragend", function(e) {
    console.log(e.marker.id, e.marker.latLon);
});

Static dragstart

dragstart: string = "dragstart"

Fired when a marker drag interaction starts.

type

{IMarkerEvent} markerEvent - Marker event data.

example
markerComponent.on("dragstart", function(e) {
    console.log(e.marker.id, e.marker.latLon);
});

Properties

Static componentName

componentName: string = "marker"

Accessors

activated

  • get activated(): boolean

defaultConfiguration

name

  • get name(): string
  • Get name.

    description

    The name of the component. Used when interacting with the component through the Viewer's API.

    Returns string

Methods

activate

add

  • add(markers: Marker[]): void
  • Add markers to the marker set or replace markers in the marker set.

    description

    If a marker already in the set has the same id as one of the markers added, the old marker will be removed the added marker will take its place.

    Any marker inside the visible bounding bbox will be initialized and placed in the viewer.

    example

    markerComponent.add([marker1, marker2]);

    Parameters

    • markers: Marker[]

      Markers to add.

    Returns void

configure

deactivate

  • deactivate(): void

fire

  • fire(eventType: string, data: any): void
  • Parameters

    • eventType: string
    • data: any

    Returns void

get

  • get(markerId: string): Marker
  • Returns the marker in the marker set with the specified id, or undefined if the id matches no marker.

    example

    var marker = markerComponent.get("markerId");

    Parameters

    • markerId: string

      Id of the marker.

    Returns Marker

getAll

  • getAll(): Marker[]

getMarkerIdAt

  • getMarkerIdAt(pixelPoint: number[]): when.Promise<string>
  • Returns the id of the interactive marker closest to the current camera position at the specified point.

    description

    Notice that the pixelPoint argument requires x, y coordinates from pixel space.

    With this function, you can use the coordinates provided by mouse events to get information out of the marker component.

    If no interactive geometry of an interactive marker exist at the pixel point, null will be returned.

    example
    markerComponent.getMarkerIdAt([100, 100])
        .then((markerId) => { console.log(markerId); });

    Parameters

    • pixelPoint: number[]

      Pixel coordinates on the viewer element.

    Returns when.Promise<string>

    Id of the interactive marker closest to the camera. If no interactive marker exist at the pixel point, null will be returned.

has

  • has(markerId: string): boolean
  • Check if a marker exist in the marker set.

    example

    var markerExists = markerComponent.has("markerId");

    Parameters

    • markerId: string

      Id of the marker.

    Returns boolean

off

  • off(eventType: string, fn: any): void
  • Unsubscribe from an event by its name.

    Parameters

    • eventType: string

      The name of the event to subscribe to.

    • fn: any

      The handler to remove.

    Returns void

on

  • on(eventType: string, fn: any): void
  • Subscribe to an event by its name.

    Parameters

    • eventType: string

      The name of the event to subscribe to.

    • fn: any

      The handler called when the event occurs.

    Returns void

remove

  • remove(markerIds: string[]): void
  • Remove markers with the specified ids from the marker set.

    example

    markerComponent.remove(["id-1", "id-2"]);

    Parameters

    • markerIds: string[]

      Ids for markers to remove.

    Returns void

removeAll

  • removeAll(): void

Generated using TypeDoc