JS API packages

JS API packages provide additional features not included in the core API and modules.

Connecting packagesConnecting packages

For example, you can connect a package with default controls in different ways:

Via a package managerVia a package manager

Install the package to your project:

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

Then import it in 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 a CDNVia a CDN

As an example, let's use jsdelivr as a CDN.

The JS API has a ready-made solution for importing packages from a CDN.
First, register the CDN in the JS API using mappable.import.registerCdn.
This function takes two arguments:

1. The CDN's URL mask is specified as the first argument. For example, in the mask 'https://cdn.jsdelivr.net/npm/{package}', {package} is replaced by the package name.
2. The second argument is the name or list of names of packages to be loaded from the CDN.

Then you can import components from the package into the project using mappable.import.

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

// after that, import 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