@yandex/ymaps3-default-ui-theme package

Yandex JS API package

How use

The package is located in the dist folder:

• dist/types TypeScript types
• dist/esm es6 modules for direct connection in your project
• dist/index.js Yandex JS Module

Recommended use @yandex/ymaps3-default-ui-theme as usual npm package:

npm install @yandex/ymaps3-default-ui-theme

and dynamic import

await ymaps3.ready;

// ...

const {YMapDefaultMarker} = await import('@yandex/ymaps3-default-ui-theme');

// ...

map.addChild(new YMapDefaultMarker(props));

Usage without npm

You can use CDN with module loading handler in JS API on your page.

By default ymaps3.import can load self modules. Just use ymaps3.registerCdn and ymaps3.import:

// register in `ymaps3.import` which CDN to take the package from
ymaps3.import.registerCdn(
  'https://cdn.jsdelivr.net/npm/{package}',
  '@yandex/ymaps3-default-ui-theme@latest'
);

// ...

// import package from CDN
const pkg = await ymaps3.import('@yandex/ymaps3-default-ui-theme');

Working with the package

This package contains a range of pre-designed user interface elements for your map. This guide will provide you with detailed instructions on how to incorporate these elements into your map and customize them to suit your specific requirements. Live examples of how they can be used, along with links to the relevant code, will also be provided.

Controls

This section presents all UI components that belong to the category of controls. These include simple zoom and tilt controls, as well as more advanced controls such as the search control.

Simple controls

This type of controls includes the following:

• YMapGeolocationControl – Display geolocation control on a map
• YMapZoomControl – Display zoom control on a map
• YMapRotateControl – Display rotate control on a map
• YMapTiltControl – Display tilt control on a map
• YMapRotateTiltControl – Display rotate and tilt in one control

The YMapZoomControl, YMapRotateControl, YMapTiltControl, YMapRotateTiltControl controls have the same props:

| Props name | Description | | ---------- | ----------------------------------------------------- | | easing | Easing function for map location animation (optional) | | duration | Map location animate duration (optional) |

The parameters for the YMapGeolocationControl are slightly different:

| Props name | Description | | ------------------- | ------------------------------------------ | | onGeolocatePosition | Geolocation request callback | | source | Data source id for geolocation placemark | | easing | Easing function for map location animation | | duration | Map location animate duration |

Rich controls

More comprehensive controls include the following classes::

• YMapSearchControl – adds a control to the map in the form of a search bar. It also has built-in suggest hints when entering the name of a place or organization.

YMapSearchControl has the following parameters:

| Props name | Description | | ------------ | ----------------------------------------------------------------------------------- | | search | A function that overrides the search function. By default, ymaps3.search is used. | | suggest | A function that overrides the hint function. By default, ymaps3.suggest is used | | searchResult | The callback that receives the search results. |

YMapSearchControl does not display markers on the map, it only returns coordinates and location parameters, the developer is responsible for displaying them on the map.

Markers and popups

Markers are UI components that are linked to a coordinate on the map. These components include the following classes:

• YMapDefaultMarker – a marker on the map. It can be of different sizes and contain an icon from a ready-made preset.
• YMapPopupMarker – a pop-up on the map with custom content. It may have a different position relative to the point it points to.

All markers have parameters from the YMapMarker base class. But there are also specific parameters for each type of marker.

For YMapDefaultMarker:

| Props name | Description | | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | iconName | The name of the icon from the ready-made icons preset | | color | The name of the color from the ready-made colors preset or an object indicating the color for the day and night mode | | size | The size of the marker. 3 sizes are available: normal, small, micro; | | title | The title to display in the marker hint | | subtitle | The subtitle to display in the marker hint | | staticHint | A flag to indicate that the hint is static or appears when the mouse hovers over the marker | | popup | The parameters for the embedded got into the marker |

For YMapPopupMarker:

| Props name | Description | | ---------- | ------------------------------------------------------------------------------- | | content | The function of creating popup content | | position | The position of the popup in relation to the point it is pointing to | | offset | The offset in pixels between the popup pointer and the point it is pointing to. | | show | Hide or show popup on map | | onClose | Popup closing callback | | onOpen | Popup opening callback |