JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&quot;"></script>
<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }

JavaScript

ymaps.ready(function () {
    const myMap = new ymaps.Map('map', {
      center: [55.751574, 37.573856],
      zoom: 9
    });
    const myPlacemark = new ymaps.Placemark(myMap.getCenter(), {}, {
      iconLayout: 'default#image',
      iconImageHref: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA1tJREFUeNrkm01LG1EUhk9CqdQEpNrEz42Iiou4UFyYYsEuUlq6Lf1z/Q2lhYIQSgsNNaDoooGWKiKFWD9CUwQj2IX2Pe25YUwTZ6yZmTtzDjyunDDvM8nMncs5CXrxkXyuMTAKhkAG9IM+kAI98j9noAGOQR3UwAHYA1U/T+6WD595G0yDKTABxkHS5Zg7wj05xtQ52AU7YAt8Bb9sFTAMZkEOTHbpM5MihCmAbVABn8C+LQJGwAKYB4M+/5wmhftgA6yD72EJ6AV5sCi/8yCLRT+Rb1wZrILTIAXMgAdgjsItFv9MfiIfwJcgBCyDhyBL9tScyHgH3vslIC03IiZB9hVfkOfgLiiCk24KGACPwRLZXXxhHsn9aQX88PKY8RL+aQTCO2tJznngpgLScuXzFL3Ky7mnbyKgELEr3+6bUPhfActuB0ekCpLlWgJm5FGXiIGAhGSZ8SqgVxY5WYpPZSVTrxcBeQtWeH4tlvJuAkZkbR/XWpSMHQUshPBiE/S7w0InAcPyShv3mpes/wiYDeB93oYalKyXBPA2Vo70VE4yNwVMU/e2saJQk5K5KWCK9NWUU8CEQgETRgA/GsYVCuDMYyxg1OO+QNzqT3b+M0R6a4gFZBQLyLCAfsUC+llAn2IBfSwgpVhAigX0KBbQkyTlxQLOFOc/YwENxQIaLOBYsYBjFlBXLKDOAmqKBdRYwIFiAQcsgFvRzhWG58x7LID78HYVCuDMVbMQ2lEoYMcshLi2FArYcgrgDsxtReG3JXNTALefVhQJqEjmS3uB3H56qCD8oWSlVgHce7uhQMAGOfqMW1+H18nn9vSQqyoZqZMAbjwux1hAmVqaq9ttiHDj8WYMw29KNnITwF3X3Hh8FKPwR5Lp1IsALu665sbjixiEv5AsbTvJr9oT5K7rYgwEFOmKDvKkh4NLEQ5fcruIbgK45Xyl3c0jArUq535yEwFc3HL+JmLfhJKcs2u7vNd5Af6gV3IXtXVgwtzwiuTDwIT5ObwEP8m+kRnzqPN1ZMb5dOB9RBuGppyLnMCGpsw64Rv93VUJY2zOubYPZWzOrBjfgs8U3OCk85U29MFJ5wvUa7BG3R+dbS0rR2ed+wn7co+47vB0p4rU8LQps71mttisHp//LcAA1eCw2sv8ur8AAAAASUVORK5CYII=',
      iconImageSize: [32, 32],
      iconImageOffset: [-8, -8]
    });
		const textPlacemark = new ymaps.Placemark(myMap.getCenter(), {}, {
      iconLayout: ymaps.templateLayoutFactory.createClass('<span style="color:#fff;font: 700 Arial/1">10</span>'),
    });
  	myMap.geoObjects.add(myPlacemark);
  	myMap.geoObjects.add(textPlacemark);
});