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("

Hello World!

")) // add popup .addTo(map); ====================================
============================================ var markerHeight = 50, markerRadius = 10, linearOffset = 25; var popupOffsets = { 'top': [0, 0], 'top-left': [0,0], 'top-right': [0,0], 'bottom': [0, -markerHeight], 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1], 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1], 'left': [markerRadius, (markerHeight - markerRadius) * -1], 'right': [-markerRadius, (markerHeight - markerRadius) * -1] }; var popup = new mapboxgl.Popup({offset: popupOffsets, className: 'my-class'}) .setLngLat(e.lngLat) .setHTML("

Hello World!

") .setMaxWidth("300px") .addTo(map); ======================================================= Display a popup on click
=====================================================