Methods¶

addTo(map)¶

Add marker to the map.

marker.addTo(map);

getLngLat()¶

Get the current coordinates of the marker. This method useful when you want to click on a point on the map to display the marker and the coordinates of that location.

const marker = new vietmapGl.Marker({
      draggable: true,
      color: '#25A18E',
    })
      .setLngLat([106.675477, 10.758898])
      .addTo(map);

    marker.on('dragend', () => {
        const lngLat = marker.getLngLat();
        const longitude = lngLat.lng.toFixed(6);
        const latitude = lngLat.lat.toFixed(6);

        console.log('Kinh độ:', longitude);
        console.log('Vĩ độ:', latitude);
      });

setLngLat()¶

Set the marker to the specified location.

marker.setLngLat([106.67547751224498, 10.758898464351262])

remove()¶

Remove the marker from the map.

marker.remove();

setElement¶

Change the DOM element used as the marker. Allows you to customize the marker interface using HTML elements.

    const markerElementEnd = document.createElement('div');
    markerElementEnd.className = 'custom-marker-end';

    const newMarkerEnd = new vietmapGl.Marker({
        element: markerElementEnd,
        anchor: 'bottom',
    })
        .setLngLat([endCoordinates.lng, endCoordinates.lat])
        .addTo(mapRef.current);

    setMarkerEnd(newMarkerEnd);

getElement¶

Get the current DOM element used as the marker.

HTMLElement: element

setDraggable(draggable: boolean): this¶

Allow dragging and dropping the marker on the map. When draggable is true, you can drag and drop the marker on the map.

marker.setDraggable(true);

isDraggable()¶

Check if the marker is in draggable mode. Returns true if the marker can be dragged.

const draggable = marker.isDraggable();
console.log(draggable);

on(event: string, handler: Function): this¶

Assign an event handler to the marker. This allows you to perform actions when interacting with the marker.

Parameter

event: The name of the event
handler: The function that will be called when the event occurs.

marker.on('dragend', () => {
    const lngLat = marker.getLngLat();
        console.log('Longitude:', longitude);
        console.log('Latitude:', latitude);
      });

off(event: string, handler: Function): this¶

Remove the event handler assigned to the marker.

Parameter

event: The name of the event
handler: The function that will be called when the event occurs.

const handleClick = () => {
  console.log('Click Marker');
};
marker.on('click', handleClick);

marker.off('click', handleClick);

setRotation(rotation: number): this¶

Allow setting the rotation of the marker when displayed on the map.

marker.setRotation(45); // Calculated in degrees

getRotation(): number¶

Get the current rotation of the marker displayed on the map.

const rotation = marker.getRotation();
console.log(rotation);