Work with markers

Description

The following are examples of usage of markers. A marker can be added to the map using the addTo() method, but if you are planning to work with a group of markers, we recommend you to use FeatureGroup (see the Processing of events of markers group, and Multiple markers display and adjustment of boundaries sections). For more information about markers, go to the Markers section of the documentation.

A marker, clicking on which you open a popup with the information:

Draggable marker

The marker, which users can drag and drop:

A marker with a custom icon

You can select a custom icon or a simple div element for the marker instead of an image:

Open a marker programmatically

It is possible to open a popup on demand. For example, by clicking on a link or button:

Marker with a tip

The marker has two kinds of tips: a regular one and a static one. Both options are considered in the following example:

Processing events of the group of markers

When clicking on the marker, the map will be centered in its position:

Animated movement of marker

An example of a marker that moves along a given trajectory:

Multiple markers display and adjustment of boundaries

Example of display and hiding of groups of markers with automatic detection of map boundaries:

Description​

A marker with a popup​

Draggable marker​

A marker with a custom icon​

Open a marker programmatically​

Marker with a tip​

Processing events of the group of markers​

Animated movement of marker​

Multiple markers display and adjustment of boundaries​