YMapMarker

The YMapMarker class is a marker component on the map. It enables you to insert a custom DOM implementation of the marker.
It is an HTML container linked to a point on the map. Use it to display a custom layout on the map.

The default marker implementation is represented in the package https://www.npmjs.com/package/@yandex/ymaps3-default-ui-theme.

Usage example

vanilla

react

vue

const markerElement = document.createElement('div');
markerElement.className = 'marker-class';
markerElement.innerText = "I'm marker!";

const marker = new YMapMarker(
  {
    source: 'markerSource',
    coordinates: [37.588144, 55.733842],
    draggable: true,
    mapFollowsOnDrag: true
  },
  markerElement
);

map.addChild(marker);

Detailed example.

Constructor

new YMapMarker(props, element?)

Constructor parameters

Parameter	Type
`props`	`YMapMarkerProps`
`element?`	`HTMLElement`

Redefines

YMapGroupEntity.constructor

Props

YMapMarkerProps: {
	coordinates: <a href="ref/#LngLat">LngLat</a>;
	disableRoundCoordinates?: boolean;
	hideOutsideViewport?: <a href="ref/#HideOutsideRule">HideOutsideRule</a>;
	id?: string;
	properties?: <a href="ref/#recordkeys-type ">Record</a>&lt;string, unknown&gt;;
	source?: string;
	zIndex?: number
} &amp; <a href="ref/#interface-draggableprops">DraggableProps</a>&lt;<a href="YMapMarkerEventHandler">YMapMarkerEventHandler</a>&gt; &amp; <a href="ref/#interface-blockingprops">BlockingProps</a> &amp; <a href="ref/#interface-featureclickevents">FeatureClickEvents