https://www.ennsdorf.gv.at/system/statV.1787223863/Javascript/rismap3/rismap3leaflet.js

1function rismap3(ctrl) {
2    var self = this;
3    var curCtrl = ctrl;
4    var baseLayers = {};
5    var overlayLayers = {};
6    var lStreetMap;
7    var lSatellite;
8    var lBasemapat;
9    var lBasemapatgrau;
10    var lBasemapathighdpi;
11    var lBasemapatorthofoto;
12    var oStreets;
13    var mymap;
14    var geoRefMarker;
15    // Function to merge objects (similar to $.extend() in jQuery)
16    const mergeObjects = (target, ...sources) => {
17        sources.forEach(source => {
18            for (let key in source) {
19                if (source.hasOwnProperty(key)) {
20                    target[key] = source[key];
21                }
22            }
23        });
24        return target;
25    };
26
27    var options = {
28        "clickMessage": "Klicken Sie hier um die Karte zu laden",
29        "showbasemap": true,
30        "sgvgisenableorthophoto": false,
31        "sgvgisenableaddress": false,
32        "sgvgisenablestreet": false,
33        "streetslbl": "Strassen",
34        "addresslbl": "Adressen",
35        "orthofotolbl": "Orthofoto"
36    };
37
38    // Merge options with rismap3_global_settings
39    options = mergeObjects(options, rismap3_global_settings);
40
41    // Assuming ctrl is the element reference, fetching its map3_settings
42    if (ctrl.dataset.map3_settings) {
43        options = mergeObjects(options, JSON.parse(ctrl.dataset.map3_settings));
44    }
45
46    this.loadLeaflet = function () {
47        if (typeof (L) === 'undefined') {
48            var leafletScript = document.createElement("script");
49            leafletScript.id = "leafletScript"
50            leafletScript.type = "text/javascript";
51            leafletScript.src = "https://cdnfile.gem2go.page/cdnstatic/system/Javascript/leaflet/leaflet.js";
52            document.getElementsByTagName('head')[0].appendChild(leafletScript);
53            var leafletCSS = document.createElement("link");
54            leafletCSS.id = "leafletCSS"
55            leafletCSS.setAttribute('rel', 'stylesheet');
56            leafletCSS.setAttribute('type', 'text/css');
57            leafletCSS.setAttribute('href',
58                'https://cdnfile.gem2go.page/cdnstatic/system/Javascript/leaflet/leaflet.css');
59            document.getElementsByTagName('head')[0].appendChild(leafletCSS);
60
61            leafletScript.onload = function () {
62                var leafletProvidersScript = document.createElement("script");
63                leafletProvidersScript.id = "leafletProviderScript"
64                leafletProvidersScript.type = "text/javascript";
65                leafletProvidersScript.src = envurl + "system/JavaScript/rismap3/leaflet-providers.js";
66                document.getElementsByTagName('head')[0].appendChild(leafletProvidersScript);
67                leafletProvidersScript.onload = function () {
68                    self.setUpMap(curCtrl);
69                }
70            }
71        } else {
72            self.setUpMap(curCtrl);
73        }
74    }
75
76    this.updateLatLng = function (lat, lng) {
77        geoRefMarker.setLatLng([lat, lng]);
78        mymap.panTo([lat, lng]);
79    }
80
81    this.getMarker = function () {
82        return geoRefMarker;
83    }
84
85    this.setUpMap = function (ctrl) {
86        if (options.sgvgisenableaddress) {
87            lStreetMap = L.tileLayer.provider('CartoDB.VoyagerNoLabels');
88        } else {
89            lStreetMap = L.tileLayer.provider('OpenStreetMap.Mapnik');
90        }
91        lSatellite = L.tileLayer.provider('Esri.WorldImagery');
92
93        baseLayers = {
94            'Map': lStreetMap,
95            'Satellite': lSatellite,
96        };
97
98        overlayLayers = {
99        };
100
101        if (options.showbasemap) {
102            lBasemapat = L.tileLayer.provider('BasemapAT.basemap');
103            lBasemapatgrau = L.tileLayer.provider('BasemapAT.grau');
104            lBasemapathighdpi = L.tileLayer.provider('BasemapAT.highdpi');
105            lBasemapatorthofoto = L.tileLayer.provider('BasemapAT.orthofoto');
106            baseLayers = mergeObjects(baseLayers, {
107                'Basemap.at': lBasemapat,
108                'Basemap.at (GRAU)': lBasemapatgrau,
109                'Basemap.at (HIGHDPI)': lBasemapathighdpi,
110                'Basemap.at (ORTHOFOTO)': lBasemapatorthofoto,
111            });
112            oStreets = L.tileLayer.provider('BasemapAT.overlay');
113            overlayLayers = mergeObjects(overlayLayers, {
114                'Streets': oStreets
115            });
116        }
117
118        mymap = L.map(ctrl);
119        if (options.sgvgisenableorthophoto) {
120            var orthFoto = L.tileLayer('https://geoservices.buergernetz.bz.it/mapproxy/p_bz-Orthoimagery/ows?layer=Aerial-2023-RGB&style=default&tilematrixset=EPSG_3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={z}&TileCol={x}&TileRow={y}', {});
121            baseLayers[options.orthofotolbl] = orthFoto;
122        }
123
124        if (options.sgvgisenableaddress) {
125            var wmsLayer = L.tileLayer.wms('https://geoservices3.civis.bz.it/geoserver/gvcc-Address/wms?', {
126                styles: 'Addresses-Web',
127                layers: 'Addresses',
128                format: 'image/png',
129                transparent: true
130            });
131            overlayLayers[options.addresslbl] = wmsLayer;
132            if (rismap3_global_settings.defaultlayer === 'hybrid' || rismap3_global_settings.defaultlayer === 'roadmap')
133                wmsLayer.addTo(mymap);
134        }
135
136        if (options.sgvgisenablestreet) {
137            var lang = 'language=' + (rissprachid == '1' ? 'de' : 'it');
138            var streetLayer = L.tileLayer.wms('https://geoservices1.civis.bz.it/geoserver/p_bz-TransportNetwork/ows?' + lang, {
139                layers: 'LinksSequences-Rendering,LinksSequences-Labels',
140                styles: 'LinksSequences-Rendering,LinksSequences-Labels',
141                format: 'image/png8',
142                version: '1.3.1',
143                transparent: true,
144            });
145            overlayLayers[options.streetslbl] = streetLayer;
146            if (rismap3_global_settings.defaultlayer === 'hybrid' || rismap3_global_settings.defaultlayer === 'roadmap')
147                streetLayer.addTo(mymap);
148        }
149
150        //Erweiterung für L3G0 werden mehrere Marker als Array übergeben werden diese hier ausgegeben.
151        const map3_pin_DataArray = JSON.parse(ctrl.dataset.map3_pin);
152        if (Array.isArray(map3_pin_DataArray)) {
153            if (map3_pin_DataArray.length > 0) {
154                console.log(map3_pin_DataArray.length > 0)
155                let fitBoundsRange = [];
156                let fitBoundsCoordinates;
157                for (let i = 0; i < map3_pin_DataArray.length; i++) {
158                    var loc = map3_pin_DataArray[i];

159                    mymap.setView([loc.lat, loc.lng], 10);
160                    var marker = L.marker([loc.lat, loc.lng], { draggable: (loc.geocoding === "true") }).addTo(mymap);
161                    geoRefMarker = marker;
162
163                    fitBoundsCoordinates = [
164                        loc.lat,
165                        loc.lng
166                    ]
167                    fitBoundsRange.push(fitBoundsCoordinates);
168                    if (loc.description) {
169                        var description = loc.description;
170                        var content = "<strong>" + description.titel + "</strong>";
171                        if (description.link != 'false') {
172                            var furtherLink = document.createElement('a');
173                            var linkText = "Weitere Informationen"
174                            content = "<strong>" + description.titel + "</strong><br /><p>" + description.text + "</p><br /><a href='" + description.link + "' title='" + linkText + "' target='_blank'>" + linkText + "</a>";
175                        }
176                        marker.bindPopup(content);
177                    }
178                }
179
180                mymap.fitBounds(fitBoundsRange);
181
182            } else {
183
184                var noGeoCordinatesText = "Leider sind keine Geokoordinaten für diese Einträge vorhanden."
185                var noGeoCordinatesAlert = document.createElement("div");
186                noGeoCordinatesAlert.innerHTML += noGeoCordinatesText;
187                noGeoCordinatesAlert.classList += "alert alert-warning"
188
189                var alertIcon = document.createElement("span");
190                alertIcon.classList += "fa-light fa-circle-exclamation me-2";
191
192                document.querySelector(".bemContainer--mapPlaceholder").replaceWith(noGeoCordinatesAlert);
193                noGeoCordinatesAlert.prepend(alertIcon);
194            }
195           
196        } else {
197
198            var loc = JSON.parse(ctrl.dataset.map3_pin)
199            mymap.setView([loc.lat, loc.lng], rismap3_global_settings.zoom);
200            var marker = L.marker([loc.lat, loc.lng], { draggable: (loc.geocoding === "true") }).addTo(mymap);
201            geoRefMarker = marker;
202
203            if (loc.description) {
204                var description = loc.description;
205                var content = "<strong>" + description.titel + "</strong>";
206                if (description.strasse)
207                    content += "<br />" + description.strasse + " ";
208                if (description.hnr)
209                    content += description.hnr;
210                if (description.plz || description.ortname)
211                    content += "<br />";
212                if (description.plz)
213                    content += description.plz;
214                if (description.ortname) {
215                    if (description.plz)
216                        content += " ";
217                    content += description.ortname;
218                }
219                marker.bindPopup(content);
220            }
221        }
222
223        layerControl = L.control.layers(baseLayers, overlayLayers, {
224            collapsed: true
225        }).addTo(mymap);
226
227        switch (rismap3_global_settings.defaultlayer) {
228            case 'roadmap':
229                lStreetMap.addTo(mymap);
230                break;
231            case 'hybrid':
232            case 'satellite':
233                lSatellite.addTo(mymap);
234                break;
235            case 'basemap':
236                lBasemapat.addTo(mymap);
237                break;
238            case 'grau':
239                lBasemapatgrau.addTo(mymap);
240                break;
241            case 'hidpi':
242                lBasemapathighdpi.addTo(mymap);
243                break;
244            case 'ortho':
245                lBasemapatorthofoto.addTo(mymap);
246                break;
247        }
248
249        if (rismap3_global_settings.defaultlayer === 'hybrid')
250            oStreets.addTo(mymap);
251
252        // ResizeObserver einbauen, um Map bei Größenänderung neu zu zentrieren
253        if (typeof ResizeObserver !== 'undefined') {
254            const mapContainer = ctrl;
255            const resizeObserver = new ResizeObserver(() => {
256                mymap.invalidateSize();
257                if (typeof fitBoundsRange !== 'undefined' && fitBoundsRange.length > 0) {
258                    mymap.fitBounds(fitBoundsRange);
259                } else if (geoRefMarker) {

260                    mymap.setView(geoRefMarker.getLatLng());
261                }
262            });
263            resizeObserver.observe(mapContainer);
264        } else {
265            window.addEventListener('resize', () => {
266                mymap.invalidateSize();
267                if (typeof fitBoundsRange !== 'undefined' && fitBoundsRange.length > 0) {
268                    mymap.fitBounds(fitBoundsRange);
269                } else if (geoRefMarker) {
270                    mymap.setView(geoRefMarker.getLatLng());
271                }
272            });
273        }      oStreets.addTo(mymap);
274    }
275
276    this.initialiseRisMap3 = function () {
277        if (options.clicktostart === false) {
278            self.loadLeaflet();
279        } else {
280            self.addLeafletClickDiv(curCtrl);
281        }
282    }
283
284    this.addLeafletClickDiv = function (ctrl) {
285        var clkDiv = document.createElement('div');
286        clkDiv.className = 'mfClickToLoadWrapper';
287        var innerDiv = document.createElement('div');
288        innerDiv.className = 'mfClickToLoad';
289        innerDiv.innerHTML = "<p class='mapIcon'></p><p>" + options.clickMessage + "</p>";
290        clkDiv.appendChild(innerDiv);
291
292        clkDiv.addEventListener('click', function () {
293            ctrl.removeChild(clkDiv);
294            self.loadLeaflet();
295        });
296
297        ctrl.appendChild(clkDiv);
298    }
299}
300
301function initializeMaps() {
302    var mapdivs = document.querySelectorAll(".rismap3_map, .bemContainer--mapPlaceholder");
303    mapdivs.forEach(function (mapdiv) {
304        var lf = new rismap3(mapdiv);
305        lf.initialiseRisMap3();
306    });
307}
308
309document.addEventListener("DOMContentLoaded", initializeMaps);