Skip to main content

Markers

Simple marker​

To add a Marker to the map, specify the required coordinates:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
});

Multiple markers​

To add multiple Markers to the map, use a loop:

const coords = [
    [55.27414804174869, 25.257576991034284],
    [55.289254243403306, 25.211614202468652],
    [55.34418588368302, 25.215341562259866],
    [55.35036569359612, 25.26068195798851],
    [55.32976632814914, 25.238324424362062],
];
coords.forEach((coord) => {
    const marker = new mapgl.Marker(map, {
        coordinates: coord,
    });
});

Marker with a custom icon​

To change the Marker icon, specify the icon parameter:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});

Marker with text​

Simple text label​

To add a Marker with text, specify the label parameter:

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    label: {
        text: "The marker's label",
    },
});

Text position​

To change the position of the text, specify the relativeAnchor and offset parameters for the label (see LabelOptions for more information):

// Middle-right alignment
const rightCenter = new mapgl.Marker(map, {
    coordinates: [55.32878, 25.23584],
    icon: 'https://docs-new.urbi.ae/img/mapgl/marker.svg',
    label: {
        text: 'Right center placement',
        offset: [20, 0],
        relativeAnchor: [0, 0.5],
    },
});
// Top-left alignment
const leftTop = new mapgl.Marker(map, {
    coordinates: [55.30878, 25.22584],
    icon: 'https://docs-new.urbi.ae/img/mapgl/marker.svg',
    label: {
        text: 'Left top placement',
        offset: [-10, -10],
        relativeAnchor: [1, 1],
    },
});

Text background​

To add a text label with a background image, specify the image parameter (see LabelImage for more information):

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    label: {
        text: "The marker's label",
        offset: [0, 25],
        relativeAnchor: [0.5, 0],
        image: {
            url: 'tooltip-top.svg',
            size: [100, 50],
            stretchX: [
                [10, 40],
                [60, 90],
            ],
            stretchY: [[20, 40]],
            padding: [20, 10, 10, 10],
        },
    },
});

See Label examples for more information on how to correctly stretch the image.

Events​

To subscribe to events such as click on a marker, use the on() method (see DynamicObjectEventTable for the list of possible events):

const marker = new mapgl.Marker(map, {
    coordinates: [55.31878, 25.23584],
    icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
marker.on('click', (e) => {
    alert('Marker is clicked');
});