JavaScript API

Objects on the map

In the Javascript API, you can add various objects to the map:

  • Data sources.
  • Layers.
  • Geo objects.
  • Markers.

Data sources

The Javascript API distinguishes the following data sources:

  • Tile source.
  • Source for geo objects.

Tile data source

This source is the MMapTileDataSource class. The class's main task is storing data about where to load the tiles from and how to render them.

The lass is mostly used to display tiles by the link:

const map = new MMap(element, {
  location: {center: [25.229762, 55.289311], zoom: 14},
  mode: 'vector'
});

map.addChild(
  new MMapTileDataSource({
    id: 'urlSource',
    raster: {
      type: 'tiles',
      // x, y — tile coordinates;
      // z — zoom;
      // scale — scale for various DevicePixelRatio.
      fetchTile: 'https://sitename.com/?x={{x}}&y={{y}}&z={{z}}&scale={{scale}}'
    }
  })
);

As an extended option, you can use an asynchronous function that returns HTMLImageElement or HTMLCanvasElement as the raster.fetchTile parameter:

const tileSize = 256;

async function fetchTile(tileX, tileY, tileZ) {
  const canvas = document.createElement('canvas');
  canvas.width = tileSize;
  canvas.height = tileSize;
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = '#000000';
  ctx.fillText(`${tileX}:${tileY}:${tileZ}`, 10, 10);

  return {image: canvas};
}

map.addChild(
  new MMapTileDataSource({
    id: 'tileGeneratorSource',
    raster: {
      type: 'tiles',
      fetchTile: fetchTile,
      fetchHotspots: fetchHotspots,
      transparent: true,
      size: tileSize
    }
  })
);

Data source for geo objects

The MMapFeatureDataSource class serves as the data source for geo objects.

Example of creating the class:

map.addChild(
  new MMapFeatureDataSource({
    id: 'featureSource'
  })
);

Layers

Can be metaphorically described as a puff pastry. Each MMapLayer instance can be displayed above or below another instance that belongs to the same class.

You can set the order in which the layers are displayed by the order in which you add the layers to the map or using the zIndex parameter (by default, the value specified in MMapLayer.defaultProps.zIndex is used).

Alert

Each layer displays data from a specific data source, so be sure to add sources to the map before adding layers.

Examples:

map.addChild(
  new MMapLayer({
    source: 'urlSource',
    type: 'tiles'
  })
);

map.addChild(
  new MMapLayer({
    source: 'tileGeneratorSource',
    type: 'tiles',
    zIndex: 2000,
    raster: {
      // Use this option to wait until all visible tiles load before displaying them.
      awaitAllTilesOnFirstDisplay: true,
      // This option sets the duration of the loaded tiles' display animation
      tileRevealDuration: 0
    }
  })
);

map.addChild(
  new MMapLayer({
    source: 'markerSource',
    type: 'markers',
    zIndex: 2020
  })
);

map.addChild(
  new MMapLayer({
    source: 'featureSource',
    type: 'features',
    zIndex: 2010
  })
);

The layers will be displayed as follows:

  1. urlSource
  2. tileGeneratorSource
  3. featureSource
  4. markerSource

For convenient usage, the following default layers are provided:

  • MMapDefaultSchemeLayer combines a tile data source and a set of layers to display the schematic map.
  • MMapDefaultFeaturesLayer combines a data source for geo objects and a layer for displaying it. It also adds a layer for displaying DOM elements.

Geo objects

There are two types of geo objects in the API: a polyline and a polygon.
Each object is described by geometry that is defined by type, coordinates, and display style. For example, you can set the color of a form or the thickness of a line.

Polyline

Type: LineString.

Usage example:

const lineStringFeature = new MMapFeature({
  id: 'line',
  source: 'featureSource',
  geometry: {
    type: 'LineString',
    coordinates: [
      [25.129762, 55.189311],
      [25.329762, 55.389311]
    ]
  },
  style: {
    stroke: [{width: 12, color: 'rgb(14, 194, 219)'}]
  }
});

map.addChild(lineStringFeature);

Polygon

Type: Polygon.

Usage example:

const polygonFeature = new MMapFeature({
  id: 'polygon',
  source: 'featureSource',
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [25.029762, 55.189311],
        [25.229762, 55.289311],
        [25.329762, 55.389311]
      ]
    ]
  },
  style: {
    stroke: [{width: 6, color: 'rgb(14, 194, 219)'}],
    fill: 'rgba(56, 56, 219, 0.5)'
  }
});

map.addChild(polygonFeature);

Markers

A marker is an HTML container linked to a point on the map. Use it to display a custom layout on the map.

Usage example:

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);
In this article: