https://shop.okraina.ru/local/templates/okraina_shops/components/bitrix/news.list/shops/script.js

1function Okraina_NewsList_Shops(arParams){
2
3    this.container = null;
4    this.arParams = arParams;
5    this.map = null;
6    var _this = this;
7
8    /*
9     * Инициализация
10     */
11    this.Init = function(){
12
13        _this.container = $("#"+_this.arParams.id);
14        
15         //подключаем Яндекс карты
16        Okraina_Template.GetInstance().includeApi("YANDEX",function(){
17            //ждём пока API проинициализируется
18            ymaps.ready(function () {
19                _this.InitMap();
20            });
21        });
22
23    };
24
25    /*
26     * Инициализация карты
27     */
28    this.InitMap = function() {
29
30        var mapDiv = $(".map",_this.container);
31
32        $(".loader",mapDiv).remove();
33
34        _this.map = new ymaps.Map($(mapDiv).get(0), {
35            center:['68.37944100267333','31.986700099999997'], 
36            zoom: 7,
37            panelMaxMapArea: 0,
38            controls: ['geolocationControl','typeSelector','zoomControl'],
39            behaviors: ['multiTouch','dblClickZoom','drag']
40        });
41
42        _this.CreateGeoObjects();
43
44        //центровка и увеличение карты так, чтобы влезли все объекты
45        var bounds = _this.map.geoObjects.getBounds();
46        var boundsResult = ymaps.util.bounds.getCenterAndZoom(bounds, [$(mapDiv).width(), $(mapDiv).height()]);
47        _this.map.setCenter(boundsResult.center, boundsResult.zoom, {
48            checkZoomRange: true
49        });
50    },
51
52    /**
53     * Точки на карте
54     */
55    this.CreateGeoObjects = function(){
56
57        //создаём кластер
58        var clusterer = new ymaps.Clusterer({
59            clusterIconColor: "#76B82B",
60        });
61
62        for (var key in _this.arParams.arItems) {
63
64            var arItem = _this.arParams.arItems[key];
65
66            // Добавляем метки
67            var myPlacemark = new ymaps.Placemark(
68                [arItem.LAT, arItem.LONG], 
69                {
70                    hintContent: arItem.NAME,
71                    name: arItem.NAME,
72                    address: arItem.ADDRESS,
73                    schedule: arItem.SCHEDULE,
74                    picture: arItem.PICTURE
75                },
76                {
77                    balloonLayout: _this.GetBallonLayout(),
78                    balloonContentLayout: _this.GetBallonContentLayout(),
79                    balloonShadow: false,
80                    balloonPanelMaxMapArea: 0,
81                    iconLayout: 'default#image',
82                    iconImageHref:  _this.arParams.placemark.SRC,
83                    iconImageSize: [_this.arParams.placemark.WIDTH, _this.arParams.placemark.HEIGHT],
84                    iconImageOffset: [-(_this.arParams.placemark.WIDTH/2), -(_this.arParams.placemark.HEIGHT)]
85                }
86            );
87            clusterer.add(myPlacemark);
88        }   
89        
90        _this.map.geoObjects.add(clusterer); 
91    };
92
93    /*
94     * Шаблон макета балуна
95     */
96    this.GetBallonLayout = function(){
97
98        var max = 370;
99        if($(window).width() <=767) {
100            max = 250;
101        }
102        
103        var MainBlockCustumBallonLayout = ymaps.templateLayoutFactory.createClass(
104            '<div class="os-nl-s-balloon-layout">' +
105                '$[[options.contentLayout observeSize maxWidth='+max+']]' +
106            '</div>',{
107                /**
108                 * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
109                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
110                 * @function
111                 * @name build
112                 */
113                build: function () {
114                    this.constructor.superclass.build.call(this);
115
116                    this._$element = $('.os-nl-s-balloon-layout', this.getParentElement());
117
118                    this.applyElementOffset();
119
120                    this._$element.find('.close').on('click', $.proxy(this.onCloseClick, this));
121                },
122
123                /**
124                 * Удаляет содержимое макета из DOM.
125                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#clear
126                 * @function
127                 * @name clear
128                 */
129                clear: function () {
130                
131                    this.constructor.superclass.clear.call(this);
132                },
133
134                /**
135                 * Метод будет вызван системой шаблонов АПИ при изменении размеров вложенного макета.
136                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
137                 * @function
138                 * @name onSublayoutSizeChange
139                 */
140                onSublayoutSizeChange: function () {
141                    MainBlockCustumBallonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
142
143                    if(!this._isElement(this._$element)) {
144                        return;
145                    }
146
147                    this.applyElementOffset();
148
149                    this.events.fire('shapechange');
150                },
151
152                /**
153                 * Сдвигаем балун, чтобы "хвостик" указ

153ывал на точку привязки.
154                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
155                 * @function
156                 * @name applyElementOffset
157                 */
158                applyElementOffset: function () {
159                    this._$element.css({
160                        left: -($(".layout",this._$element)[0].offsetWidth / 2),
161                        top: -(this._$element[0].offsetHeight)
162                    });
163                },
164                
165                /**
166                 * Закрывает балун при клике на крестик, кидая событие "userclose" на макете.
167                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/IBalloonLayout.xml#event-userclose
168                 * @function
169                 * @name onCloseClick
170                 */
171                onCloseClick: function (e) {
172                    e.preventDefault();
173                    e.stopPropagation();
174
175                    this.events.fire('userclose');
176                },
177
178                /**
179                 * Используется для автопозиционирования (balloonAutoPan).
180                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ILayout.xml#getClientBounds
181                 * @function
182                 * @name getClientBounds
183                 * @returns {Number[][]} Координаты левого верхнего и правого нижнего углов шаблона относительно точки привязки.
184                 */
185                getShape: function () {
186                    if(!this._isElement(this._$element)) {
187                        return MainBlockCustumBallonLayout.superclass.getShape.call(this);
188                    }
189
190                    var position = this._$element.position();
191
192                    return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
193                        [position.left, position.top], [
194                            position.left + this._$element[0].offsetWidth,
195                            position.top + this._$element[0].offsetHeight
196                        ]
197                    ]));
198                },
199
200                /**
201                 * Проверяем наличие элемента (в ИЕ и Опере его еще может не быть).
202                 * @function
203                 * @private
204                 * @name _isElement
205                 * @param {jQuery} [element] Элемент.
206                 * @returns {Boolean} Флаг наличия.
207                 */
208                _isElement: function (element) {
209                    return element && element[0] && element.find('.arrow')[0];
210                }
211            });
212        return MainBlockCustumBallonLayout;
213    };
214
215    /*
216    * Шаблон макета контента балуна
217    */
218    this.GetBallonContentLayout = function() {
219        var MainBlockCustumBallonContentLayout = ymaps.templateLayoutFactory.createClass(
220            '<div class="layout {{properties.cssclass}}">'+
221
222                '<div class="close">' +
223                    '<span class="icon fi fi-close"></span>' +
224                '</div>' +
225
226                '<div>'+
227                    '<div class="address"><span class="icon fi fi-location"></span> {{properties.address}}</div>'+
228                    '<div class="schedule"><span class="icon fi fi-clock"></span> <b>Часы работы:</b> <br/> {{properties.schedule |raw }}</div>'+
229                '</div>' +
230
231                '{% if properties.picture %}'+
232                    '<div class="picture"><div class="image" style="background-image: url({{properties.picture.SRC}})"> </div></div>'+
233                '{% endif %}' +
234
235                '<div class="arrow"></div>' +
236                
237            '</div>' 
238        );
239        return MainBlockCustumBallonContentLayout;
240        
241    };
242
243    $(function(){
244        _this.Init();
245    });
246
247    return this;
248}