MMapMarker

The MMapMarker 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/@mappable-world/mappable-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 MMapMarker(
  {
    source: 'markerSource',
    coordinates: [25.229762, 55.289311],
    draggable: true,
    mapFollowsOnDrag: true
  },
  markerElement
);

map.addChild(marker);

Detailed example.

Constructor

new MMapMarker(props, element?)

Constructor parameters

Parameter	Type
`props`	`MMapMarkerProps`
`element?`	`HTMLElement`

Redefines

MMapGroupEntity.constructor

Props

MMapMarkerProps: {
	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="MMapMarkerEventHandler">MMapMarkerEventHandler</a>&gt; &amp; <a href="ref/#interface-blockingprops">BlockingProps</a> &amp; <a href="ref/#interface-featureclickevents">FeatureClickEvents