JavaScript API

Ruler module

Displays a ruler on the map and allows you to determine the distance between points and the area of the described shape. This module only provides the calculation of the distance and the display of the geodetic line between the reference points. The display of markers and their signatures is determined on the user's side.

Usage

When creating a ruler on a map, you need to specify an array of reference points (points), the type of ruler (type), geometry parameters (geometry), a preview point view (previewPoint), and a callback function that creates new reference points (point).

The current status of the point, as well as functions (onDelete, onDragMove, and others), are passed from the callback function, which should be called whenever any action is taken on the point. Points are updated when any of the following events occur: a point is changed, points are added or deleted, the ruler type is changed, or the editable flag is toggled.

The ruler also provides a set of callbacks to common events that you can subscribe to: onUpdate to receive notifications about each update of the ruler, onUpdateStart to start editing the ruler, onUpdateEnd to indicate the end of editing.

Ruler API

  • type (RulerType) – type of ruler. ruler – line that measures the distance. planimeter - polygon that measures the area
  • points (LngLat[]) – ruler reference points
  • editable (boolean) – flag that the ruler can be edited (by default, true).
  • geometry (RulerGeometry) – object with parameters for the feature geometry on the map
    • style(DrawingStyle) – styles for the line and polygon
  • source (string) – name for the ruler's data source (by default, mappable-ruler)
  • zIndex (number) – base zIndex for the ruler layer (by default, 2600). For more information, see the Ruler layers section
  • onUpdate (UpdateCommonFn) – callback function, when updating the ruler. Returns the total measurements (the length of the entire ruler in meters or the area of the entire ruler in square meters) and the ruler points (LngLat[])
  • onUpdateStart (UpdateStartFn) – callback function when the ruler update starts. To work correctly, you need to pass onDragStart events to the ruler
  • onUpdateEnd (UpdateEndFn) – callback function when the ruler update ends. To work correctly, you need to pass onDragEnd events to the ruler
  • previewPoint – preview point to display when hovering over the ruler line. There are differences in different versions:
    • vanilla – HTMLElement
    • react – ReactElement
    • vue – named slot previewPoint
  • point – callback that gets the values at this point and returns the point. For more information, see Point rendering section. The return value has the following differences:
    • vanilla – return MMapEntity<RenderPointArgs> entity
    • react – return ReactElement
    • vue – named slot point

Ruler layers

The points and geometry of the ruler are displayed on the inner layers. This is necessary in order to correctly arrange the order of points, geometries and the blocking layer:

  • blocking layer – added only if the prop is editable === true. The zIndexof the layer is equal to_props.zIndex
  • geometry layer - displays the feature geometry. The zIndex of the layer is equal to _props.zIndex + 0.1
  • points layer - displays the points. The zIndex of the layer is equal to _props.zIndex + 0.2

Ruler layers have a zIndex between _props.zIndex and _props.zIndex + 1 and are a non-public API.

Since the markers are created on the user's side, we give the data source id to the outside so that the markers are added to this particular layer.

Point rendering

The ruler points are rendered using the callback point. As arguments, come an object with parameters for rendering:

  • state – current state of the point
    • index (number) – index of the point in the ruler (0-based)
    • totalCount (number) – total number of points in the ruler
    • coordinates (LngLat) – current coordinates of the point
    • measurements (Measurements) – measurement values at this point
    • editable (boolean) – flag that the ruler can be edited
    • source (string) – data source id to which the marker should be added
  • onDragMove(coordinates: LngLat) – a callback to be called when moving a point
  • onDragStart(coordinates: LngLat) – a callback to be called at the beginning of the point movement
  • onDragEnd(coordinates: LngLat) – a callback to be called at the end of the point movement
  • onDelete() - a callback to be called if the point is to be deleted

The behavior of markers is configured on the user's side, so you need to send information through the callback about what has changed at the point.

The measurement (Measurements) values differ from the type of tape measure:

  • If the type is ruler
    • type - 'ruler'
    • distance - distance in meters between the starting point and the current position
    • segmentDistance - distance in meters between the previous point and the current point
    • totalDistance - total length of the tape measure in meters
  • If the type is planimeter
    • type – 'planimeter'
    • area - area of the figure is in square meters.

The previewPoint does not require any specific movement settings. Instead, you simply need to provide an HTML element that will be used as a placeholder for the preview.

Vanilla

When rendering a point using vanilla, the callback function should return an entity with the specified arguments. Updating the object (.update()) takes place within the rendering process, so it is essential to maintain consistency between passes.

A simplified example of rendering in vanilla is as follows:

// Ruler point entity
class RulerPoint extends mappable.MMapComplexEntity<RenderPointArgs> {
  constructor(props: RenderPointArgs) {
    super(props);

    const point = document.createElement('div');
    // Customizing the look of a point

    /**
     * the abstract delete button, when clicked, calls the callback onDelete
     * so that the roulette inside deletes this point
     */
    const deleteButton = document.createElement('button');
    deleteButton.addEventListener('click', () => this._props.onDelete());

    const {coordinates, editable, source} = this._props.state;

    this._pointMarker = new MMapMarker(
      {
        coordinates, // current coordinates of the point
        draggable: editable, // "draggable" only if the ruler can be edited
        source, // data source id to which the marker should be added
        onDragMove: this._props.onDragPoint // callback when moving a point
      },
      point // html element point
    );
    this.addChild(this._pointMarker);
  }

  protected _onUpdate(props: Partial<RenderPointArgs>): void {
    // updating a point when its state changes
    if (props.state !== undefined) {
      const {coordinates, editable, source} = props.state;

      this._pointMarker.update({coordinates, draggable: editable, source});

      // abstract verification that the point is at the end of the ruler, for example.
      if (props.state.index === props.state.totalCount - 1) {
        // ...
      }
    }
  }
}

const previewPoint = document.createElement('div');
// ... setting up a preview point

const ruler = new MMapRuler({
  points: RULER_COORDINATES,
  type: 'ruler',
  previewPoint,
  geometry: {lineStyle: FEATURE_LINE_STYLE, polygonStyle: FEATURE_POLYGON_STYLE},
  point: (params: RenderPointArgs) => new RulerPoint(props)
});

React

When rendering a point in React, the function should return a ReactElement. The point is then updated by the same function. The returned element will be added as a child of the <MMapRuler/> component.

Here is a similar simplified example of how to render in React:

const RulerPoint = ({state, onDragPoint, onDelete}: RenderPointArgs) => {
  const onDragMove = React.useCallback((coordinates) => {
    onDragPoint(coordinates);
  }, []);

  const onDeletePoint = React.useCallback(() => {
    onDelete();
  }, []);

  return (
    <MMapMarker
      coordinates={state.coordinates}
      source={state.source}
      draggable={state.editable}
      onDragMove={onDragMove}
    >
      <div className="point"></div>
    </MMapMarker>
  );
};

const App = () => {
  const [geometry] = React.useState({lineStyle: FEATURE_LINE_STYLE, polygonStyle: FEATURE_POLYGON_STYLE});

  const onRender = React.useCallback(({state, onDelete, onDragPoint}: RenderPointArgs) => {
    return <RulerPoint state={state} onDragPoint={onDragPoint} onDelete={onDelete} />;
  }, []);

  return (
    <MMapRuler
      points={RULER_COORDINATES}
      type={'ruler'}
      point={onRender}
      geometry={geometry}
      previewPoint={<div className="preview-point"></div>}
    />
  );
};

Vue

When rendering a point in Vue, the named slot point is used. The update takes place in the same named slot

A similar simplified example to demonstrate rendering in vue:

const RulerPoint = Vue.defineComponent({
  name: 'RulerPoint',
  props: {
    state: Object as TVue.PropType<RenderPointArgs['state']>,
    onDragPoint: Function as TVue.PropType<RenderPointArgs['onDragPoint']>,
    onDelete: Function as TVue.PropType<RenderPointArgs['onDelete']>
  },
  setup(props) {
    const onDragMove = (coordinates) => {
      props.onDragPoint(coordinates);
    };
    const onDeletePoint = () => {
      props.onDelete();
    };
    return {onDragMove, onDeletePoint};
  },
  template: `
    <MMapMarker
        :coordinates="state.coordinates"
        :draggable="state.editable"
        :source="state.source"
        :onDragMove="onDragMove">
        <div class="point"></div>
    </MMapMarker>`
});

Vue.createApp({
  setup() {
    return {RULER_COORDINATES, FEATURE_LINE_STYLE, FEATURE_POLYGON_STYLE};
  },
  template: `
    <MMapRuler
        :points="RULER_COORDINATES"
        :geometry="{lineStyle: FEATURE_LINE_STYLE, polygonStyle: FEATURE_POLYGON_STYLE}"
        type="ruler">

        <!-- Named slot for point render -->
        <template #point="{state, onDragPoint, onDelete}">
            <RulerPoint
                :state="state"
                :onDragPoint="onDragPoint"
                :onDelete="onDelete" />
        </template>

        <!-- Named slot for preview point -->
        <template #previewPoint>
            <div class="preview-point"></div>
        </template>
    </MMapRuler>`
});

Class: MMapRuler

Entity that aggregates multiple Entities but looks basic from the outside.

Type Param

Root Entity Class.

Example

type MMapSomeComplexEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeComplexEntity extends MMapComplexEntity<MMapSomeComplexEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 private _someEntity?: MMapSomeEntity; // MMapSomeEntity extends GenericEntity
 protected _onAttach(): void {
     this._someEntity = new MMapSomeEntity();
     this.addChild(this._someEntity); // add someEntity as children
     // ...
 }
 // ...
}

Constructors

constructor

new MMapRuler(props)

Parameters
Name Type
props MMapRulerProps
Overrides

MMapComplexEntity.constructor

Properties

[optionsKeyVuefy]

static [optionsKeyVuefy]: CustomVuefyOptions<MMapRulerCommon, {
	editable?: boolean;
	geometry: RulerGeometry;
	onUpdate?: UpdateCommonFn;
	onUpdateEnd?: UpdateEndFn;
	onUpdateStart?: UpdateStartFn;
	points: LngLat[];
	source?: string;
	type: RulerType;
	zIndex?: number 
}>

[overrideKeyReactify]

static [overrideKeyReactify]: CustomReactify<MMapRuler, ForwardRefExoticComponent<{
	editable?: boolean;
	geometry: RulerGeometry;
	key?: null | Key;
	onUpdate?: UpdateCommonFn;
	onUpdateEnd?: UpdateEndFn;
	onUpdateStart?: UpdateStartFn;
	point: (`params`: RenderPointCommonArgs) => ReactElement<any, string | JSXElementConstructor<any>>;
	points: LngLat[];
	previewPoint: ReactElement<any, string | JSXElementConstructor<any>>;
	ref?: Ref<MMapRulerCommon>;
	source?: string;
	type: RulerType;
	zIndex?: number 
}>>

[overrideKeyVuefy]

static [overrideKeyVuefy]: CustomVuefyFn<MMapRulerCommon, {
	editable?: boolean;
	geometry: RulerGeometry;
	onUpdate?: UpdateCommonFn;
	onUpdateEnd?: UpdateEndFn;
	onUpdateStart?: UpdateStartFn;
	points: LngLat[];
	source?: string;
	type: RulerType;
	zIndex?: number 
}>

defaultProps

static defaultProps: Readonly<{}>

Accessors

parent

get parent(): null | MMapComplexEntity<unknown, {}>

Get parent entity.

Returns

null | MMapComplexEntity<unknown, {}>

Inherited from

MMapComplexEntity.parent

root

get root(): null | MMap

Get root entity.

Returns

null | MMap

Inherited from

MMapComplexEntity.root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<MMapRulerProps> New props values.
Returns

void

Inherited from

MMapComplexEntity.update

Class: Config

Configuration object for whole API.
For example, it can be used to set experiments or apikeys.

mappable.getDefaultConfig().setApikeys({search: "YOUR_SEARCH_API_KEY"})`.

Constructors

constructor

new Config()

Properties

description

readonly description: string

Methods

setApikeys

setApikeys(apikeys): void

Set apikeys for http-services.

mappable.getDefaultConfig().setApikeys({search: "YOUR_SEARCH_API_KEY"})`.
Parameters
Name Type
apikeys Apikeys
Returns

void

setExperiments

setExperiments(experiments): void

Set experiments for map.

Parameters
Name Type
experiments Record<string, boolean>
Returns

void

Class: Context<_T>

Type parameters

Name
_T

Constructors

constructor

new Context<_T>(name)

Type parameters
Name
_T
Parameters
Name Type
name string

Properties

name

readonly name: string

Class: GenericComplexEntity<Props, DefaultProps, Root>

Entity that aggregates multiple Entities but looks basic from the outside.

Example

type MMapSomeComplexEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeComplexEntity extends GenericComplexEntity<MMapSomeComplexEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 private _someEntity?: MMapSomeEntity; // MMapSomeEntity extends GenericEntity
 protected _onAttach(): void {
     this._someEntity = new MMapSomeEntity();
     this.addChild(this._someEntity); // add someEntity as children
     // ...
 }
 // ...
}

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.
Root extends GenericRootEntity<unknown> = GenericRootEntity<unknown> Root Entity Class.

Constructors

constructor

new GenericComplexEntity<Props, DefaultProps, Root>(props, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Root extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>
Parameters
Name Type Description
props Props The value of input props.
options? ComplexOptions<Root> Optional options object.
Overrides

GenericEntity.constructor

new GenericComplexEntity<Props, DefaultProps, Root>(props, children?, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Root extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>
Parameters
Name Type
props Props
children? GenericEntity<unknown, {}, Root>[]
options? Omit<ComplexOptions<Root>, "children">
Overrides

GenericEntity<Props, DefaultProps, Root&gt;.constructor

Accessors

parent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

Returns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited from

GenericEntity.parent

root

get root(): null | Root

Get root entity.

Returns

null | Root

Inherited from

GenericEntity.root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Inherited from

GenericEntity.update

Class: GenericEntity<Props, DefaultProps, Root>

Entity Base Class. It has event handlers for attaching, detaching and updating props. Has a method for providing and using context.

Example

type MMapSomeEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeEntity extends GenericEntity<MMapSomeEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 public isAttached: boolean;
 constructor(props: MMapSomeEntityProps) {
     super(props);
     this.isAttached = false
     // Additional actions can be taken in the constructor of a class.
 }
 protected _onAttach(): void {
     this.isAttached = true;
     // Additional actions can be taken when an Entity is attached.
 }
 // ...
}

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.
Root extends GenericRootEntity<unknown> = GenericRootEntity<unknown> Root Entity Class.

Constructors

constructor

new GenericEntity<Props, DefaultProps, Root>(props)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Root extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>
Parameters
Name Type Description
props Props The value of input props.

Accessors

parent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

Returns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

root

get root(): null | Root

Get root entity.

Returns

null | Root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Class: GenericGroupEntity<Props, DefaultProps, Root>

Entity that aggregates multiple Entities, and allows you to publicly add and remove entities to a subtree.

Example

type MMapSomeGroupEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeGroupEntity extends GenericGroupEntity<MMapSomeGroupEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 // ...
}
const groupEntity = new MMapSomeGroupEntity()
const someEntity = new MMapSomeEntity(); // MMapSomeEntity extends GenericEntity
groupEntity.addChild(someEntity); // add someEntity in MMapSomeGroupEntity object
groupEntity.removeChild(someEntity); // remove someEntity from MMapSomeGroupEntity object

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.
Root extends GenericRootEntity<unknown> = GenericRootEntity<unknown> Root Entity Class.

Constructors

constructor

new GenericGroupEntity<Props, DefaultProps, Root>(props, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Root extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>
Parameters
Name Type Description
props Props The value of input props.
options? ComplexOptions<Root> Optional options object.
Inherited from

GenericComplexEntity.constructor

new GenericGroupEntity<Props, DefaultProps, Root>(props, children?, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Root extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>
Parameters
Name Type
props Props
children? GenericEntity<unknown, {}, Root>[]
options? Omit<ComplexOptions<Root>, "children">
Inherited from

GenericComplexEntity.constructor

Properties

children

readonly children: readonly GenericEntity<unknown, {}, Root>[]
Overrides

GenericComplexEntity.children

Accessors

parent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

Returns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited from

GenericComplexEntity.parent

root

get root(): null | Root

Get root entity.

Returns

null | Root

Inherited from

GenericComplexEntity.root

Methods

addChild

addChild(child, index?): GenericGroupEntity<Props, DefaultProps, Root>

Parameters
Name Type
child GenericEntity<unknown, {}, Root>
index? number
Returns

GenericGroupEntity<Props, DefaultProps, Root>

Overrides

GenericComplexEntity.addChild

removeChild

removeChild(child): GenericGroupEntity<Props, DefaultProps, Root>

Parameters
Name Type
child GenericEntity<unknown, {}, Root>
Returns

GenericGroupEntity<Props, DefaultProps, Root>

Overrides

GenericComplexEntity.removeChild

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Inherited from

GenericComplexEntity.update

Class: GenericRootEntity<Props, DefaultProps>

Entity that is root and cannot be added anywhere

Example

type MMapProps = {
 name?: string;
};
class MMap extends GenericRootEntity<MMapProps, typeof defaultProps> {
 // ...
}
// Now we can specify their root element for the Entity
class MMapSomeEntity extends GenericEntity<MMapSomeEntityProps, typeof defaultProps, MMap> {
 static defaultProps = defaultProps;
 // ...
}

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.

Constructors

constructor

new GenericRootEntity<Props, DefaultProps>(props, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Parameters
Name Type Description
props Props The value of input props.
options? ComplexOptions<GenericRootEntity<unknown, {}>> Optional options object.
Inherited from

GenericGroupEntity.constructor

new GenericRootEntity<Props, DefaultProps>(props, children?, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Parameters
Name Type
props Props
children? GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>[]
options? Omit<ComplexOptions<GenericRootEntity<unknown, {}>>, "children">
Inherited from

GenericGroupEntity.constructor

Properties

children

readonly children: readonly GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>[]
Inherited from

GenericGroupEntity.children

Accessors

parent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

Returns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited from

GenericGroupEntity.parent

root

get root(): this

Get root entity.

Returns

this

Overrides

GenericGroupEntity.root

Methods

addChild

addChild(child, index?): GenericRootEntity<Props, DefaultProps>

Parameters
Name Type
child GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>
index? number
Returns

GenericRootEntity<Props, DefaultProps>

Inherited from

GenericGroupEntity.addChild

destroy

Abstract destroy(): void

Completely destroys the entity tree including the current entity

Returns

void

removeChild

removeChild(child): GenericRootEntity<Props, DefaultProps>

Parameters
Name Type
child GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>
Returns

GenericRootEntity<Props, DefaultProps>

Inherited from

GenericGroupEntity.removeChild

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Inherited from

GenericGroupEntity.update

Class: MMap

Main API class. Create a map container.

Example

const map = new MMap(
    document.getElementById('map-root'),
    {location: {center: [-0.118092, 51.509865], zoom: 10}}
);
// add default Mappable scheme layer
map.addChild(new MMapDefaultSchemeLayer());
// relocate map to another point with animation in 200 milliseconds
map.setLocation({center: [48.707067, 44.516975], duration: 200});
// change mode from default `auto` to `raster`
map.setMode('raster');
// get map zoom for some calculations
const zoom = map.zoom;

Constructors

constructor

new MMap(rootContainer, props, children?)

Parameters
Name Type
rootContainer HTMLElement
props MMapProps
children? MMapEntity<unknown, {}>[]
Overrides

GenericRootEntity.constructor

Properties

children

readonly children: MMapEntity<unknown, {}>[]
Overrides

GenericRootEntity.children

[overrideKeyReactify]

static [overrideKeyReactify]: CustomReactify<MMap, ForwardRefExoticComponent<{
	behaviors?: BehaviorType[];
	camera?: MMapCameraRequest;
	children?: ReactNode;
	className?: string;
	config?: Config;
	copyrights?: boolean;
	copyrightsPosition?: MMapCopyrightsPosition;
	hotspotsStrategy?: "forViewport" | "forPointerPosition";
	key?: null | Key;
	location: MMapLocationRequest;
	margin?: Margin;
	mode?: MapMode;
	projection?: Projection;
	ref?: Ref<MMap>;
	restrictMapArea?: false | LngLatBounds;
	showScaleInCopyrights?: boolean;
	theme?: MMapTheme;
	tiltRange?: TiltRange;
	worldOptions?: WorldOptions;
	zoomRange?: ZoomRange;
	zoomRounding?: ZoomRounding;
	zoomStrategy?: ZoomStrategy 
}>>

defaultProps

static defaultProps: Readonly<{
	behaviors: string[];
	camera: {
		azimuth: number;
		tilt: number 
	};
	className: "";
	config: Config;
	copyrights: true;
	copyrightsPosition: "bottom right";
	hotspotsStrategy: "forViewport" | "forPointerPosition";
	margin: undefined | Margin;
	mode: "auto";
	projection: Projection;
	restrictMapArea: false;
	showScaleInCopyrights: false;
	theme: "light";
	worldOptions: {
		cycledX: boolean;
		cycledY: boolean 
	};
	zoomRange: ZoomRange;
	zoomRounding: "auto";
	zoomStrategy: "zoomToPointer" 
}>

Accessors

azimuth

get azimuth(): number

Returns

number

behaviors

get behaviors(): readonly BehaviorType[]

getter for MMapProps.behaviors prop

Returns

readonly BehaviorType[]

bounds

get bounds(): LngLatBounds

getter for MMapProps.location.bounds prop

Returns

LngLatBounds

center

get center(): readonly [number, number, undefined | number]

getter for MMapProps.location.center prop

Returns

readonly [number, number, undefined | number]

config

get config(): Readonly<Config>

getter for MMapProps.config prop

Returns

Readonly<Config>

container

get container(): HTMLElement

Main map container

Returns

HTMLElement

parent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

Returns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited from

GenericRootEntity.parent

projection

get projection(): Projection

getter for MMapProps.projection prop

Returns

Projection

restrictMapArea

get restrictMapArea(): Readonly<false | LngLatBounds>

getter for MMapProps.restrictMapArea prop

Returns

Readonly<false | LngLatBounds>

root

get root(): this

Get root entity.

Returns

this

Inherited from

GenericRootEntity.root

size

get size(): PixelCoordinates

getter for map size

Returns

PixelCoordinates

theme

get theme(): "dark" | "light"

getter for MMapProps.theme prop

Returns

"dark" | "light"

tilt

get tilt(): number

Returns

number

tiltRange

get tiltRange(): Readonly<TiltRange>

Returns

Readonly<TiltRange>

zoom

get zoom(): number

getter for MMapProps.location.zoom prop

Returns

number

zoomRange

get zoomRange(): Readonly<ZoomRange>

getter for MMapProps.zoomRange prop

Returns

Readonly<ZoomRange>

Methods

addChild

addChild(child, index?): MMap

Parameters
Name Type
child MMapEntity<unknown, {}>
index? number
Returns

MMap

Overrides

GenericRootEntity.addChild

destroy

destroy(): void

Destroy map and remove it from user DOM-element

Returns

void

Overrides

GenericRootEntity.destroy

removeChild

removeChild(child): MMap

Parameters
Name Type
child MMapEntity<unknown, {}>
Returns

MMap

Overrides

GenericRootEntity.removeChild

setBehaviors

setBehaviors(behaviors): void

setter for MMapProps.behaviors prop

Parameters
Name Type
behaviors BehaviorType[]
Returns

void

setCamera

setCamera(camera): void

setter for MMapProps.camera prop

Parameters
Name Type
camera MMapCameraRequest
Returns

void

setConfig

setConfig(config): void

setter for MMapProps.config prop

Parameters
Name Type
config Config
Returns

void

setLocation

setLocation(location): void

setter for MMapProps.location prop

Parameters
Name Type
location MMapLocationRequest
Returns

void

setMargin

setMargin(margin): void

setter for MMapProps.margin prop

Parameters
Name Type
margin Margin
Returns

void

setMode

setMode(mode): void

setter for MMapProps.mode prop

Parameters
Name Type
mode MapMode
Returns

void

setProjection

setProjection(projection): void

setter for MMapProps.projection prop

Parameters
Name Type
projection Projection
Returns

void

setRestrictMapArea

setRestrictMapArea(restrictMapArea): void

setter for MMapProps.config prop

Parameters
Name Type
restrictMapArea LngLatBounds
Returns

void

setZoomRange

setZoomRange(zoomRange): void

setter for MMapProps.zoomRange prop

Parameters
Name Type
zoomRange ZoomRange
Returns

void

setZoomRounding

setZoomRounding(zoomRounding): void

setter for MMapProps.zoomRounding prop

Parameters
Name Type
zoomRounding ZoomRounding
Returns

void

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<MMapProps> New props values.
Returns

void

Inherited from

GenericRootEntity.update

Class: MMapComplexEntity<Props, DefaultProps>

Entity that aggregates multiple Entities but looks basic from the outside.

Type Param

Root Entity Class.

Example

type MMapSomeComplexEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeComplexEntity extends MMapComplexEntity<MMapSomeComplexEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 private _someEntity?: MMapSomeEntity; // MMapSomeEntity extends GenericEntity
 protected _onAttach(): void {
     this._someEntity = new MMapSomeEntity();
     this.addChild(this._someEntity); // add someEntity as children
     // ...
 }
 // ...
}

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.

Implements

Constructors

constructor

new MMapComplexEntity<Props, DefaultProps>(props, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Parameters
Name Type Description
props Props The value of input props.
options? ComplexOptions<MMap> Optional options object.
Inherited from

GenericComplexEntity.constructor

new MMapComplexEntity<Props, DefaultProps>(props, children?, options?)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Parameters
Name Type
props Props
children? GenericEntity<unknown, {}, MMap>[]
options? Omit<ComplexOptions<MMap>, "children">
Inherited from

GenericComplexEntity.constructor

Accessors

parent

get parent(): null | MMapComplexEntity<unknown, {}>

Get parent entity.

Returns

null | MMapComplexEntity<unknown, {}>

Implementation of

MMapEntity.parent

Overrides

GenericComplexEntity.parent

root

get root(): null | MMap

Get root entity.

Returns

null | MMap

Implementation of

MMapEntity.root

Overrides

GenericComplexEntity.root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Implementation of

MMapEntity.update

Inherited from

GenericComplexEntity.update

Class: MMapEntity<Props, DefaultProps>

Entity Base Class. It has event handlers for attaching, detaching and updating props. Has a method for providing and using context.

Example

type MMapSomeEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeEntity extends MMapEntity<MMapSomeEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 public isAttached: boolean;
 constructor(props: MMapSomeEntityProps) {
     super(props);
     this.isAttached = false
     // Additional actions can be taken in the constructor of a class.
 }
 protected _onAttach(): void {
     this.isAttached = true;
     // Additional actions can be taken when an Entity is attached.
 }
 // ...
}

Type parameters

Name Type Description
Props Props Type of input props of the Entity.
DefaultProps extends Object = {} Type of default input props of the Entity.

Implemented by

Constructors

constructor

new MMapEntity<Props, DefaultProps>(props)

Type parameters
Name Type
Props Props
DefaultProps extends Object = {}
Parameters
Name Type Description
props Props The value of input props.
Inherited from

GenericEntity.constructor

Accessors

parent

get parent(): null | MMapComplexEntity<unknown, {}>

Get parent entity.

Returns

null | MMapComplexEntity<unknown, {}>

Overrides

GenericEntity.parent

root

get root(): null | MMap

Get root entity.

Returns

null | MMap

Overrides

GenericEntity.root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<Props> New props values.
Returns

void

Inherited from

GenericEntity.update

Class: MMapRulerCommon

Entity that aggregates multiple Entities but looks basic from the outside.

Type Param

Root Entity Class.

Example

type MMapSomeComplexEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeComplexEntity extends MMapComplexEntity<MMapSomeComplexEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 private _someEntity?: MMapSomeEntity; // MMapSomeEntity extends GenericEntity
 protected _onAttach(): void {
     this._someEntity = new MMapSomeEntity();
     this.addChild(this._someEntity); // add someEntity as children
     // ...
 }
 // ...
}

Constructors

constructor

new MMapRulerCommon(props)

Parameters
Name Type
props MMapRulerCommonProps
Overrides

MMapComplexEntity.constructor

Properties

defaultProps

static defaultProps: Readonly<{
	editable: true;
	source: "mappable-ruler";
	zIndex: 2600 
}>

Accessors

parent

get parent(): null | MMapComplexEntity<unknown, {}>

Get parent entity.

Returns

null | MMapComplexEntity<unknown, {}>

Inherited from

MMapComplexEntity.parent

root

get root(): null | MMap

Get root entity.

Returns

null | MMap

Inherited from

MMapComplexEntity.root

Methods

update

update(changedProps): void

Method for updating props of Entity.

Parameters
Name Type Description
changedProps Partial<MMapRulerCommonProps> New props values.
Returns

void

Inherited from

MMapComplexEntity.update

Interface: Apikeys

All possible apikeys for http-services.

Properties

router

optional router: string
optional search: string

suggest

optional suggest: string

Interface: ComplexOptions<Root>

Type parameters

Name Type
Root extends GenericRootEntity<unknown> = GenericRootEntity<unknown>

Properties

children

optional children: GenericEntity<unknown, {}, Root>[]

container

optional container: boolean

Interface: DrawingStyle

Properties

cursor

optional cursor: string

element

optional element: HTMLElement

fill

optional fill: string

fillOpacity

optional fillOpacity: number

fillRule

optional fillRule: FillRule

icon

optional icon: DrawingStyleIcon

interactive

optional interactive: boolean

simplificationRate

optional simplificationRate: number

stroke

optional stroke: Stroke

zIndex

optional zIndex: number

Interface: DrawingStyleIcon

Properties

offset

optional readonly offset: [number, number]

scale

optional readonly scale: number

url

readonly url: string

Interface: GenericProjection<TSource>

Type parameters

Name
TSource

Properties

type

optional readonly type: string

Projection identity type. It may be:

  • EPSG-code (e.g. EPSG:3857)
  • any other string to identify (e.g. 'cartesian')

Methods

fromWorldCoordinates

fromWorldCoordinates(coordinates): TSource

Parameters
Name Type
coordinates WorldCoordinates
Returns

TSource

toWorldCoordinates

toWorldCoordinates(point): WorldCoordinates

Parameters
Name Type
point TSource
Returns

WorldCoordinates

Interface: PaletteEntry

Properties

color

color: string

count

count: number

Interface: PixelCoordinates

Global pixel coordinates. World size depends on zoom.
Left top is (0; 0).
Right bottom is (2**(zoom + 8); 2**(zoom + 8)).

Properties

type

optional readonly type: "pixel"

x

x: number
Inherited from

Vec2.x

y

y: number
Inherited from

Vec2.y

Interface: ReactParent

Properties

entityRef

entityRef: RefInstance<GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>>

Methods

positionChild

positionChild(entity): number

Parameters
Name Type
entity RefInstance<GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>>
Returns

number

requestReposition

requestReposition(): void

Returns

void

Interface: StrokeStyle

Properties

color

optional color: string

dash

optional dash: number[]

opacity

optional opacity: number

palette

optional palette: Palette

simplifyPalette

optional simplifyPalette: boolean

width

optional width: number

Interface: TiltRange

Properties

expansion

readonly expansion: number

Behavior tilt expansion in radians. E.g. you can tilt map with fingers a little bit more than max.

max

readonly max: number

Maximum tilt in radians.

min

readonly min: number

Minimum tilt in radians.

Interface: Vec2

Properties

x

x: number

y

y: number

Interface: VuefyModuleFn

Callable

VuefyModuleFn

VuefyModuleFn<TModule>(module, props?): VuefiedModule<TModule>

Type parameters
Name Type
TModule extends BaseModule = BaseModule
Parameters
Name Type
module TModule
props? VuefyPropsModule<TModule>
Returns

VuefiedModule<TModule>

Interface: WorldCoordinates

Coordinates in [-1 ... +1].
Left bottom is (-1; -1).
Right top is (+1; +1).
Center is (0; 0).

Properties

type

optional readonly type: "world"

x

x: number
Inherited from

Vec2.x

y

y: number
Inherited from

Vec2.y

z

optional z: number

Interface: WorldOptions

Properties

cycledX

readonly cycledX: boolean

Interface: ZoomRange

Properties

max

max: number

min

min: number

Type Aliases

MMapRulerProps

MMapRulerProps: Omit<MMapRulerCommonProps, "point"> & {
	point: (`params`: RenderPointArgs) => MMapEntity<RenderPointArgs> 
}

MMapRulerReactifiedProps

MMapRulerReactifiedProps: Prettify<OverrideProps<MMapRulerCommonProps, {
	point: (`params`: RenderPointCommonArgs) => TReact.ReactElement;
	previewPoint: TReact.ReactElement 
}>>

Measurements

Measurements: RulerMeasurements | PlanimeterMeasurements

RenderPointArgs

RenderPointArgs: RenderPointCommonArgs

RulerCommonState

RulerCommonState: Object
Type declaration
Name Type
measurements CommonMeasurements
points LngLat[]

RulerGeometry

RulerGeometry: Object
Type declaration
Name Type
style DrawingStyle

RulerPointState

RulerPointState: Object
Type declaration
Name Type
coordinates LngLat
editable boolean
index number
measurements Measurements
source string
totalCount number

RulerType

RulerType: typeof TYPE_RULER | typeof TYPE_PLANIMETER

Module: <internal>

Type Aliases

BaseModule

BaseModule: Record<string | symbol, unknown>

BehaviorType

BehaviorType: "drag" | "pinchZoom" | "scrollZoom" | "dblClick" | "magnifier" | "oneFingerZoom" | "mouseRotate" | "mouseTilt" | "pinchRotate" | "panTilt"

CommonMeasurements

CommonMeasurements: Omit<RulerMeasurements, "distance" | "segmentDistance"> | PlanimeterMeasurements

ContextWatcherFn

ContextWatcherFn: () => void
Type declaration

(): void

Returns

void

CustomReactify

CustomReactify<TEntity,
 TResult\>: (`ctor`: EntityConstructor<TEntity>, `params`: {
	React: typeof TReact;
	ReactDOM: typeof TReactDOM;
	ReactParent: typeof ReactParent;
	reactify: {
		context: <TContext>(`context?`: TContext) => TReact.Context<unknown>;
		module: ReactifyModule;
		entity: <T>(...`args`: [ctor: T, displayName?: string]) => T extends Overrided<T, TResult> ? TResult : ForwardRefExoticComponent<PropsWithoutRef<PropsWithChildren<EntityProps<InstanceType<T>>>> & RefAttributes<undefined | InstanceType<T>>> 
	} 
}) => TResult
Type parameters
Name Type
TEntity extends GenericEntity<unknown>
TResult TResult
Type declaration

(ctor, params): TResult

Parameters
Name Type
ctor EntityConstructor<TEntity>
params Object
params.React typeof TReact
params.ReactDOM typeof TReactDOM
params.ReactParent typeof ReactParent
params.reactify Object
params.reactify.context <TContext>(context?: TContext) => TReact.Context<unknown>
params.reactify.module ReactifyModule
params.reactify.entity <T>(...args: [ctor: T, displayName?: string]) => T extends Overrided<T, TResult> ? TResult : ForwardRefExoticComponent<PropsWithoutRef<PropsWithChildren<EntityProps<InstanceType<T>>>> & RefAttributes<undefined | InstanceType<T>>>
Returns

TResult

CustomVuefyFn

CustomVuefyFn<TEntity,
 TExternalProps\>: (`ctor`: EntityConstructor<TEntity>, `props`: VuefyPropsObject<TExternalProps>, `params`: {
	Vue: typeof TVue;
	vuefy: {
		context: VuefyContextFn;
		entity: VuefyEntityFn;
		module: VuefyModuleFn 
	} 
}) => TVue.Component<TExternalProps>
Type parameters
Name Type
TEntity extends DefaultEntity
TExternalProps EntityProps<TEntity>
Type declaration

(ctor, props, params): TVue.Component<TExternalProps>

Parameters
Name Type
ctor EntityConstructor<TEntity>
props VuefyPropsObject<TExternalProps>
params Object
params.Vue typeof TVue
params.vuefy Object
params.vuefy.context VuefyContextFn
params.vuefy.entity VuefyEntityFn
params.vuefy.module VuefyModuleFn
Returns

TVue.Component<TExternalProps>

CustomVuefyOptions

CustomVuefyOptions<TEntity,
 TExternalProps\>: Object
Type parameters
Name Type
TEntity extends DefaultEntity
TExternalProps EntityProps<TEntity>
Type declaration
Name Type
props VuefyPropsObject<TExternalProps> | VuefyPropsArray<TExternalProps>

DefaultContext

DefaultContext: Context<unknown>

DefaultCtor

DefaultCtor: EntityConstructor<DefaultEntity>

DefaultEntity

DefaultEntity: GenericEntity<unknown>

DefaultProps

DefaultProps: typeof defaultProps

EasingBezierPreset

EasingBezierPreset: Object
Type declaration
Name Type
p1 Vec2
p2 Vec2

EasingFunction

EasingFunction: (`x`: number) => number
Type declaration

(x): number

Parameters
Name Type
x number
Returns

number

EasingFunctionDescription

EasingFunctionDescription: EasingPresetName | EasingBezierPreset | EasingFunction

EasingPresetName

EasingPresetName: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out"

EntityConstructor

EntityConstructor<TEntity\>: (...`args`: any[]) => TEntity
Type parameters
Name Type
TEntity extends GenericEntity<unknown>
Type declaration

(...args)

Parameters
Name Type
...args any[]

EntityProps

EntityProps<T\>: T extends GenericEntity<infer P> ? P : never
Type parameters
Name Type
T extends GenericEntity<unknown>

FillRule

FillRule: "evenodd" | "nonzero"

GenericBounds

GenericBounds<T\>: [T, T]

Generic for rectangle bounded by bottom-left and top-right coordinates

Type parameters
Name
T

LngLat

LngLat: [lon: number, lat: number, alt?: number]

Tuple with geodesic coordinates in longitude latitude order.
GeoJSON also uses this order https://tools.ietf.org/html/rfc7946#appendix-A.1

LngLatBounds

LngLatBounds: GenericBounds<LngLat>

Rectangle bounded by top-left and bottom-right coordinates

MMapBoundsLocation

MMapBoundsLocation: Object

Calculate the center and zoom by specifying the coordinates of the top left and bottom right corners of the map.
In this case, the center of the map will be in the center of the rectangle described at the given coordinates.
If the map have an aspect ratio different from this rectangle, the rectangle will be inscribed in height and the map will be centered in width.

map.update({
    location: {bounds: [[-0.118092, 51.509865], [-0.118092, 51.509865]]}
});
Type declaration
Name Type
bounds LngLatBounds

MMapCamera

MMapCamera: Object

Observer camera position

Type declaration
Name Type Description
azimuth? number Map rotation in radians. Can take values from -Math.PI to Math.PI
tilt? number Map tilt in radians. Can take values from 0 to 50 degrees (degrees * (Math.PI / 180))

MMapCameraRequest

MMapCameraRequest: MMapCamera & {
	duration?: number;
	easing?: EasingFunctionDescription 
}

Describes how to change current camera position. Change can be instantaneous or animated if duration property is set.

map.update({camera: {
     tilt: 45 * (Math.PI / 180), // 45 degrees
     azimuth: 30 * (Math.PI / 180) // 30 degrees
     duration: 200, // Animation of moving camera will take 200 milliseconds
     easing: 'ease-in-out'
 }});

MMapCenterLocation

MMapCenterLocation: Object

Sets map center. In this case, the zoom of the map remains unchanged.

map.update({
  location: {center: [-0.118092, 51.509865]}
});
Type declaration
Name Type
center LngLat

MMapCenterZoomLocation

MMapCenterZoomLocation: MMapCenterLocation & MMapZoomLocation

Sets map center and zoom. Combination of MMapCenterLocation and MMapZoomLocation

map.update({
 location: {center: [-0.118092, 51.509865], zoom: 10}
});

MMapCopyrightsPosition

MMapCopyrightsPosition: "top left" | "top right" | "bottom left" | "bottom right"

Copyrights position on the map container. By default, 'bottom right'.
For example, 'top left' or 'bottom right'

const map = new mappable.MMap(document.getElementById('map-root'), {
 copyrightsPosition: 'top left'
});

MMapLocationRequest

MMapLocationRequest: MMapBoundsLocation | MMapCenterLocation | MMapZoomLocation | MMapCenterZoomLocation & {
	duration?: number;
	easing?: EasingFunctionDescription 
}

Describes how to change current map location. Change can be instantaneous or animated if duration property is set.

map.update({
 location: {
     center: [-0.118092, 51.509865], // Center of the map
     zoom: 10, // Zoom level
     duration: 200, // Animation of moving map will take 200 milliseconds
     easing: 'ease-in-out' // Animation easing function
 }
});

or just change center of the map

map.update({
 location: {
    center: [-0.118092, 51.509865], // Center of the map
    duration: 200, // Animation of moving map will take 200 milliseconds
    easing: 'linear' // Animation easing function
 }
})';

MMapMarkerEventHandler

MMapMarkerEventHandler: (`coordinates`: LngLat) => void | false
Type declaration

(coordinates): void | false

MMapMarker events handler

Parameters
Name Type
coordinates LngLat
Returns

void | false

MMapProps

MMapProps: Object

Map settings. Allow to set map mode, behaviors, margin, zoom rounding, zoom range, restrict map area, theme and other settings.

const map = new MMap(document.getElementById('map-root'), {
   className: 'custom-map',
   location: {center: [-0.118092, 51.509865], zoom: 10},
   camera: {tilt: 45 * (Math.PI / 180), azimuth: 30 * (Math.PI / 180)}
   mode: 'raster',
   behaviors: ['drag', 'scrollZoom', 'dblClick', 'mouseRotate', 'mouseTilt'],
   margin: [0, 100, 0, 0],
   theme: 'light'
});

But required only location prop.

const map = new MMap(document.getElementById('map-root'), {
  location: {center: [-0.118092, 51.509865], zoom: 10}
});
Type declaration
Name Type Description
behaviors? BehaviorType[] Active behaviors
camera? MMapCameraRequest Initial camera or request to change camera with duration
className? string Map container css class name
config? Config Other configs
copyrightsPosition? MMapCopyrightsPosition Position of copyright on the page. Default is 'bottom right'
hotspotsStrategy? "forViewport" | "forPointerPosition" Strategy for fetching hotspots, for whole viewport or for tiles that pointer is hovering at
location MMapLocationRequest Initial location or request to change location with duration
margin? Margin Map margins
mode? MapMode Map mode, 'auto' (default. Show raster tiles while vector tiles are loading), 'raster' or 'vector' (without raster preloading).
projection? Projection Projection used in map
restrictMapArea? LngLatBounds | false Sets the map view area so that the user cannot move outside of this area.
showScaleInCopyrights? boolean Show the map scale next to copyright
theme? MMapTheme Theme applied to the scheme
worldOptions? WorldOptions Whether to repeat the world in X and Y
zoomRange? ZoomRange Restrict min and max map zoom
zoomRounding? ZoomRounding Set rounding for zoom. If auto is selected, zoom will be snap for raster and smooth for vector MapMode. Default is auto.
zoomStrategy? ZoomStrategy Zoom strategy describes if map center is bound to the zoom point or not

MMapRulerCommonProps

MMapRulerCommonProps: Object
Type declaration
Name Type
editable? boolean
geometry RulerGeometry
onUpdate? UpdateCommonFn
onUpdateEnd? UpdateEndFn
onUpdateStart? UpdateStartFn
point RenderPointCommon
points LngLat[]
previewPoint HTMLElement
source? string
type RulerType
zIndex? number

MMapTheme

MMapTheme: "light" | "dark"

Map theme. Affects the colors of the map controls and background.

const map = new mappable.MMap({
   location: {center: [55.751574, 37.573856], zoom: 9},
   theme: 'dark'
});

MMapZoomLocation

MMapZoomLocation: Object

Sets map zoom. In this case, the center of the map remains unchanged.

map.update({
   location: {zoom: 10}
});
Type declaration
Name Type
zoom number

MapMode

MapMode: "raster" | "vector" | "auto"

Margin

Margin: [number, number, number, number]

Map margins in pixels. Order is top, right, bottom, left.

OverrideProps

OverrideProps<T,
 U\>: Pick<T, Exclude<keyof T, keyof U>> & U
Type parameters
Name
T
U

Overrided

Overrided<TCtor,
 TReactResult\>: Object
Type parameters
Name Type
TCtor extends EntityConstructor<GenericEntity<unknown>>
TReactResult TReactResult
Type declaration
Name Type
[overrideKeyReactify] CustomReactify<InstanceType<TCtor>, TReactResult>

Palette

Palette: PaletteEntry[]

PlanimeterMeasurements

PlanimeterMeasurements: Object
Type declaration
Name Type Description
area number the area of the closed line shape in square meters
type typeof TYPE_PLANIMETER -

Prettify

Prettify<T\>: { [K in keyof T]: T[K] } & {}
Type parameters
Name
T

Projection

Projection: GenericProjection<LngLat>

PropsFromCtor

PropsFromCtor<TCtor\>: EntityProps<InstanceType<TCtor>>
Type parameters
Name Type
TCtor extends DefaultCtor

RefInstance

RefInstance<TEntity\>: React.MutableRefObject<TEntity | undefined>
Type parameters
Name Type
TEntity extends GenericEntity<unknown>

RenderPointCommon

RenderPointCommon: (`params`: RenderPointCommonArgs) => RenderPointCommonResult
Type declaration

(params): RenderPointCommonResult

Parameters
Name Type
params RenderPointCommonArgs
Returns

RenderPointCommonResult

RenderPointCommonArgs

RenderPointCommonArgs: Object
Type declaration
Name Type
onDelete () => void
onDragEnd MMapMarkerEventHandler
onDragMove MMapMarkerEventHandler
onDragStart MMapMarkerEventHandler
state RulerPointState

RenderPointCommonResult

RenderPointCommonResult: Object
Type declaration
Name Type
remove (index: number) => void
update (state: RulerPointState) => void

RulerMeasurements

RulerMeasurements: Object
Type declaration
Name Type Description
distance number the distance in meters from the first point of the line
segmentDistance number the distance in meters from the previous point of the line
totalDistance number the total distance of the line in meters
type typeof TYPE_RULER -

Stroke

Stroke: StrokeStyle[]

UpdateCommonFn

UpdateCommonFn: (`commonState`: RulerCommonState) => void
Type declaration

(commonState): void

Parameters
Name Type
commonState RulerCommonState
Returns

void

UpdateEndFn

UpdateEndFn: (`commonState`: {}) => void
Type declaration

(commonState): void

Parameters
Name Type
commonState Object
Returns

void

UpdateStartFn

UpdateStartFn: (`commonState`: {}) => void
Type declaration

(commonState): void

Parameters
Name Type
commonState Object
Returns

void

VuefiedModule

VuefiedModule<TModule\>: { [Property in keyof TModule]: TModule[Property] extends DefaultCtor ? ReturnType<VuefyEntityFnGen<TModule[Property]\>\> : TModule[Property] extends typeof Context ? ReturnType<VuefyContextFn\> : TModule[Property] }
Type parameters
Name Type
TModule extends BaseModule

VuefyContextFn

VuefyContextFn: <TContext>(`context?`: TContext) => symbol
Type declaration

<TContext>(context?): symbol

Type parameters
Name Type
TContext extends DefaultContext
Parameters
Name Type
context? TContext
Returns

symbol

VuefyEntityFn

VuefyEntityFn: <TCtor, TProps>(...`args`: Parameters<VuefyEntityFnGen<TCtor, TProps>>) => ReturnType<VuefyEntityFnGen<TCtor, TProps>>
Type declaration

<TCtor, TProps>(...args): ReturnType<VuefyEntityFnGen<TCtor, TProps>>

Type parameters
Name Type
TCtor extends DefaultCtor
TProps PropsFromCtor<TCtor>
Parameters
Name Type
...args Parameters<VuefyEntityFnGen<TCtor, TProps>>
Returns

ReturnType<VuefyEntityFnGen<TCtor, TProps>>

VuefyEntityFnGen

VuefyEntityFnGen<TCtor,
 TProps\>: (`ctor`: TCtor, `props?`: VuefyPropsObject<TProps> | VuefyPropsArray<TProps>, `displayName?`: string) => TVue.Component<TProps>
Type parameters
Name Type
TCtor extends DefaultCtor
TProps PropsFromCtor<TCtor>
Type declaration

(ctor, props?, displayName?): TVue.Component<TProps>

Parameters
Name Type
ctor TCtor
props? VuefyPropsObject<TProps> | VuefyPropsArray<TProps>
displayName? string
Returns

TVue.Component<TProps>

VuefyPropsArray

VuefyPropsArray<RawProps\>: keyof RawProps[]
Type parameters
Name
RawProps

VuefyPropsModule

VuefyPropsModule<TModule\>: { [Key in keyof TModule]: TModule[Key] extends GenericEntity<infer Props\> ? VuefyPropsObject<Props\> \| VuefyPropsArray<Props\> : unknown }
Type parameters
Name Type
TModule extends BaseModule

VuefyPropsObject

VuefyPropsObject<RawProps\>: { [K in keyof RawProps]-?: TVue.PropType<RawProps[K]\> \| TVue.Prop<RawProps[K]\> }
Type parameters
Name
RawProps

WithDefaults

WithDefaults<Props,
 DefaultProps\>: Props & { [K in keyof DefaultProps]: K extends keyof Props ? NonNullable<Props[K]\> : never }
Type parameters
Name Type
Props Props
DefaultProps extends Partial<Props>

ZoomRounding

ZoomRounding: "snap" | "smooth" | "auto"

Set rounding for zoom.
If auto is selected, zoom will be snap for raster and smooth for vector MapMode.
Default is auto.

ZoomStrategy

ZoomStrategy: "zoomToCenter" | "zoomToPointer"

Variables

ReactParent

ReactParent: React.Context<[ReactParent] | undefined>

ReactParent

ReactParent: Context<undefined | [ReactParent]>

TYPE_PLANIMETER

const TYPE\_PLANIMETER: "planimeter"

TYPE_RULER

const TYPE\_RULER: "ruler"

defaultProps

const defaultProps: Readonly<{}>

defaultProps

const defaultProps: Readonly<{
	editable: true;
	source: "mappable-ruler";
	zIndex: 2600 
}>

defaultProps

const defaultProps: Readonly<{
	behaviors: string[];
	camera: {
		azimuth: number;
		tilt: number 
	};
	className: "";
	config: Config;
	copyrights: true;
	copyrightsPosition: "bottom right";
	hotspotsStrategy: "forViewport" | "forPointerPosition";
	margin: Margin | undefined;
	mode: "auto";
	projection: Projection;
	restrictMapArea: false;
	showScaleInCopyrights: false;
	theme: "light";
	worldOptions: {
		cycledX: boolean;
		cycledY: boolean 
	};
	zoomRange: ZoomRange;
	zoomRounding: "auto";
	zoomStrategy: "zoomToPointer" 
}>
In this article: