MMapTileDataSource

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 and y are tile coordinates;
      // z is zoom;
      // scale is scaling for different DevicePixelRatio's.
      fetchTile: 'https://sitename.com/?x=x&y=y&z=z&scale=scale'
    }
  })
);

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
    }
  })
);

const {MMap, MMapTileDataSource, MMapLayer} = mappable;

// Initialize the map
const map = new MMap({...});

// Initialize the data source
const tileDataSource = new MMapTileDataSource({
  id: 'someSource',
  raster: {
    type: 'someType',
    fetchTile: 'https://sitename.com/?x=x&y=y&z=z&scale=scale'
  }
});

// Add the data source to the map
map.addChild(tileDataSource);

// Create a layer with the obtained data
const layer = new MMapLayer({
  zIndex: 1,
  source: 'someSource',
  type: 'someType'
});

// Add this layer to the map
map.addChild(layer);