https://www.team-apotheken.de/wp-content/themes/team-apotheken/js/team-map-search.min.js?ver=2.1

1var pharmacyList = $('#pharmacy-list');
2var pharmacyListLoader = $('#pharmacy-list-loader');
3var pharmacyListItems = pharmacyList.find('article');
4var pharmacyListFilter = pharmacyList.find('nav a');
5const baseUrl = document.getElementById('js-base-url').value;
6let userLocation = false;
7
8var sortableShopList = new List('pharmacy-list', {
9	valueNames: ['distance-value']
10});
11
12pharmacyListFilter.click(function (e) {
13	e.preventDefault();
14
15	if ($(this).hasClass('active')) {
16		return;
17	}
18
19	pharmacyList.find('nav a.active').removeClass('active');
20	$(this).addClass('active');
21
22	var slug = $(this).data('slug');
23
24	pharmacyListLoader.addClass('show');
25	window.setTimeout(() => {
26		pharmacyListLoader.removeClass('show');
27	}, 500);
28
29	if (slug === 'alle-regionen') {
30		pharmacyListItems.parent().removeClass('hide');
31		return;
32	}
33
34	pharmacyListItems.parent().addClass('hide');
35	var pharmacyListItemsToHide = pharmacyListItems.filter(function (index, pharmacy) {
36		return $(pharmacy).data('regions').indexOf(slug) !== -1;
37	});
38
39	pharmacyListItemsToHide.each(function (index, item) {
40		$(item).parent().removeClass('hide');
41	});
42});
43
44
45
46function initShopSearchMap() {
47	// Create the map.
48	ym.ready(function(modules) {
49
50		let icon = new modules.provider.Icon({
51			iconUrl: baseUrl + '/images/icon_apotheke.svg',
52			iconRetinaUrl: baseUrl + '/images/icon_apotheke.svg',
53			iconSize: [48, 48],
54			iconAnchor: [24, 46],
55			popupAnchor: [-2, -50]
56		});
57
58		let geoJsonData = ym.geoJson(apothekenGeoJson, {
59
60			onEachFeature: function (feature, layer) {
61				layer.setIcon(icon);
62				let content =
63					'<div class="team-smartmaps-popup">' +
64					'<div class="header"><img class="logo" src="' +
65					feature.properties.logo +
66					'"></div>' +
67					'<div class="content"><p>' +
68					feature.properties.address +
69					'</p>';
70				if (feature.properties.distance) {
71					content += '<p>Entfernung ca. ' + feature.properties.distance + '</p>';
72				}
73				content +=
74					'<a href="https://www.google.com/maps/dir/?api=1&destination=' +
75					feature.properties.address_url +
76					'" class="route-link" target="_blank" rel="noopener">Route berechnen</a>';
77				content +=
78					'<div class="opening-hours"><b>&Ouml;ffnungszeiten:</b>' +
79					feature.properties.hours +
80					'</div>' +
81					'<p><b>Telefon:</b><a href="tel:' +
82					feature.properties.phone +
83					'">' +
84					feature.properties.phone +
85					'</a></p>' +
86					'<a href="' +
87					feature.properties.url +
88					'" class="button primary"><span>Weitere Infos</span></a>' +
89					'</div></div>';
90
91				layer.bindPopup(content);
92			}
93		});
94
95		const bounds = geoJsonData.getBounds();
96
97		let map = ym.map("shop-search-map", {
98			center: bounds.getCenter(), //  ym.latLng(50.095685, 8.690445)
99			zoom: 12,
100			style: smartMapsStyle,
101			scrollWheelZoom: false
102		});
103
104		window.map = map;
105
106		map.fitBounds(bounds);
107		geoJsonData.addTo(map);
108
109		map
110			.locate()
111			.on('locationfound', function(e) { //LocationEvent
112				userLocation = e.latlng;
113
114				ym.geoJson(apothekenGeoJson, {
115					onEachFeature: function (feature, layer) {
116						let latLng = ym.latLng(feature.geometry.coordinates[1], feature.geometry.coordinates[0]);
117						let pharmacyNode = document.getElementById('apotheke-' + feature.properties.storeid);
118						const distance = (userLocation.distanceTo(latLng)/1000).toFixed(2);
119						pharmacyNode.querySelector('.distance-label').innerHTML = 'Entfernung ca. ' + distance  + ' km';
120						pharmacyNode.querySelector('.distance-value').textContent = distance;
121					}
122				}
123			)})
124			.on('locationerror', function(e) {
125				// console.log(e); // ErrorEvent
126			});
127
128
129
130	});
131
132
133
134}
135
136initShopSearchMap();
137