JSFiddle - React, Tailwind, and code Playground
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
});
ymaps.option.presetStorage.add('my#icon', {
iconLayout: 'default#image', //Свое изображение метки
iconImageHref: 'http://aps-shop.ru/UserFiles/Image/Geo_ico/label_orange.png', //URL файла с меткой
iconImageSize: [22, 31], //Размер изображения
iconImageOffset: [-11, -31] //Смещение ножки
});
var myPlacemark = new ymaps.Placemark([55.684758, 37.738521], {
balloonContent: "пример пипки2",
preset: 'my#icon'
}, {
preset: 'my#icon',
balloonPanelMaxMapArea: 'Infinity' //Баллун открывается в виде панели снизу
});
var myPlacemark1 = new ymaps.Placemark([55.686758, 37.799521], {
balloonContent: "пример пипки1",
preset: 'islands#yellowCircleDotIcon'
}, {
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', 'balloonclose'], function (e) {
var target = e.get('target');
if (target.geometry && typeof target.getGeoObjects) {
if(e.get('type') === 'balloonopen') {
target.options.set({
preset: 'islands#nightCircleDotIcon'
});
} else {
target.options
.set('preset', target.properties.get('preset'));
}
}
});
}