https://docs.mapbox.com/mapbox-gl-js/api/markers/
Controls scripts below =============================================
Display map navigation controls
================== Markers ================================
Name Description
options.element
HTMLElement? DOM element to use as a marker. The default is a light blue,
droplet-shaped SVG marker.
options.anchor
string
default: 'center'
A string indicating the part of the Marker that should be positioned closest to
the coordinate set via Marker#setLngLat . Options are 'center' , 'top' ,
'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' ,
and 'bottom-right' .
options.offset
PointLike? The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.
options.color
string
default: '#3FB1CE'
The color to use for the default marker if options.element is not provided. The default is light blue.
options.scale
number
default: 1
The scale to use for the default marker if options.element is not provided. The default scale corresponds to a height of 41px and a width of 27px .
options.draggable
boolean
default: false
A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
options.clickTolerance
number
default: 0
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map's clickTolerance.
options.rotation
number
default: 0
The rotation angle of the marker in degrees, relative to its respective rotationAlignment setting. A positive value will rotate the marker clockwise.
options.pitchAlignment
string
default: 'auto'
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 .
options.rotationAlignment
string
default: 'auto'
map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport .
legacyOptions(Options?)
Example
var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
// Set options
var marker = new mapboxgl.Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5])
.addTo(map);
=============================
var marker = new mapboxgl.Marker()
.setLngLat([30.5, 50.5])
.addTo(map);
// Set options
var marker = new mapboxgl.Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5])
.addTo(map);
var marker = new mapboxgl.Marker()
.setLngLat([0, 0])
.setPopup(new mapboxgl.Popup().setHTML("
")
.setMaxWidth("300px")
.addTo(map);
=======================================================
Display a popup on click
=====================================================