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
Related examples
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
Related examples
Popup
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);