---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/multiroute_custom_balloon_layout.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/multiroute_custom_balloon_layout.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/en/llms.txt
# Custom layout for the multiroute balloon
Open in CodeSandbox
Object layouts can be created using the templateLayoutFactory factory and
text templates.
This example creates a custom multiroute balloon layout that displays information about the selected route:
each type of transport shows the route, the length of the route, and the travel time.
The balloon layout is set via the multirouter option.
{% list tabs %}
- index.html
```html
Examples. Custom layout for the multiroute balloon
```
- multiroute_custom_balloon_layout.js
```js
function init() {
var myMap = new ymaps.Map("map", {
center: [55.752625, 37.5981],
zoom: 14,
controls: [],
}),
/**
* Creating your own layout using the layout factory.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/templateLayoutFactory.xml
*/
balloonLayout = ymaps.templateLayoutFactory.createClass(
"" +
"Route {% if properties.type == 'driving' %}" +
"Driving
" +
"{% else %}" +
"Public transit" +
"{% endif %}
" +
"Distance: " +
"{{ properties.distance.text }},
" +
"Travel time: " +
"{{ properties.duration.text }} (without traffic) ." +
"
"
),
/**
* Creating a multiroute.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
*/
multiRoute = new ymaps.multiRouter.MultiRoute(
{
referencePoints: [
"Arbatskaya metro station",
"Smolenskaya metro station",
],
params: {
/**
* avoidTrafficJams: true,
* routingMode: 'masstransit'
*/
},
},
{
/**
* Geo object layout.
* @see https://api.yandex.com/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml#param-options
*/
balloonLayout: balloonLayout,
// Disabling the panel mode for the balloon.
balloonPanelMaxMapArea: 0,
}
);
myMap.geoObjects.add(multiRoute);
}
ymaps.ready(init);
```
{% endlist %}