https://www.arwag.at/_resources/app/themes/arwag/js/helper/map.js?m=1769506499

1(function (exp) {
2    exp.app.map = function (config, preventGestureHandling) {
3        return fetch(app._config.map.style).then(function (styleResponse) {
4            return styleResponse.json();
5        }).then(function (style) {
6            style.sources.openmaptiles.url = app._config.map.tilesUrl;
7            style.sprite = app._config.map.spriteUrl;
8            style.glyphs = app._config.map.fontsBaseUrl + style.glyphs;
9            config.style = style;
10            config.maxBounds = config.maxBounds || maplibregl.LngLatBounds.convert(app._config.map.bounds);
11
12            if (exp.app._config.print) {
13                // required for correct printing
14                config.preserveDrawingBuffer = true;
15            }
16
17            if (!preventGestureHandling) {
18                config.cooperativeGestures = true;
19                config.locale = {
20                    'CooperativeGesturesHandler.WindowsHelpText': 'Halten Sie die "Strg" Taste gedrückt um durch Scrollen die Karte zu zoomen.',
21                    'CooperativeGesturesHandler.MacHelpText': 'Halten Sie die "⌘" Taste gedrückt um durch Scrollen die Karte zu zoomen.',
22                    'CooperativeGesturesHandler.MobileHelpText': 'Sie können die Karte mit zwei Fingern bewegen.',
23                };
24            }
25
26            const map = new maplibregl.Map(config);
27
28            return map;
29        });
30    }
31
32    let openPopup = new WeakMap();
33    let rolvPopup = new WeakMap();
34
35    exp.app.mapPopup = {
36        showPopup: (map, coordinates, count, ids, infoWindowUrlCallback) => {
37            let _openPopup = openPopup.get(map);
38            let _rolvPopup = rolvPopup.get(map);
39
40            console.log(coordinates, count, ids);
41
42
43            if (_openPopup) {
44                _openPopup.remove();
45                openPopup.delete(map)
46            }
47            if (_rolvPopup) {
48                _rolvPopup.close();
49                rolvPopup.delete(map)
50            }
51
52            const id = 'mapPopup_' + Math.round((100000 * Math.random()));
53            const node = document.createElement('div');
54
55            fetch(infoWindowUrlCallback() + ids.join(',')).then(async (response) => {
56                node.innerHTML = await response.text();
57            });
58
59            //this.dispatch('loadInfoWindowContent', {
60            //    detail: {
61            //        count: count,
62            //        coordinates: coordinates,
63            //        ids: ids,
64            //        node: node
65            //    }
66            //});
67
68            // TODO
69            /*
70            if (window.innerWidth < 500 || window.innerHeight < 800) {
71                let rolv = Rolv2(document.getElementById('infowindow'));
72                rolv.addFocusOnDialogBehaviour();
73                rolv.addTriggerDomEventExtension();
74                rolv.addDestroyOnCloseExtension();
75                rolv.addDefaultDismissHandlers({
76                    content: '.app-site-header , #main, [data-overlay-content]',
77                    close: '[data-rolv-close]'
78                });
79
80                rolv.open();
81                rolv._container.querySelector('[data-inlay]').innerHTML = '';
82                rolv._container.querySelector('[data-inlay]').appendChild(node);
83                return;
84            }
85            */
86
87            const popup = new maplibregl.Popup({
88                    anchor: 'bottom',
89                    closeButton: true,
90                    maxWidth: 'none',
91                    offset: [0, -50]
92                })
93                    .setLngLat(coordinates)
94                    .setDOMContent(node)
95            ;
96
97            popup.on('open', () => {
98                const point = map.project(popup._lngLat);
99                const mapDimensions = popup._container.parentElement.getBoundingClientRect();
100                const popupDimension = popup._container.getBoundingClientRect();
101                const pan = [0, 0];
102                const posYTop = point.y - popupDimension.height * 1.6;
103                const posYBottom = point.y;
104
105                if (posYTop < 0) {
106                    pan[1] -= 0 - posYTop;
107                }
108
109                if (posYBottom - pan[1] > mapDimensions.height - 0 - 48) {
110                    const overlap = (posYBottom - pan[1]) - (mapDimensions.height - 0 - 48);
111                    pan[1] += overlap;
112                }
113
114                const padding = Math.max(20, Math.min(50, window.innerWidth / 100 * 2));
115
116                if (point.x - 1 * popupDimension.width / 2 < padding) {
117                    pan[0] = point.x - 1 * popupDimension.width / 2 - padding;
118                } else if (point.x + 1 * popupDimension.width / 2 > mapDimensions.width - padding) {
119                    pan[0] = (point.x + 1 * popupDimension.width / 2 + padding) - mapDimensions.width;
120                }
121
122                map.panBy(pan);
123            });
124
125            popup.on('close', () => {
126                //this.dispatch('infoWindowClosed');
127            });
128
129            popup.addTo(map);
130
131            setTimeout(() => {
132                openPopup.set(map, popup);
133            }, 800);
134        },
135        addPopupHandlers: (map, sourceName, infoWindowUrlCallback) => {
136
137            map.on('mouseenter', sourceName, () => {
138                map.getCanvas().style.cursor = 'pointer';
139            });
140            map.on('mouseleave', sourceName, () => {
141                map.getCanvas().style.cursor = '';
142            });
143
144            map.on('click', sourceName, async (e) => {
145                if (!e.features) {
146                    return;
147                }
148
149                const feature = e.features[0];
150
151                const clusterId = feature.properties.cluster_id;
152
153                if (!clusterId) {
154                    const coordinates = feature.geometry.coordinates.slice();
155
156                    exp.app.mapPopup.showPopup(map, coordinates, 1, [feature.properties.id], infoWindowUrlCallback);
157                    return;
158                }
159
160                const children = await map.getSource(sourceName).getClusterLeaves(clusterId, Number.MAX_SAFE_INTEGER);
161
162                const showPopupForCluster = () => {
163                    const ids = [];

164                    children.forEach((entry) => {
165                        if (ids.indexOf(entry.properties.id) < 0) {
166                            ids.push(entry.properties.id);
167                        }
168                    });
169
170                    exp.app.mapPopup.showPopup(map, feature.geometry.coordinates, feature.properties.point_count, ids, infoWindowUrlCallback);
171                }
172
173                if (map.getZoom() >= this.maxClusterZoomValue || map.getZoom() >= this.maxZoomValue) {
174                    // in this case the clustering has reached its maximum zoom, so the cluster will separate
175                    showPopupForCluster();
176                    return;
177                }
178
179                const zoomRequiredForExpansion = await map.getSource(sourceName).getClusterExpansionZoom(clusterId);
180
181                const bounds = new maplibregl.LngLatBounds();
182                children.forEach((entry) => {
183                    bounds.extend(entry.geometry.coordinates);
184                });
185
186                const camera = map.cameraForBounds(bounds, {
187                    maxZoom: 14,
188                    padding: {
189                        bottom: 50,
190                        left: 50,
191                        top: 50,
192                        right: 50
193                    }
194                });
195
196                if (camera.zoom < zoomRequiredForExpansion) {
197                    // in this case we somehow cannot zoom in enough to separate the cluster properly
198                    showPopupForCluster();
199                    return;
200                }
201
202                map.easeTo(camera);
203            });
204        }
205    }
206})
207(window);