Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Popup

class

Popup

classdesc

Popup instance for rendering custom HTML content on top of images. Popups are based on 2D basic image coordinates (see the Viewer class documentation for more information about coordinate systems) and a certain popup is therefore only relevant to a single image. Popups related to a certain image should be removed when moving to another image.

A popup must have both its content and its point or rect set to be rendered. Popup options can not be updated after creation but the basic point or rect as well as its content can be changed by calling the appropriate methods.

To create and add one Popup with default configuration (tooltip visuals and automatic float) and one with specific options use

example
var defaultSpan = document.createElement('span');
defaultSpan.innerHTML = 'hello default';

var defaultPopup = new Mapillary.PopupComponent.Popup();
defaultPopup.setDOMContent(defaultSpan);
defaultPopup.setBasicPoint([0.3, 0.3]);

var cleanSpan = document.createElement('span');
cleanSpan.innerHTML = 'hello clean';

var cleanPopup = new Mapillary.PopupComponent.Popup({
    clean: true,
    float: Mapillary.Alignment.Top,
    offset: 10,
    opacity: 0.7,
});

cleanPopup.setDOMContent(cleanSpan);
cleanPopup.setBasicPoint([0.6, 0.6]);

popupComponent.add([defaultPopup, cleanPopup]);
description

Implementation of API methods and API documentation inspired by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js

Hierarchy

  • Popup

Index

Constructors

constructor

Methods

setBasicPoint

  • setBasicPoint(basicPoint: number[]): void
  • Sets a 2D basic image coordinates point to the popup's anchor, and moves the popup to it.

    description

    Overwrites any previously set point or rect.

    example
    var popup = new Mapillary.PopupComponent.Popup();
    popup.setText('hello image');
    popup.setBasicPoint([0.3, 0.3]);
    
    popupComponent.add([popup]);

    Parameters

    • basicPoint: number[]

      Point in 2D basic image coordinates.

    Returns void

setBasicRect

  • setBasicRect(basicRect: number[]): void
  • Sets a 2D basic image coordinates rect to the popup's anchor, and moves the popup to it.

    description

    Overwrites any previously set point or rect.

    example
    var popup = new Mapillary.PopupComponent.Popup();
    popup.setText('hello image');
    popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
    
    popupComponent.add([popup]);

    Parameters

    • basicRect: number[]

      Rect in 2D basic image coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .

    Returns void

setDOMContent

  • setDOMContent(htmlNode: Node): void
  • Sets the popup's content to the element provided as a DOM node.

    example
    var div = document.createElement('div');
    div.innerHTML = 'hello image';
    
    var popup = new Mapillary.PopupComponent.Popup();
    popup.setDOMContent(div);
    popup.setBasicPoint([0.3, 0.3]);
    
    popupComponent.add([popup]);

    Parameters

    • htmlNode: Node

      A DOM node to be used as content for the popup.

    Returns void

setHTML

  • setHTML(html: string): void
  • Sets the popup's content to the HTML provided as a string.

    description

    This method does not perform HTML filtering or sanitization, and must be used only with trusted content. Consider Popup#setText if the content is an untrusted text string.

    example
    var popup = new Mapillary.PopupComponent.Popup();
    popup.setHTML('<div>hello image</div>');
    popup.setBasicPoint([0.3, 0.3]);
    
    popupComponent.add([popup]);

    Parameters

    • html: string

      A string representing HTML content for the popup.

    Returns void

setText

  • setText(text: string): void
  • Sets the popup's content to a string of text.

    description

    This function creates a Text node in the DOM, so it cannot insert raw HTML. Use this method for security against XSS if the popup content is user-provided.

    example
    var popup = new Mapillary.PopupComponent.Popup();
    popup.setText('hello image');
    popup.setBasicPoint([0.3, 0.3]);
    
    popupComponent.add([popup]);

    Parameters

    • text: string

      Textual content for the popup.

    Returns void

Generated using TypeDoc