https://www.eifelsteig.de/_assets/1798f66a72c0609b2ee5b404d10475ff…/Atoms/Map.c9c0b9e104a54f8882e2.js

1/******/ (() => { // webpackBootstrap
2/******/ 	"use strict";
3// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
4(() => {
5// extracted by mini-css-extract-plugin
6
7})();
8
9// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
10(() => {
11
12;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Util/rgba-to-hexa.ts
13/**
14 * Transforms RGBA/RGB colors (like in CSS) to hex color codes.
15 * Can also strip away the alpha channel from resulting hex color code.
16 *
17 * @see https://stackoverflow.com/a/73401564
18 */
19function rgbaToHexa(rgba, forceRemoveAlpha = false) {
20  if (rgba.indexOf('#') === 0) {
21    return rgba;
22  }
23  return '#' + rgba.replace(/^rgba?\(|\s+|\)$/g, '') // Gets rgba / rgb string values
24  .split(',') // splits them at ","
25  .filter((string, index) => !forceRemoveAlpha || index !== 3).map(string => parseFloat(string)) // Converts them to numbers
26  .map((number, index) => index === 3 ? Math.round(number * 255) : number) // Converts alpha to 255 number
27  .map(number => number.toString(16)) // Converts numbers to hex
28  .map(string => string.length === 1 ? '0' + string : string) // Adds 0 when length of one number is 1
29  .join(''); // Puts the array together to a string
30}
31;

31// ./packages/portal/Resources/Private/Components/Atoms/Map/Scripts/base/map-util.ts
32
33class MapUtil {
34  map;
35  style;
36  constructor(map, style = window.getComputedStyle(map.gl.getContainer().closest('.map'))) {
37    this.map = map;
38    this.style = style;
39  }
40  /**
41   * Fits the bounds of the map to the given coordinates.
42   * If only one coordinate is found within the array the map will center on that coordinate and zoom to level 14.
43   */
44  fitBounds(lnglats, options) {
45    let bounds = new maplibregl.LngLatBounds();
46    if (Array.isArray(lnglats)) {
47      lnglats.forEach(lnglat => bounds.extend(lnglat));
48    } else {
49      bounds = lnglats;
50    }
51    if (lnglats.length === 1) {
52      this.map.gl.fitBounds(bounds, {
53        ...(options ?? {}),
54        maxZoom: 14
55      });
56    } else {
57      this.map.gl.fitBounds(bounds, options ?? {});
58    }
59    return bounds;
60  }
61  createPolyline(lnglats, options = {}) {
62    const width = options?.width ?? 6;
63    const polyline = new MTK.Polyline({
64      ...options,
65      color: rgbaToHexa(this.style.getPropertyValue('--local-MapPolyline-fill'), true),
66      opacity: 1,
67      width: width,
68      outlineColor: rgbaToHexa(this.style.getPropertyValue('--local-MapPolyline-line'), true),
69      outlineOpacity: 1,
70      outlineWidth: width + 2
71    });
72    polyline.setLngLats(lnglats);
73    return polyline;
74  }
75  createDefaultMarker(data) {
76    const inner = document.createElement('div');
77    const element = document.createElement('div');
78    inner.classList.add('map__marker__default');
79    inner.setAttribute('tabindex', '0');
80    element.classList.add('map__marker');
81    if (data.ident) {
82      element.setAttribute('data-ident', data.ident);
83    }
84    if (data.title) {
85      element.setAttribute('title', data.title);
86    }
87    element.appendChild(inner);
88    const marker = new maplibregl.Marker({
89      anchor: 'bottom',
90      element: element
91    });
92    marker.setLngLat(data.lnglat);
93    return marker;
94  }
95  createNumberedMarker(number, data) {
96    const inner = document.createElement('div');
97    const element = document.createElement('div');
98    inner.classList.add('map__marker__numbered');
99    inner.innerText = number.toString();
100    element.classList.add('map__marker');
101    if (data.ident) {
102      element.setAttribute('data-ident', data.ident);
103    }
104    if (data.title) {
105      element.setAttribute('title', data.title);
106    }
107    element.appendChild(inner);
108    const marker = new maplibregl.Marker({
109      anchor: 'center',
110      element: element
111    });
112    marker.setLngLat(data.lnglat);
113    return marker;
114  }
115  createIconMarker(data) {
116    let icon;
117    const inner = document.createElement('div');
118    const element = document.createElement('div');
119    if (data.icon?.type === 'iconify') {
120      icon = document.createElement('iconify-icon');
121      icon.classList.add('icon', 'iconify');
122      icon.setAttribute('icon', data.icon.id);
123      icon.setAttribute('noobserver', '');
124      icon.setAttribute('aria-hidden', 'true');
125    } else if (data.icon?.type === 'icomoon') {
126      icon = document.createElement('span');
127      icon.classList.add('icon', 'icomoon', `icon-${data.icon.id}`);
128    }
129    inner.classList.add('map__marker__icon');
130    element.classList.add('map__marker');
131    if (data.ident) {
132      element.setAttribute('data-ident', data.ident);
133    }
134    if (data.title) {
135      element.setAttribute('title', data.title);
136    }
137    element.appendChild(inner);
138    if (icon) {
139      inner.appendChild(icon);
140    }
141    const marker = new maplibregl.Marker({
142      anchor: 'bottom',
143      element: element
144    });
145    marker.setLngLat(data.lnglat);
146    return marker;
147  }
148  createLocationMarker(data) {
149    const inner = document.createElement('div');
150    const element = document.createElement('div');
151    inner.classList.add('map__marker__location');
152    element.classList.add('map__marker', 'inactive');
153    element.appendChild(inner);
154    const marker = new maplibregl.Marker({
155      anchor: 'center',
156      element: element
157    });
158    marker.setLngLat(data.lnglat);
159    return marker;
160  }
161  createClusterMarker(number, lnglat) {
162    const inner = document.createElement('div');
163    const element = document.createElement('div');
164    inner.innerText = number.toString();
165    inner.classList.add('map__marker__cluster');
166    if (number > 1000) {
167      inner.classList.add('map__marker__cluster--large');
168    } else if (number > 100) {
169      inner.classList.add('map__marker__cluster--medium');
170    }
171    element.classList.add('map__marker');
172    element.appendChild(inner);
173    const marker = new maplibregl.Marker({
174      anchor: 'center',
175      element: element
176    });
177    marker.setLngLat(lnglat);
178    return marker;
179  }
180  highlightMarker(marker) {
181    marker.getElement().classList.add('highlighted');
182  }
183  lowlightMarker(marker) {
184    marker.getElement().classList.remove('highlighted');
185  }
186  backgroundMarker(marker) {
187    marker.getElement().classList.add('backgrounded');
188  }
189  foregroundMarker(marker) {
190    marker.getElement().classList.remove('backgrounded');
191  }
192}
193;// ./packages/portal/Resources/Private/Components/Assistants/Shared/Scripts/Util/dispatch-custom-event.ts
194/**
195 * Creates and dispatches a custom event, that can be used to loosely couple things together.
196 */
197function dispatchCustomEvent(target, name, data) {
198  const event = new CustomEvent(name, {
199    detail: data || {}
200  });
201  target.dispatchEvent(event);
202}
203;

203// ./packages/portal/Resources/Private/Components/Atoms/Map/Scripts/base/_init.ts
204
205
206const observer = new IntersectionObserver(entries => entries.forEach(entry => {
207  const container = entry.target.querySelector('.map__container');
208  if (!entry.isIntersecting || !container) {
209    return;
210  }
211  console.log(TYPO3.lang['mtk.useTwoFingersToPan']);
212  observer.unobserve(entry.target);
213  MTK.init({
214    apiKey: container.dataset.apikey,
215    language: document.documentElement.lang,
216    i18n: {
217      'Use two fingers to pan': TYPO3.lang['mtk.useTwoFingersToPan']
218    }
219  }).createMap(container, {
220    map: {
221      location: {
222        bounds: JSON.parse(container.dataset.bounds)
223      },
224      mapType: container.dataset.maptype,
225      controls: [],
226      smartScroll: container.dataset.smartscroll
227    }
228  }, map => {
229    entry.target.querySelectorAll('[data-zoom]').forEach(button => button.addEventListener('click', () => {
230      map.gl.zoomTo(map.gl.getZoom() + parseInt(button.dataset.zoom));
231    }));
232    dispatchCustomEvent(document, `map.${container.id.replace('map__container--', '')}.ready`, {
233      map: map,
234      util: new MapUtil(map)
235    });
236    document.querySelectorAll('.maplibregl-ctrl').forEach(element => {
237      if (element instanceof HTMLElement) {
238        element.setAttribute('inert', '');
239      }
240    });
241  });
242}));
243document.querySelectorAll('.map').forEach(map => {
244  observer.observe(map);
245});
246})();
247
248/******/ })()
249;