//////////
// YMAPS
//////////
(function($, APP) {
APP.Plugins.Ymaps = {
data: {
scriptsCreated: false,
ymapsLoaded: false,
clusterMap: undefined,
},
init: function() {
if ($('.js-ymap').length > 0) {
if (this.data.ymapsLoaded) {
ymaps.ready(this.initMaps.bind(this));
} else {
this.tryLoadScripts();
}
}
this.clickListeners();
},
createScripts: function() {
var ymapsK = '9ba9a278-66f0-47c6-8197-0d404ee0def5';
var ymapsScript = document.createElement('script');
ymapsScript.type = 'text/javascript';
ymapsScript.src = 'https://api-maps.yandex.ru/2.1/?apikey=' + ymapsK + '&lang=ru_RU';
$('head').append(ymapsScript);
this.data.scriptsCreated = true;
},
tryLoadScripts: function() {
var _this = this;
if (!_this.data.scriptsCreated) {
_this.createScripts();
}
var ticker = setInterval(readyChecker, 250);
function readyChecker() {
if (!_this.data.ymapsLoaded) {
try {
if (ymaps.ready()) {
_this.data.ymapsLoaded = true;
_this.init(); // reinit
clearInterval(ticker);
}
} catch (e) {
// console.log('maps not ready yeat, another try');
}
}
}
},
initMaps: function() {
var _this = this;
$('.js-ymap').each(function(i, domElement) {
_this.drawMap(domElement);
});
},
drawMap: function(domElement) {
var _this = this;
var $domElement = $(domElement);
var $geoPoints = $domElement.parent().find('.js-ymap-points i');
var type = $domElement.data('type');
if ($domElement.length === 0) return;
var myMap;
var params = {
center: _this.geoStringToArr($domElement.data('center')),
zoom: $domElement.data('zoom') || 10,
};
// CREATE MAP INSTANCE
myMap = new ymaps.Map(domElement, {
center: params.center,
zoom: params.zoom,
});
// save insance
if (type === 'cluster') {
_this.data.clusterMap = myMap;
} else if (type === 'simple') {
// _this.data.
}
// CONTROLS
myMap.controls.remove('trafficControl');
myMap.controls.remove('searchControl');
myMap.controls.remove('fullscreenControl');
myMap.controls.remove('rulerControl');
myMap.controls.remove('geolocationControl');
myMap.controls.remove('routeEditor');
myMap.controls.remove('typeSelector');
// myMap.controls.remove('zoomControl');
// PLACEMARKS
if (type === 'cluster') {
if ($geoPoints.length > 0) {
var placemarkCluster = new ymaps.Clusterer({
preset: 'islands#blackClusterIcons',
});
var placemarkArr = [];
$geoPoints.each(function(i, point) {
var $point = $(point);
var geodata = _this.geoStringToArr($point.data('geodata'));
var marker = $point.data('marker');
var shopId = $point.data('shop-id');
var placemark = new ymaps.Placemark(
geodata,
{
// balloonContent: params.placeholder.balloon,
// iconCaption: params.placeholder.caption,
},
{
preset: 'islands#blackIcon',
}
);
placemarkCluster.add(placemark);
placemarkArr.push({ id: shopId, geoObj: placemark });
});
myMap.geoObjects.add(placemarkCluster);
// zoom by cluster size
myMap.setBounds(placemarkCluster.getBounds(), { checkZoomRange: true });
// single placemark click lsiteners
$.each(placemarkArr, function(i, obj) {
obj.geoObj.events.add('click', function() {
$.each(placemarkArr, function(idx, obj) {
obj.geoObj.options.set(
{preset: 'islands#blackIcon'}
);
});
obj.geoObj.options.set(
{preset: 'islands#yellowIcon'}
);
$('.shops__map').addClass('is-active');
$('.shop-map-info').hide();
$('.shop-map-info[data-shop="' + obj.id + '"]').fadeIn();
myMap.container.fitToViewport();
});
});
}
} else if (type === 'simple') {
var placemark = new ymaps.Placemark(
params.center,
{
// balloonContent: params.placeholder.balloon,
// iconCaption: params.placeholder.caption,
},
{
preset: 'islands#yellowIcon'
}
);
myMap.geoObjects.add(placemark);
}
},
geoStringToArr: function(str) {
var split = str.split(',');
if (split.length === 2) {
return [parseFloat(split[0]), parseFloat(split[1])];
}
return false;
},
clickListeners: function() {
var _this = this;
_document.on('click', '.js-close-map-info', function() {
$('.shops__map').removeClass('is-active');
_this.data.clusterMap.container.fitToViewport();
});
},
};
})(jQuery, window.APP);
.js-ymap(data-type="cluster" data-center="55.732917, 37.606709" data-zoom="10")
span.js-ymap-points
i(data-geodata="55.741007, 37.565740" data-shop-id="1" data-marker="pickup")
i(data-geodata="55.731761, 37.541159" data-shop-id="2" data-marker="regular")
i(data-geodata="55.737694, 37.590321" data-shop-id="3" data-marker="regular")
i(data-geodata="55.735613, 37.596876" data-shop-id="4" data-marker="regular")
i(data-geodata="55.727368, 37.626920" data-shop-id="5" data-marker="regular")
i(data-geodata="55.718350, 37.613810" data-shop-id="6" data-marker="regular")
i(data-geodata="55.716115, 37.557546" data-shop-id="7" data-marker="regular")
i(data-geodata="55.706323, 37.601929" data-shop-id="8" data-marker="regular")
i(data-geodata="55.731838, 37.568608" data-shop-id="9" data-marker="regular")
i(data-geodata="55.724131, 37.658739" data-shop-id="10" data-marker="regular")