import MapMarker from 'kqwebmap-project/src_en/map/MapMarker.js'

public class | source

MapMarker

Extends:

L~L.Marker → MapMarker

It is used to display clickable/draggable icons on the map. It surport these icons: Bootstrap 3 icons, Font Awesome 4.0, Semantic UI 0.9.8 icons, Ion Icons 2.0.1.

See:

./manual/example/mapmarker.html

Example:

// example 1:
var myIcon = new KQ.Struct.Icon({
iconUrl: '../../images/custom-marker.png',
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 40 ],
shadowUrl: '../../images/marker-shadow.png',
shadowSize: [ 25, 41 ],
shadowAnchor: [ 8, 40 ],
});

var marker = new KQ.Map.MapMarker([ 30, 104 ], { icon: myIcon });
marker.addToMapView(mapView);

// example 2:
var iconOptions = {
icon: 'fa-number',
markerColor: 'blue',
shape: 'square',
prefix: 'fa',
number: '3',
};

var marker = new KQ.Map.MapMarker([ 30.56, 113.66 ], {
extraIcon: iconOptions,
});

marker.addToMapView(mapView);

Constructor Summary

Public Constructor
public	constructor(latlng: LatLng, options: Object) Constructor

Method Summary

Public Methods
public	addToMapView(mapview: Object): Null Add marker to mapview
public	bindPopup(content: String \| HTML, options: Object): Null Binds a popup to the layer with the passed content.
public	bindTooltip(content: String \| HTML, options: Object): Null Binds a tooltip to the layer with the passed content.
public	closePopup(): Null Close popup
public	getBounds(): *
public	openPopup(latlng: LatLng): Null Open popup
public	remove(): Null Remove the marker from map
public	slideTo(latlng: LatLng, options: Object): Null Moves this marker until `latlng`, like `setLatLng()`, but with a smooth animation.
public	unbindPopup(): Null Removes the popup previously bound with bindPopup.
public	unbindTooltip(): Null Removes the tooltip previously bound with bindTooltip.

Public Constructors

public constructor(latlng: LatLng, options: Object) source

Constructor

Params:

Name	Type	Attribute	Description
latlng	LatLng		Geographical point
options	Object		Config params
options.icon	String		Icon class to use for rendering the marker.
options.extraIcon	Object		The param to generate a new icon. If set, options.icon will not be used.
options.extraIcon.extraClasses	String		Additional classes in the created <i> tag (fa-rotate90 myclass; space delimited classes to add)
options.extraIcon.icon	String		Name of the icon with prefix (fa-coffee or see icon library's documentation)
options.extraIcon.iconColor	String		Color of the icon ('white', 'black' or css code, hex, rgba etc)
options.extraIcon.innerHTML	String		Custom HTML code (<svg>, images, or other HTML; a truthy assignment will override the default html icon creation behavior)
options.extraIcon.markerColor	String		Color of the marker ('red', 'orange-dark', 'orange', 'yellow', 'blue-dark', 'cyan', 'purple', 'violet', 'pink', 'green-dark', 'green', 'green-light', 'black', or 'white')
options.extraIcon.number	String		Instead of an icon, define a plain text ('1' or 'A', must set icon: 'fa-number')
options.extraIcon.prefix	String		The icon library's base class (fa or see icon library's documentation)
options.extraIcon.shape	String		Shape of the marker ('circle', 'square', 'star', or 'penta')
options.draggable	Boolean		Whether the marker is draggable with mouse/touch or not.
options.keyboard	Boolean		Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.
options.title	String		Text for the browser tooltip that appear on marker hover.
options.alt	String		Text for the alt attribute of the icon image.
options.opacity	String		The opacity of the marker.
options.label	String		Label, support html.

Emit:

click	Fired when the user clicks (or taps) the layer.
dblclick	Fired when the user double-clicks (or double-taps) the layer.

Public Methods

public addToMapView(mapview: Object): Null source

Add marker to mapview

Params:

Name	Type	Attribute	Description
mapview	Object		mapview object

Return:

Null

public bindPopup(content: String | HTML, options: Object): Null source

Binds a popup to the layer with the passed content.

Params:

Name	Type	Attribute	Description
content	String \| HTML		Popup content
options	Object		Config param
options.offset	Point		Optional offset of the tooltip position.
options.maxWidth	Number		Max width of the popup, in pixels.
options.minWidth	Number		Min width of the popup, in pixels.
options.maxHeight	Number		If set, creates a scrollable container of the given height inside a popup if its content exceeds it.

Return:

Null

public bindTooltip(content: String | HTML, options: Object): Null source

Binds a tooltip to the layer with the passed content.

Params:

Name	Type	Attribute	Description
content	String \| HTML		tooltip content
options	Object		Config param
options.offset	Point		Optional offset of the tooltip position.
options.opacity	Number		Tooltip container opacity.

Return:

Null

public closePopup(): Null source

Close popup

Return:

Null

public getBounds(): * source

Return:

public openPopup(latlng: LatLng): Null source

Open popup

Params:

Name	Type	Attribute	Description
latlng	LatLng		target position(optional)

Return:

Null

public remove(): Null source

Remove the marker from map

Return:

Null

public slideTo(latlng: LatLng, options: Object): Null source

Moves this marker until latlng, like setLatLng(), but with a smooth animation.

Params:

Name	Type	Attribute	Description
latlng	LatLng		latlng
options	Object		options
options.duration	Number		the number of milliseconds the slide animation will last
options.keepAtCenter	Boolean		whether the map center will follow the marker for the duration of the animation. If set to true, the map's dragging handler will be disabled momentarily

Return:

Null

public unbindPopup(): Null source

Removes the popup previously bound with bindPopup.

Return:

Null

public unbindTooltip(): Null source

Removes the tooltip previously bound with bindTooltip.

Return:

Null