Class: UIMarker

UIMarker

Class for UI Marker, a html based marker positioned by geographic coordinate.

new ui.UIMarker(coordinate, options) [source]

As it's renderered by HTMLElement such as a DIV, it:
1. always on the top of all the map layers
2. can't be snapped as it's not drawn on the canvas. 
var dom = document.createElement('div');
dom.innerHTML = 'hello ui marker';
var marker = new maptalks.ui.UIMarker([0, 0], {
     draggable : true,
     content : dom
 }).addTo(map);
Parameter Type Description
coordinate Coordinate UIMarker's coordinates
options Object options defined in UIMarker
Extends:
Mixes From:
Fires:

Members

  • (constant) options

    • Properties:
    Name Type Description
    options Object construct options
    Properties
    Name Type Default Description
    containerClass opt String null css class name applied to UIMarker's DOM container
    draggable opt Boolean false if the marker can be dragged.
    single opt Number false if the marker is a global single one.
    content String | HTMLElement content of the marker, can be a string type HTML code or a HTMLElement.
    altitude opt Number 0 altitude.
    minZoom opt Number 0 the minimum zoom to display .
    maxZoom opt Number null the maximum zoom to display.
    horizontalAlignment opt String middle horizontal Alignment 'middle','left','right'
    verticalAlignment opt String middle vertical Alignment 'middle','top','bottom'
    eventsPropagation opt Boolean false whether stop ALL events' propagation.
    eventsToStop opt Boolean null UI's dom events to stop propagation if eventsPropagation is true.
    dx opt Number 0 pixel offset on x axis
    dy opt Number 0 pixel offset on y axis
    autoPan opt Boolean false set it to false if you don't want the map to do panning animation to fit the opened UI.
    autoPanDuration opt Boolean 600 duration for auto panning animation.
    animation opt Boolean null fade | scale | fade,scale, add animation effect when showing and hiding.
    animationDuration opt Number 300 animation duration, in milliseconds.
    animationOnHide opt Number false if calls animation on hiding.
    pitchWithMap opt Boolean false whether tilt with map
    rotateWithMap opt Boolean false whether rotate with map
    collision opt Boolean false whether collision
    collisionBufferSize opt Number 2 collision buffer size
    collisionWeight opt Number 0 Collision weight, large priority collision
    collisionFadeIn opt Boolean false Collision fade in animation
    zIndex opt Number 0 dom zindex
    Overrides:
    Source:

    Methods

  • setCoordinates(coordinates) [source]

    • Sets the coordinates
    Parameter Type Description
    coordinates Coordinate UIMarker's coordinate
    Fires:
    Returns:
    UIMarker: this

  • getCoordinates() [source]

    • Gets the coordinates
    Returns:
    Coordinate: coordinates

  • setContent(content) [source]

    • Sets the content of the UIMarker
    Parameter Type Description
    content String | HTMLElement UIMarker's content
    Fires:
    Returns:
    UIMarker: this

  • getContent() [source]

    • Gets the content of the UIMarker
    Returns:
    String|HTMLElement: content

  • show() [source]

    • Show the UIMarker
    Fires:
    Returns:
    UIMarker: this

  • flash(intervalopt, countopt, cbopt, contextopt) [source]

    • Flash the UIMarker, show and hide by certain internal for times of count.
    Parameter Type Default Description
    interval opt Number 100 interval of flash, in millisecond (ms)
    count opt Number 4 flash times
    cb opt function null callback function when flash ended
    context opt * null callback context
    Returns:
    UIMarker: this

  • (protected) buildOn(map) [source]

    • A callback method to build UIMarker's HTMLElement
    Parameter Type Description
    map Map map to be built on
    Returns:
    HTMLElement: UIMarker's HTMLElement

  • (protected) getOffset() [source]

    • Gets UIMarker's HTMLElement's position offset, it's caculated dynamically accordiing to its actual size.
    Returns:
    Point: offset

  • (protected) getTransformOrigin() [source]

    • Gets UIMarker's transform origin for animation transform
    Returns:
    Point: transform origin

  • isDragging() [source]

    • Whether the uimarker is being dragged.
    Returns:
    Boolean:

  • (inherited) addTo(owner) [source]

    • Adds the UI Component to a geometry or a map
    Parameter Type Description
    owner Geometry | Map geometry or map to addto.
    Fires:
    Returns:
    ui.UIComponent: this

  • (inherited) getMap() [source]

    • Get the map it added to
    Returns:
    Map: map instance

  • (inherited) hide() [source]

    • Hide the UI Component.
    Fires:
    Returns:
    ui.UIComponent: this

  • (inherited) isVisible() [source]

    • Decide whether the ui component is open
    Returns:
    Boolean: true|false

  • (inherited) remove() [source]

    • Remove the UI Component
    Fires:
    Returns:
    ui.UIComponent: this

  • (inherited) getSize() [source]

    • Get pixel size of the UI Component.
    Returns:
    Size: size

  • (inherited) getDOM() [source]

    • get Dom Node
    Returns:
    HTMLDivElement: dom|null

  • (inherited) setZIndex() [source]

    • set Dom Node zIndex

  • (inherited) on(eventsOn, handler, contextopt) [source]

    • Register a handler function to be called whenever this event is fired. 
    foo.on('mousedown mousemove mouseup', onMouseEvent, foo);
    Parameter Type Default Description
    eventsOn String event types to register, seperated by space if more than one.
    handler function handler function to be called
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    Any: this

  • (inherited) addEventListener(eventTypes, handler, contextopt) [source]

    • Alias for on
    Parameter Type Default Description
    eventTypes String event types to register, seperated by space if more than one.
    handler function handler function to be called
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    : this

  • (inherited) once(eventTypes, handler, contextopt) [source]

    • Same as on, except the listener will only get fired once and then removed. 
    foo.once('mousedown mousemove mouseup', onMouseEvent, foo);
    Parameter Type Default Description
    eventTypes String event types to register, seperated by space if more than one.
    handler function listener handler
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    : this

  • (inherited) off(eventsOff, handler, contextopt) [source]

    • Unregister the event handler for the specified event types. 
    foo.off('mousedown mousemove mouseup', onMouseEvent, foo);
    Parameter Type Default Description
    eventsOff String event types to unregister, seperated by space if more than one.
    handler function listener handler
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    : this

  • (inherited) removeEventListener(eventTypes, handler, contextopt) [source]

    • Alias for off
    Parameter Type Default Description
    eventTypes String event types to unregister, seperated by space if more than one.
    handler function listener handler
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    : this

  • (inherited) listens(eventType, hanlderopt, contextopt) [source]

    • Returns listener's count registered for the event type.
    Parameter Type Default Description
    eventType String an event type
    hanlder opt function null listener function
    context opt Object null the context of the handler
    Mixes From:
    Returns:
    Number:

  • (inherited) getListeningEvents() [source]

    • Get all the listening event types
    Mixes From:
    Returns:
    Array.<String>: events

  • (inherited) copyEventListeners(target) [source]

    • Copy all the event listener to the target object
    Parameter Type Description
    target Object target object to copy to.
    Mixes From:
    Returns:
    : this

  • (inherited) fire(eventType, param) [source]

    • Fire an event, causing all handlers for that event name to run.
    Parameter Type Description
    eventType String an event type to fire
    param Object parameters for the listener function.
    Mixes From:
    Returns:
    : this

  • (inherited) callInitHooks() [source]

    • Visit and call all the init hooks defined on Class and its parents.
    Returns:
    Class: this

  • (inherited) setOptions(options) [source]

    • Merges options with the default options of the object.
    Parameter Type Description
    options Object options to set
    Returns:
    Class: this

  • (inherited) config(conf) [source]

    • 1. Return object's options if no parameter is provided.
    2. update an option and enable/disable the handler if a handler with the same name existed. 
    // Get marker's options;
var options = marker.config();
// Set map's option "draggable" to false and disable map's draggable handler.
map.config('draggable', false);
// You can update more than one options like this:
map.config({
    'scrollWheelZoom' : false,
    'doubleClickZoom' : false
});
    Parameter Type Description
    conf Object config to update
    Returns:
    Class: this

  • (inherited) onConfig() [source]

    • Default callback when config is called

    Events

  • mousedown [source]

    • mousedown event
    Properties:
    Name Type Description
    type String mousedown
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • mouseup [source]

    • mouseup event
    Properties:
    Name Type Description
    type String mouseup
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • mouseenter [source]

    • mouseenter event
    Properties:
    Name Type Description
    type String mouseenter
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • mouseover [source]

    • mouseover event
    Properties:
    Name Type Description
    type String mouseover
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • mouseout [source]

    • mouseout event
    Properties:
    Name Type Description
    type String mouseout
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • mousemove [source]

    • mousemove event
    Properties:
    Name Type Description
    type String mousemove
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • click [source]

    • click event
    Properties:
    Name Type Description
    type String click
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • dblclick [source]

    • dblclick event
    Properties:
    Name Type Description
    type String dblclick
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • contextmenu [source]

    • contextmenu event
    Properties:
    Name Type Description
    type String contextmenu
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • keypress [source]

    • keypress event
    Properties:
    Name Type Description
    type String keypress
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • touchstart [source]

    • touchstart event
    Properties:
    Name Type Description
    type String touchstart
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • touchmove [source]

    • touchmove event
    Properties:
    Name Type Description
    type String touchmove
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • touchend [source]

    • touchend event
    Properties:
    Name Type Description
    type String touchend
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • positionchange [source]

    • positionchange event.
    Properties:
    Name Type Description
    type String positionchange
    target UIMarker ui marker
    Source:

  • contentchange [source]

    • contentchange event.
    Properties:
    Name Type Description
    type String contentchange
    target UIMarker ui marker
    old String | HTMLElement old content
    new String | HTMLElement new content
    Source:

  • dragstart [source]

    • drag start event
    Properties:
    Name Type Description
    type String dragstart
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • dragging [source]

    • dragging event
    Properties:
    Name Type Description
    type String dragging
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • dragend [source]

    • dragend event
    Properties:
    Name Type Description
    type String dragend
    target UIMarker the uimarker fires event
    coordinate Coordinate coordinate of the event
    containerPoint Point container point of the event
    viewPoint Point view point of the event
    domEvent Event dom event
    Source:

  • (inherited) add [source]

    • add event.
    Properties:
    Name Type Description
    type String add
    target ui.UIComponent UIComponent
    Overrides:
    Source:

  • (inherited) showstart [source]

    • showstart event.
    Properties:
    Name Type Description
    type String showstart
    target ui.UIComponent UIComponent
    Overrides:
    Source:

  • (inherited) showend [source]

    • showend event.
    Properties:
    Name Type Description
    type String showend
    target ui.UIComponent UIComponent
    Overrides:
    Source:

  • (inherited) hide [source]

    • hide event.
    Properties:
    Name Type Description
    type String hide
    target ui.UIComponent UIComponent
    Overrides:
    Source:

  • (inherited) remove [source]

    • remove event.
    Properties:
    Name Type Description
    type String remove
    target ui.UIComponent UIComponent
    Overrides:
    Source: