Markers and popups

Elements that can be added to the map. The items in this section exist outside of the map’s canvas element.

Marker

Creates a marker component.

Example


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


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

API reference

Class Marker

ImageViewerMarker

Creates an ImageViewerMarker instance. This class behaves similarly to Marker but works with image pixels instead of geographic coordinates (latitude and longitude).

Example


const marker = new maptilersdk.ImageViewerMarker({})
  .setPosition([10, 20])
  .addTo(imageViewer);


// Set options
const marker = new maptilersdk.ImageViewerMarker({
  color: "#FFFFFF",
  draggable: true,
})
  .setPosition([30.5, 50.5])
  .addTo(imageViewer);

API reference

Class ImageViewerMarker

A popup component.

Example


const markerHeight = 50;
const markerRadius = 10;
const linearOffset = 25;

const 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],
};

const popup = new maptilersdk.Popup({ offset: popupOffsets, className: 'my-class' })
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

API reference

Class Popup

Was this helpful?