JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&mode=debug"></script>
<div id=map></div>
CSS
html, body, #map {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}
#map {
width: 800px;
height: 600px;
}
.my-button {
background-color: white;
width: 150px;
height: 600px;
}
JavaScript
// Подробнее http://api.yandex.ru/maps/
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.650625, 37.62708],
zoom: 10,
controls: []
}),
// Макет кнопки должен отображать поле data.content
// и изменяться в зависимости от того, нажата кнопка или нет.
ButtonLayout = ymaps.templateLayoutFactory.createClass(
"<div class=my-button>" +
"{{data.content}}" +
"</div>"
),
button = new ymaps.control.Button({
data: {
content: "Жмак-жмак"
},
options: {
layout: ButtonLayout
}
});
myMap.controls
.add(button, { position: { left: 0, top: 0 } })
.add('zoomControl', { position: { left: 160, top: 50 } });
});