---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/custom_module.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/custom_module.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Создание своего модуля
Open in CodeSandbox
API Яндекс.Карт состоит из большого количества взаимосвязанных модулей.
По умолчанию при подключении API происходит загрузка стандартного набора модулей (package.full), который включает в себя все необходимое для работы API.
Разработчик, который использует API Яндекс.Карт, имеет возможность создавать свои модули.
В данном примере создается собственный элемент управления со своим макетом.
И элемент управления, и макет оформлены в виде отдельных модулей.
Определение собственного модуля доступно при помощи метода define
После создания карты происходит запрос на получение своего модуля при помощи метода require
Подробнее о работе модулей смотрите в разделе Модули.
{% list tabs %}
- index.html
```html
Создание своего модуля
```
- custom_module.js
```js
// Создаем первый собственный модуль - макет своего контрола.
ymaps.modules.define(
"plugin.PlacemarkCounterControlLayout",
[
// Список зависимостей модуля.
// Эти модули будут загружены (если раньше не были) перед вызовом функции, которая определяет модуль.
"templateLayoutFactory",
],
function (provide, templateLayoutFactory) {
// Функция, которая определяет сам модуль.
// Первым аргументом идет provide-функция. В provide-функцию нужно будет передать непосредственно модуль.
// Вызов provide-функции может быть отложен во времени. К примеру, для загрузки каких-либо данных.
// Последующие аргументы - это запрошенные в зависимостях модули.
provide(
templateLayoutFactory.createClass(
"{{ data.placemark_count }}
"
)
);
}
);
// Создаем второй собственный модуль.
// Этот модуль предоставляет собственный элемент управления, который создается на основе кнопки.
ymaps.modules.define(
"plugin.PlacemarkCounterControl",
[
"control.Button",
"util.extend",
"util.augment",
// Второй модуль в зависимостях запрашивает первый.
"plugin.PlacemarkCounterControlLayout",
],
function (
provide,
Button,
extend,
augment,
PlacemarkCounterControlLayout
) {
var CounterControl = function () {
CounterControl.superclass.constructor.call(this, {
data: { placemark_count: 0 },
options: {
selectOnClick: false,
layout: PlacemarkCounterControlLayout,
maxWidth: 100,
},
});
};
// Наследуем все методы стандартной кнопки.
augment(CounterControl, Button, {
// Переопределяем метод setParent.
setParent: function (parent) {
CounterControl.superclass.setParent.call(this, parent);
if (parent) {
if (!this._mapEventListener) {
this._mapEventListener =
this.getMap().geoObjects.events.group();
this._mapEventListener.add(
["add", "remove"],
this._refresh,
this
);
}
this._refresh();
} else if (this._mapEventListener) {
this._mapEventListener.removeAll();
}
},
_refresh: function () {
this.data.set(
"placemark_count",
this.getMap().geoObjects.getLength()
);
},
});
provide(CounterControl);
}
);
// Инициализация карты.
ymaps.ready(function () {
var myMap = new ymaps.Map("map", {
center: [55.734046, 37.588628],
zoom: 7,
controls: [],
});
// Запрашиваем в модульной системе собственный контрол.
ymaps.modules
.require(["plugin.PlacemarkCounterControl"])
.spread(function (PlacemarkCounterControl) {
// Создаем экземпляр собственной кнопки и добавляем её на карту.
myMap.controls.add(new PlacemarkCounterControl());
});
// Создаем кнопку, при помощи которой добавляем метки на карту.
var addPlacemarkButton = new ymaps.control.Button({
data: { content: "Добавить метку" },
options: { maxWidth: 200, float: "right", selectOnClick: false },
});
myMap.controls.add(addPlacemarkButton);
// Добавление метки по клику в случайное место.
addPlacemarkButton.events.add("click", function () {
var center = myMap.getCenter();
center[0] += Math.random() * 2 - 1;
center[1] += Math.random() * 2 - 1;
myMap.geoObjects.add(new ymaps.Placemark(center));
});
});
```
{% endlist %}