Tag (Marker)

User interface elements that can be added to the map.

new Marker(options: Object?, legacyOptions: Options?)

Parameters

Name	Type	Description
legacyOptions	Object	Required
options	Object	Requiredparameter name type default value description anchor String center optionalSet the Marker position. Options include "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", and "bottom-right". clickTolerance Number 0 OptionalThe maximum number of pixels the user can move the mouse pointer when clicking a Marker for it to be considered a valid click (as opposed to Marker dragging). The default value is to inherit the map’s clickTolerance. color String #3FB1CE optionalIf options.element is not provided, the default color is used. draggable Boolean false optionalIndicates whether the Marker can be dragged to a new location on the map. element HTMLElment optionalDOM element used as markup. The default is a light blue, teardrop-shaped SVG markup. offset PointLike optionalAs the offset (in pixels) of the PointLike object, relative to the element’s center point. Negative numbers mean up and left. pitchAlignment String auto optional "map" Aligns the Marker to the plane of the map. "viewport" aligns the Marker to the plane of the viewport. "auto" automatically matches the value of rotationAlignment. rotation Number 0 OptionalMarker’s rotation angle (in degrees) relative to its respective rotationAlignment setting. Positive values ​​cause the marker to rotate clockwise. rotationAlignment String auto optionalThe alignment of Marker rotation, "map" causes the Marker to be aligned and rotated relative to the map plane, consistent with the basic direction when the map is rotated. "viewport" aligns the marker’s rotation relative to the viewport plane, regardless of map rotation. "auto" is equivalent to "viewport". scale Number 1 OptionalIf options.element is not provided, the default scale is used. The default proportions correspond to a height of 41px and a width of 27px.

Case

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

// Set options
var marker = new mapmost.Marker({
    color: "#FFFFFF",
    draggable: true
  }).setLngLat([30.5, 50.5])
  .addTo(map);

##Instance members

addTo

Add a marker to the map.

Parameters

Name	Type	Description
map	Map	RequiredMapmost GL JS map to add Marker.

Case

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // Add Marker to the map

getElement

Returns the Marker’s HTML element.

Case

const element = marker.getElement();

getLngLat

Get the geographical location of the marker.

Case

// Store the latitude and longitude coordinates of the marker into a variable
var lngLat = marker.getLngLat();
//Print the latitude and longitude value of marker on the console
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )

getOffset

Get the offset of the marker.

Case

const offset = marker.getOffset();

getPopup

Returns the Popup instance bound to the Marker.

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

console.log(marker.getPopup()); // Return popup instance

remove

Remove the marker from the map.

Case

var marker = new mapmost.Marker().addTo(map);
marker.remove();

setLngLat

Set the marker’s geolocation and move it.

Parameters

Name	Type	Description
lnglat	Lnglat	RequiredMarker’s position after movement.

Case

// Create a new marker, set the latitude and longitude, and add it to the map.
new mapmost.Marker()
    .setLngLat([-65.017, -16.457])
    .addTo(map);

setPopup

Bind the Popup to the Marker.

Parameters

Name	Type	Description
popup	Popup	RequiredIf undefined or null, unbinds all Popups bound on this Marker instance.

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>")) // Add popup
    .addTo(map);

togglePopup

Opens or closes the Popup instance bound to the Marker, depending on the Popup’s current state.

Case

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

marker.togglePopup(); // Toggle popup on or off

event

drag

Fired when dragging.

 

dragend

Fires when the marker has finished dragging.

 

dragstart

Fired when dragging starts.