https://www.moosinning.de/_assets/a6245d992ebb30d95ef16dda16ad984a/JavaScript/osm_map.js?1786445196

1window.communice.osm = [];
2window.communice.osm.enableLogging = false;
3const canvas = document.querySelector('#map-canvas');
4
5if (canvas) {
6  singleviewAddress = canvas.dataset.singleviewaddress;
7  addressGroup = canvas.dataset.addressgroup;
8  addressGroupName = canvas.dataset.addressgroupname;
9  let longitude = parseFloat(canvas.dataset.lon);
10  let latitude = parseFloat(canvas.dataset.lat);
11  let iconFeature = new ol.Feature();
12
13  popupContent = document.querySelector('#popup-content');
14
15  popup = new ol.Overlay({
16    element: popupContent,
17    positioning: "bottom-center",
18    offset: [0, -50],
19    autoPan: true,
20    autoPanAnimation: {
21      duration: 250
22    },
23    position: [0, 0]
24  });
25
26  vectorSource = new ol.source.Vector({
27    features: [iconFeature]
28  });
29
30  let markers = new ol.layer.Vector({
31    source: vectorSource,
32    style: new ol.style.Style({
33      image: new ol.style.Icon({
34        anchor: [0.5, 46],
35        anchorXUnits: 'fraction',
36        anchorYUnits: 'pixels',
37        src: '/typo3conf/ext/communice_addresses/Resources/Public/Storage/DefaultAddressgroupIcons/Default.png'
38      })
39    })
40  });
41
42  let attribution = new ol.control.Attribution({
43    collapsible: false
44  });
45
46  let osmLayer = new ol.layer.Tile({
47    source: new ol.source.OSM({
48      attributions: [
49        '© <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>-Mitwirkende'
50      ]
51    }),
52    crossOrigin: null
53  });
54
55  let addBorderToLastItem = () => {
56    const addressGroupItems = document.querySelectorAll('#map-addresses .address-group--item[style="display: block;"]');
57
58    addressGroupItems.forEach(item => {
59      item.classList.remove('last');
60    });
61
62    const lastAddressGroupItem = addressGroupItems[addressGroupItems.length - 1];
63    lastAddressGroupItem.classList.add('last');
64  }
65
66  let hideAllMapAddresses = () => {
67    document.querySelectorAll('#map-addresses .address-group--item').forEach(
68      item => {
69        item.style.display = 'none';
70        item.classList.remove('last');
71        if (item.classList.contains('open')) {
72          item.classList.remove('open');
73          dkSlideUp(item.querySelector('.address-group--item--bottom'));
74
75        }
76      }
77    )
78  }
79
80  let showMapAddressesByGroup = groupId => {
81    if (groupId === 0) {
82      document.querySelectorAll('#map-addresses .address-group--item').forEach(item => {
83          item.style.display = 'block';
84          addBorderToLastItem();
85        }
86      )
87      return true;
88    }
89
90    document.querySelectorAll('#map-addresses .address-group--item.g' + groupId).forEach(item => {
91        item.style.display = 'block';
92        addBorderToLastItem();
93      }
94    )
95
96    return true;
97  }
98
99  function displayMarkers(categoryId, categoryName) {
100    const usedIcons = JSON.parse(document.getElementById('map--configuration').dataset.usedIcons);
101    logger("displayMarkers() |  categoryId = " + categoryId + " / categoryName = " + categoryName);
102    closePopup();
103
104    document.querySelector('#map-addresses h2').innerText = categoryName;
105
106    hideAllMapAddresses();
107    showMapAddressesByGroup(categoryId);
108
109    hideAllMarkers();
110
111    for (let i = 1; i <= window.mapMarker.length; i++) {
112      if (typeof window.mapMarker[i] !== "undefined") {
113        logger("Marker " + i + " is != undefined");
114        if (typeof window.mapMarker[i].categories !== "undefined" && window.mapMarker[i].categories[categoryId]) {
115          // Switching Marker Icons to fit Category
116          if (usedIcons[categoryId] === null || usedIcons[categoryId] === 'undefined') {
117            window.mapMarker[i].setStyle(new ol.style.Style({
118              image: new ol.style.Icon({
119                anchor: [0.5, 46],
120                anchorXUnits: "fraction",
121                anchorYUnits: "pixels",
122                src: usedIcons[0],
123              })
124            }));
125          } else {
126            window.mapMarker[i].setStyle(new ol.style.Style({
127              image: new ol.style.Icon({
128                anchor: [0.5, 46],
129                anchorXUnits: "fraction",
130                anchorYUnits: "pixels",
131                src: usedIcons[categoryId],
132              })
133            }));
134          }
135          logger("Showing Marker: window.mapMarker[" + i + "]");
136          vectorSource.addFeature(window.mapMarker[i]);
137          map.getView().fit(vectorSource.getExtent(), map.getSize());
138
139        } else if (categoryId == 0 && categoryName == "Alle Adressen") {
140          vectorSource.addFeature(window.mapMarker[i]);
141
142          map.getView().fit(vectorSource.getExtent(), map.getSize());
143        }
144      }
145    }
146  }
147
148  function showSingleAddress(uid, openPopup) {
149    logger("####### showSingleAddress() |  uid = " + uid + " / openPopup = " + openPopup);
150    logger('#Scroll to Main-Nav');
151    window.communice.scrollTo.selector('#main-navigation');
152    hideAllMarkers();
153
154    uid = parseInt(uid);
155
156    for (let l = 1; l < window.mapMarker.length; l++) {
157      if (typeof window.mapMarker[l] !== "undefined") {
158        logger("Marker " + l + " - AdressUid: " + window.mapMarker[l].markerAddressUid);
159        if (window.mapMarker[l].markerAddressUid === uid) {
160          let markerIdToOpen = l;
161          logger(l + " hat die UID: " + window.mapMarker[l].markerAddressUid + " und soll gezeigt werden.");
162          vectorSource.addFeature(window.mapMarker[l]);
163          window.mapMarker[l].setStyle(new ol.style.Style({
164            image: new ol.style.Icon({
165              anchor: [0.5, 46],
166              anchorXUnits: "fraction",
167              anchorYUnits: "pixels",
168              src: window.mapMarker[l].defaultIconSrc,
169            })
170          }))
171
172          if (typeof map !== 'undefined') {
173            map.getView().setCenter(window.mapMarker[l].getGeometry().getCoordinates());
174          }
175
176          //simulate click on map-tab to ensure mobile users will see the marker on the map
177          if (window.innerWidth < 768) {
178            document.getElementById('map-tabs-1').click();
179          }
180          // if ($('#addressgroupsTreeCollapseBtn').find('span.filter-btn-caret').find('i').hasClass('fa-caret-up')) {
181          //   document.getElementById('addressgroupsTreeCollapseBtn').click();
182          // }
183          // if ($('#map-tabs-3').hasClass('active')) {
184          //   $('#map-tabs-3').click();
185          // }
186          if (openPopup === 1 && typeof map !== 'undefined') {
187            setTimeout(function() {
188              showPopup(markerIdToOpen);
189            }, 150);
190          }
191          break;
192        }
193      }
194    }
195
196    // region Show single address
197    hideAllMapAddresses();
198    document.querySelector('#map-addresses h2').innerText = 'Adresse';
199    document.querySelector(`#map-addresses .address-group--item[data-address-uid="${uid}"]`).style.display = 'block';
200    addBorderToLastItem();
201    // endregion
202
203    document
204      .querySelectorAll('#popup-content .address-data-item-demail-trigger')
205      .forEach(el => {
206        logger('das ist ein de-mail-trigger ' + el);
207        if (el) {
208          el.addEventListener('click', function(e) {
209            if (e) {
210              toggleDeMailInfoBox();
211            }
212          });
213        }
214      });
215
216    logger("####### showSingleAddress() |  END");
217  }
218
219  function closePopup() {
220    if (typeof popup !== 'undefined') {
221      popup.setPosition(undefined);
222      // $(popupContent).popover('dispose');
223      return false;

224    }
225  }
226
227  function hideAllMarkers() {
228    logger("hideAllMarkers() is called");
229    vectorSource.clear();
230  }
231
232  /** Shows the Popup of given Marker */
233  function showPopup(markerid) {
234    logger("showPopup() |  markerid = " + markerid);
235
236    let coordinates = window.mapMarker[markerid].getGeometry().getCoordinates();
237    logger(coordinates);
238
239    document.getElementById("popup-content-content").innerHTML = window.mapMarker[markerid].get('popupContent')
240    popup.setPosition(coordinates);
241
242    setTimeout(function() {
243      // $(popupContent).popover('show');
244    }, 300);
245  }
246
247  /** Shorthand for logging to console. Logs only enabled if  enableLogging == 1 */
248  function logger(variable) {
249    if (
250      typeof variable !== 'undefined'
251      && window.communice.osm.enableLogging === true
252    ) {
253      console.log(variable);
254    }
255  }
256
257  window.communice.citymap.loaded = true;
258  window.communice.citymap.init = () => {
259    map = new ol.Map({
260      target: document.querySelector('#map-canvas'),
261      layers: [osmLayer, markers],
262      controls: ol.control.defaults({attribution: false}).extend([attribution]),
263      view: new ol.View({
264        center: ol.proj.fromLonLat([longitude, latitude]),
265        zoom: parseInt(canvas.dataset.zoom),
266        minZoom: 5,
267        maxZoom: 18,
268      }),
269    });
270
271    // Change cursor when hover Pin
272    map.on('pointermove', e => {
273      if (e.dragging) {
274        //// Popup autoclose on mapmovement?!
275        return;
276      }
277      let pixel = map.getEventPixel(e.originalEvent);
278      let hit = map.hasFeatureAtPixel(pixel);
279      map.getTarget().style.cursor = hit ? 'pointer' : '';
280    });
281
282    map.on('click', evt => {
283      popup.setPosition(undefined);
284
285      let feature = map.forEachFeatureAtPixel(
286        evt.pixel,
287        feature => feature
288      );
289      if (feature) {
290        let coordinates = feature.getGeometry().getCoordinates();
291        logger(coordinates);
292
293        document.getElementById("popup-content-content").innerHTML = feature.get("popupContent");
294        popup.setPosition(coordinates);
295      }
296    });
297
298    // Create Popup Overlay
299    map.addOverlay(popup);
300
301    map.updateSize();
302  }
303
304  document.addEventListener('DOMContentLoaded', () => {
305    if (singleviewAddress) {
306      logger("showSingleAddress() |  singleviewAddress = " + singleviewAddress);
307      showSingleAddress(singleviewAddress, 1);
308    }
309    if (addressGroup) {
310      logger("displayMarkers() |  addressGroup = " + addressGroup);
311      displayMarkers(addressGroup, addressGroupName);
312    }
313
314    let toggleGroupTree = () => {
315      document.querySelector('#addressCollapse').classList.toggle('open');
316
317      ['fa-caret-up', 'fa-caret-down'].map(
318        cssClass => document.querySelector('.filter-btn-caret > i').classList.toggle(cssClass)
319      )
320    }
321    document
322      .querySelector('#addressgroupsTreeCollapseBtn')
323      .addEventListener('click', function() {
324        toggleGroupTree();
325      });
326    document
327      .querySelector('#map-tabs-3')
328      .addEventListener('click', function() {
329        toggleGroupTree();
330      });
331  });
332}