\n","placemark_layout.js":"ymaps.ready(function () {\n var map = new ymaps.Map('map', {\n center: [55.755, 37.617],\n zoom: 10\n });\n // Создадим макет метки.\n var animatedLayout = ymaps.templateLayoutFactory.createClass(\n '',\n {\n build: function () {\n animatedLayout.superclass.build.call(this);\n var element = this.getParentElement().getElementsByClassName('placemark')[0];\n // Если метка выбрана, то увеличим её размер.\n var size = this.isActive ? 60 : 34;\n // При задании для метки своего HTML макета, фигуру активной области\n // необходимо задать самостоятельно - иначе метка будет неинтерактивной.\n // Создадим фигуру активной области \"Круг\".\n var smallShape = {type: 'Circle', coordinates: [0, 0], radius: size / 2};\n var bigShape = {type: 'Circle', coordinates: [0, -30], radius: size / 2};\n // Зададим фигуру активной области.\n this.getData().options.set('shape', this.isActive ? bigShape : smallShape);\n // Если метка выбрана, то зададим класс и запустим анимацию.\n if (this.isActive) {\n element.classList.add(\"active\");\n element.style.animation = \".35s show-big-placemark\";\n } else if (this.inited) {\n element.classList.remove(\"active\");\n element.style.animation = \".35s show-small-placemark\";\n }\n if (!this.inited) {\n this.inited = true;\n this.isActive = false;\n // При клике по метке будем перестраивать макет.\n this.getData().geoObject.events.add('click', function () {\n this.isActive = !this.isActive;\n this.rebuild();\n }, this);\n }\n }\n }\n );\n map.geoObjects.add(new ymaps.Placemark([55.755, 37.617], {}, {\n iconLayout: animatedLayout,\n hasBalloon: false\n }));\n});"},"resources":["img/big.svg","img/small.svg"],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/placemark_layout/"}placemark_layout.htmlplacemark_layout.js