JS API packages

JS API packages provide additional functionality to the JS API that is not included in the main API and modules.

Installing PackagesInstalling Packages

For example, a package with default UI components can be connected in different ways:

Via the package managerVia the package manager

Install the package in your project:

npm install @mappable-world/mappable-default-ui-theme

After that, import the code:

import {MMapDefaultMarker} from '@mappable-world/mappable-default-ui-theme';

map.addChild(
  new MMapDefaultMarker({
    coordinates: [34, 54],
    title: 'Hello World!',
    subtitle: 'kind and bright'
  })
);

Via CDNVia CDN

For example, we will use jsdelivr as a CDN.

The JS API has a ready-made mechanism for importing packages from CDNs.
First, the CDN needs to be registered in the JavaScript API using the mappable.import.registerCdn function.
This function takes two arguments:

1. The first argument is the URL mask for the CDN. For example, if the mask is 'https://cdn.jsdelivr.net/npm/{package}', the package name {package} will be substituted for the actual package name.
2. The second argument is a list of packages that need to be downloaded from the selected CDN.

After that, you can import components from the package into the project using mappable.import.

// Adding a loader for the package where we specify which CDN to download from
mappable.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
  '@mappable-world/mappable-default-ui-theme@<PACKAGE_VERSION_HERE>'
]);

// After that, we can import the components from the package into the project
const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
map.addChild(
  new MMapDefaultMarker({
    coordinates: [34, 54],
    title: 'Hello World!',
    subtitle: 'kind and bright'
  })
);

Available packagesAvailable packages