JSFiddle - React, Tailwind, and code Playground

by maximoff_pn

HTML

<title>Примеры. Создание иконки метки из собственного изображения</title>
    <script src="//api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>

<style type="text/css">
    #YMapsID {
        width: 550px;
        height: 400px;
    }
</style>

<body>
    <div id="YMapsID"></div>
</div>
</body>

JavaScript

ymaps.ready(init);
function init() {
	var myMap = new ymaps.Map('YMapsID', {
			center: [55.755773, 37.617761],
			zoom: 9
		}),
		myPlacemark = new ymaps.Placemark([55.684758, 37.738521], {
		balloonContent: "пример пипки2"            
		}, {
		iconLayout: 'default#image', //Свое изображение метки
		iconImageHref: 'http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png', //URL файла с меткой
		iconImageSize: [22, 31], //Размер изображения
		iconImageOffset: [-11, -31], //Смещение ножки
	    balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу
			}); 
    
    
    myPlacemark1 = new ymaps.Placemark([55.686758, 37.799521], {
		balloonContent: "пример пипки1"            
		}, {
			preset: 'islands#yellowCircleDotIcon',
			balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу
			});

			
		// Создаем коллекцию, в которую будем добавлять метки
			clusterer = new ymaps.Clusterer({
			gridSize: 64,
			clusterDisableClickZoom: false,
			zoomMargin: [80,20,80,80],
			preset:'islands#orangeClusterIcons'
			});
		//Добавляем метки в коллекцию геообъектов.
		clusterer
		.add(myPlacemark)
		.add(myPlacemark1);
    
    // Добавляем коллекцию геообъектов на карту.
		myMap.geoObjects.add(clusterer);
	
    clusterer.events
		.add('balloonopen', function (e) {
	var target = e.get('target');
	if (target.geometry && typeof target.getGeoObjects) {
	   target.options.set('preset', 'islands#nightCircleDotIcon');}        
})
   .add('balloonclose', function (e) {
	var target = e.get('target');
	if (target.geometry && typeof target.getGeoObjects) {
	   target.options.set('preset', 'islands#yellowCircleDotIcon');}     
}); 
}