https://realitek.ru/local/templates/realitek/assets/js/contacts-map.js

1initMap();
2
3async function initMap() {
4	
5	await ymaps3.ready;
6	ymaps3.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', [
7		'@yandex/ymaps3-default-ui-theme@latest',
8		'@yandex/ymaps3-hint@latest'
9	]);
10	const {YMap, YMapDefaultSchemeLayer, YMapFeatureDataSource, YMapLayer, YMapControl, YMapControls, YMapControlButton, YMapMarker, YMapFeature, YMapDefaultFeaturesLayer} = ymaps3;
11	const {YMapHint, YMapHintContext} = await ymaps3.import('@yandex/[email protected]');
12	const {YMapClusterer, clusterByGrid} = await ymaps3.import('@yandex/[email protected]');
13			
14	const map = new YMap(
15		document.getElementById('map-contacts'),
16		{
17			location: {
18				center: [37.841726, 55.804506],
19				zoom: 10
20			},
21			zoomRange: {min: 8, max: 16},
22			mode: 'vector',
23			behaviors: ['drag', 'pinchZoom', 'oneFingerZoom']
24		}
25	);
26	
27	// Кастомизация карты
28	map.addChild(new YMapDefaultSchemeLayer({
29		customization: yandex_maps_styles
30	}));
31	
32	// Слой элементов карты
33	const defaultFeatures = new YMapDefaultFeaturesLayer();
34	map.addChild(defaultFeatures);
35	
36	
37	
38	
39				
40	var content = document.createElement('div');
41	content.classList.add('genplan-map-infrastructure');
42	content.innerHTML = `
43		<div class="contacts-pin">
44	`;
45	
46	map.addChild(
47		new ymaps3.YMapMarker(
48			{
49				coordinates: map.center
50			}, 
51			content
52		)
53	);
54	
55	
56	
57	
58	
59	
60	
61	// ДОБАВЛЕНИЕ ЗУМА
62	const zoomControl = new YMapControls({
63		position: 'right'
64	});
65	const zoomControlBtns = new YMapControl({'transparent': true});
66	zoomControlBtns.addChild(
67		new(class FullscreenButton extends ymaps3.YMapComplexEntity {
68			_createElement() {
69				const zoomButtons = document.createElement('div');
70				zoomButtons.classList.add('zoom-control');
71				
72				const zoomInBtn = document.createElement('button');
73				zoomInBtn.type = 'button';
74				zoomInBtn.classList.add('zoom-control-in');
75				zoomInBtn.onclick = zoomInHandler;
76				
77				const zoomOutBtn = document.createElement('button');
78				zoomOutBtn.type = 'button';
79				zoomOutBtn.classList.add('zoom-control-out');
80				zoomOutBtn.onclick = zoomOutHandler;
81				
82				zoomButtons.appendChild(zoomInBtn);
83				zoomButtons.appendChild(zoomOutBtn);
84				
85				return zoomButtons;
86			}
87			_onAttach() {
88				this._element = this._createElement();
89				this._detachDom = ymaps3.useDomContext(this, this._element, this._element);
90			}
91			_onDetach() {
92				this._detachDom();
93				this._detachDom = null;
94				this._element = null;
95			}
96		})()
97	);
98	zoomControl.addChild(zoomControlBtns);
99	map.addChild(zoomControl);
100	function zoomInHandler() {

101		const newZoom = Math.floor(map.zoom + 1);
102		map.update({
103			location: {
104				zoom: newZoom, 
105				duration: 500, 
106				easing: 'ease-in-out'
107			}
108		});
109	}
110	function zoomOutHandler() {
111		const newZoom = Math.floor(map.zoom - 1);
112		map.update({
113			location: {
114				zoom: newZoom, 
115				duration: 500, 
116				easing: 'ease-in-out'
117			}
118		});
119	}
120	
121	
122	
123}