Сайт Fakel Gym
https://fakelgym.cp.good-production.xyz/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
4.6 KiB
110 lines
4.6 KiB
ymaps.ready(function () {
|
|
|
|
var buildingCoordinates = [55.832659, 37.576118];
|
|
|
|
//Смещение карты, чтобы иконка была визуально по центру
|
|
var offsetCoefficient = 0.001;
|
|
|
|
var mapCenter = [
|
|
buildingCoordinates[0],
|
|
buildingCoordinates[1] - offsetCoefficient
|
|
];
|
|
|
|
var myMap = new ymaps.Map('map', {
|
|
center: mapCenter,
|
|
zoom: 17,
|
|
controls: []
|
|
});
|
|
|
|
// Отключаем все взаимодействия с картой
|
|
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
|
|
|
var svgIcon = '<svg width="146" height="175" viewBox="0 0 146 175" fill="none" xmlns="http://www.w3.org/2000/svg">' +
|
|
'<path d="M73 174.328L48.4669 131.836H97.5331L73 174.328Z" fill="#FA4241" />' +
|
|
'<circle cx="71.9104" cy="73" r="73" fill="url(#paint0_linear_150_2453)" />' +
|
|
'<path d="M58.0581 42.549C50.1523 47.1076 43.6824 50.8665 43.6985 50.9305C43.7469 51.0424 52.3304 56.0169 52.4756 56.0169C52.524 56.0169 57.0094 53.4577 62.4628 50.3386C67.9162 47.2196 72.4339 44.6444 72.5145 44.6284C72.5952 44.5964 77.1612 47.1556 82.6631 50.3067L92.6825 56.0429L96.942 53.6117C99.2656 52.2841 101.266 51.1004 101.379 51.0044C101.525 50.8765 98.0553 48.8131 87.2614 42.639C79.3878 38.1444 72.8372 34.4175 72.7081 34.3855C72.5791 34.3375 65.9801 38.0164 58.0581 42.549Z" fill="white" />' +
|
|
'<path d="M38.5032 73.2768V92.7908L42.0043 90.7755C43.9405 89.6718 45.9734 88.5201 46.5381 88.2002L47.5384 87.6244V78.2993C47.5384 73.1648 47.5707 68.9741 47.603 68.9741C47.6352 68.9741 53.2661 72.1891 60.1232 76.1079C66.9642 80.0267 72.6597 83.1938 72.7565 83.1458C72.8694 83.0978 78.5003 79.8828 85.2929 75.98L97.6357 68.8941L97.7164 78.3153L97.7971 87.7204L102.234 90.2636L106.67 92.8068L106.719 73.2408C106.735 62.54 106.719 53.7587 106.687 53.7267C106.655 53.6947 98.9746 58.0614 89.6008 63.4358L72.5629 73.2088L55.896 63.6757C46.7317 58.4133 39.0679 54.0306 38.8743 53.9027L38.5032 53.6787V73.2768Z" fill="white" />' +
|
|
'<path d="M47.9893 93.0937C45.6014 94.4692 43.6653 95.6209 43.6653 95.6849C43.6653 95.8288 72.449 112.24 72.6588 112.224C72.9008 112.192 101.587 95.7968 101.587 95.6849C101.587 95.6369 99.5867 94.4692 97.1508 93.0777L92.6977 90.5344L82.6782 96.2767C77.1603 99.4277 72.5781 101.987 72.5136 101.955C72.4329 101.939 67.8991 99.3637 62.4618 96.2447C57.0084 93.1256 52.4908 90.5664 52.4262 90.5824C52.3456 90.5984 50.361 91.7181 47.9893 93.0937Z" fill="white" />' +
|
|
'<defs>' +
|
|
'<linearGradient id="paint0_linear_150_2453" x1="2.4683" y1="6.137" x2="115.196" y2="71.48" gradientUnits="userSpaceOnUse">' +
|
|
'<stop stop-color="#F41C1B" />' +
|
|
'<stop offset="0.435" stop-color="#F72D2C" />' +
|
|
'<stop offset="1" stop-color="#FA4242" />' +
|
|
'</linearGradient>' +
|
|
'</defs>' +
|
|
'</svg>';
|
|
|
|
|
|
var iconSize;
|
|
var iconOffset;
|
|
|
|
if (window.innerWidth <= 768) {
|
|
|
|
iconSize = [73, 88];
|
|
iconOffset = [-36, -87];
|
|
} else {
|
|
|
|
iconSize = [146, 175];
|
|
iconOffset = [-73, -174];
|
|
}
|
|
|
|
|
|
var myPlacemark = new ymaps.Placemark(
|
|
buildingCoordinates,
|
|
{hintContent: '', balloonContent: ''},
|
|
{
|
|
|
|
iconLayout: 'default#imageWithContent',
|
|
iconImageHref: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svgIcon),
|
|
iconImageSize: iconSize,
|
|
iconImageOffset: iconOffset,
|
|
hideIconOnBalloonOpen: false
|
|
}
|
|
);
|
|
|
|
|
|
myMap.panes.get('ground').getElement().style.filter = 'grayscale(100%)';
|
|
|
|
|
|
myMap.geoObjects.add(myPlacemark);
|
|
|
|
|
|
var isMapInteractive = false;
|
|
var mapElement = document.getElementById('map');
|
|
|
|
function activateMap(e) {
|
|
if (!isMapInteractive) {
|
|
myMap.behaviors.enable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
|
isMapInteractive = true;
|
|
|
|
setTimeout(function () {
|
|
document.addEventListener('click', deactivateMap);
|
|
document.addEventListener('touchend', deactivateMap);
|
|
}, 100);
|
|
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
function deactivateMap(e) {
|
|
var target = e.target;
|
|
|
|
if (e.type === 'touchend' || e.changedTouches || e.changedTouches[0]) {
|
|
var touch = e.changedTouches[0];
|
|
target = document.elementFromPoint(touch.clientX, touch.clientY);
|
|
}
|
|
|
|
if (!mapElement.contains(target)) {
|
|
|
|
myMap.behaviors.disable(['scrollZoom', 'drag', 'multiTouch', 'dblClickZoom']);
|
|
isMapInteractive = false;
|
|
|
|
|
|
document.removeEventListener('click', deactivateMap);
|
|
document.removeEventListener('touchend', deactivateMap);
|
|
}
|
|
}
|
|
|
|
mapElement.addEventListener('click', activateMap);
|
|
mapElement.addEventListener('touchstart', activateMap);
|
|
});
|
|
|