---
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/en/llms.txt
# Creating your own module
Open in CodeSandbox
The Yandex.Maps API consists of a large number of interrelated modules.
By default, when the API is enabled, it loads a standard set of modules (package.full), which includes everything needed for working with the API.
A developer who uses the Yandex.Maps API can create custom modules.
In this example, we create a custom control with its own custom layout.
Both the control and the layout are designed as separate modules.
You can define your own module using the define
method
After creating the map, a request is made to get the custom module using require
For more information about modules, see the section Modules.
{% list tabs %}
- index.html
```html
An example of loading only necessary modules
```
- custom_module.js
```js
// Creating our first custom module - a layout for our control.
ymaps.modules.define(
"plugin.PlacemarkCounterControlLayout",
[
/**
* The list of module dependencies.
* These modules will be loaded (if they have not yet been loaded) before calling the function that defines the module.
*/
"templateLayoutFactory",
],
function (provide, templateLayoutFactory) {
/**
* The function that defines the module itself.
* The first argument is the provide function. The provide function must be passed directly to the module.
* The provide function call may be delayed. For example, in order to load some data.
* Subsequent arguments are requested in the module dependencies.
*/
provide(
templateLayoutFactory.createClass(
"{{ data.placemark_count }}
"
)
);
}
);
/**
* Creating a second custom module.
* This module provides its own control, which is based on the buttons.
*/
ymaps.modules.define(
"plugin.PlacemarkCounterControl",
[
"control.Button",
"util.extend",
"util.augment",
// The second module in the dependencies requests the first one.
"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,
},
});
};
// Inheriting all the methods of a standard button.
augment(CounterControl, Button, {
// Overriding the setParent method.
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);
}
);
// Map initialization.
ymaps.ready(function () {
var myMap = new ymaps.Map("map", {
center: [55.734046, 37.588628],
zoom: 7,
controls: [],
});
// Requesting our custom control in the module system.
ymaps.modules
.require(["plugin.PlacemarkCounterControl"])
.spread(function (PlacemarkCounterControl) {
// Creating an instance of your custom button and adding it to the map.
myMap.controls.add(new PlacemarkCounterControl());
});
// Creating a button that we use for adding placemarks to the map.
var addPlacemarkButton = new ymaps.control.Button({
data: { content: "Add a placemark" },
options: { maxWidth: 200, float: "right", selectOnClick: false },
});
myMap.controls.add(addPlacemarkButton);
// Adding a placemark by clicking randomly.
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 %}