JSFiddle - React, Tailwind, and code Playground

by RDmitriev

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="/yapi/init.js" type="text/javascript"></script>

<style>
#map {
    min-height: 622px;
}
</style>

<div id="map"></div>

JavaScript

ymaps.ready(function () {
	var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64], // Москва
        zoom: 10,
		controls: []
    }, {
        searchControlProvider: 'yandex#search'
    });
	
	var customItemContentLayout = ymaps.templateLayoutFactory.createClass(
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
    );
	
	var objectManager = new ymaps.ObjectManager(
	{
		clusterize: true,
		gridSize: 32,
		
		clusterDisableClickZoom: true,
		clusterOpenBalloonOnClick: true,
		clusterBalloonPanelMaxMapArea: 0,
		clusterBalloonMaxHeight: 200,
		clusterballoonContentLayout: ymaps.templateLayoutFactory.createClass('asdasdasd')
	});
	
	objectManager.objects.options.set({
		iconLayout: 'default#image',
		iconImageHref: 'http://mynotary.ru/local/yapi/img/icon.png',
		iconImageSize: [55, 55],
		iconImageOffset: [-3, -42]
	});
	
	objectManager.objects.options.set('preset', 'islands#greenDotIcon');
	objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
	myMap.geoObjects.add(objectManager);
	
	
	objectManager.add('{ "type": "FeatureCollection", "features": [ {"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.746593417733,37.536248211638]}, "properties": {"balloonContent": "testЮлия", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}}, {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.747221197249,37.679288997649]}, "properties": {"balloonContent": "testТест", "clusterCaption": "Еще одна метка", "hintContent": "Текст подсказки"}} ] }');
	
	/*$.ajax({
		url: "/local/yapi/api/selectAll.php"
	}).done(function(data) {
		//alert(data);
		objectManager.add(data);
	});*/
});