https://www.stadtkirchengemeinde-wittenberg.de/assets/js/plugins/osm-map/api.js

1var llMapsPool = {
2  pool: [],
3  used: 0,
4
5  getInstance: function(center, zoom) {
6    var me = this;
7    var instance;
8
9    if ( !window.leaflet || !window.leaflet.map ) {
10      return;
11    }
12
13    if ( me.used >= me.pool.length ) {
14      me.pool.push(me.createNewInstance(center, zoom));
15    }
16
17    instance = me.pool[me.used++];
18
19    if ( instance.map.marker ) {
20      instance.map.marker.setLatLng(L.latLng(center));
21    }
22    else {
23      instance.map.marker = L.marker(center, {
24        icon: L.icon({
25          iconUrl: '/assets/img/mapIcons/location-pin.svg',
26          iconSize: [32, 32],
27          iconAnchor: [16, 32]
28        })
29      })
30      .addTo(instance.map);
31    }
32
33    return instance;
34  },
35
36  reset: function() {
37    this.used = 0;
38  },
39
40  createNewInstance: function(center, zoom) {
41    var div = document.createElement('div');
42    div.className = 'pool-map-canvas';
43
44    return {
45      map: llMaps.getNewMapInstance(div, center, zoom),
46      div: div
47    }
48  },
49
50  findMapByDiv: function(div) {
51    var me = this;
52    var map;
53
54    me.pool.forEach(function(instance) {
55      if ( instance.div === div ) {
56        map = instance.map;
57      }
58    });
59
60    return map;
61  },
62
63  addEventsMaps: function(eventsDiv) {
64    var me = this;
65
66    eventsDiv.find('.pool-map-canvas').each(function(i, mapCanvas) {
67      $(mapCanvas).detach();
68    });
69
70    me.reset();
71
72    if ( !window.leaflet || !window.leaflet.map ) {
73      return;
74    }
75
76    $('.map-panel').each(function(i, mp) {
77      var panel = $(mp);
78      var lat = panel.attr('lat');
79      var lng = panel.attr('lng');
80      var mapInstance;
81
82      if ( lat && lng ) {
83        mapInstance = me.getInstance([lat, lng], llMaps.detailZoom);
84        panel.append($(mapInstance.div));
85      }
86    });
87  }
88};
89
90var llMaps = {
91  map: undefined,
92  ownPositionMarker: undefined,
93  ownPositionIcon: '/assets/img/mapIcons/my-location.svg',
94  ownPositionPin: '/assets/img/mapIcons/ownPosition.svg',
95  tilesUrl: '/osmtiles/{z}/{x}/{y}.png',
96
97  // Landeskirchenamt Erfurt
98  initialCenter: [50.979652, 11.028002],
99
100  initialZoom: 7,
101  detailZoom: 17,
102
103  tileLayerOptions: {
104    opacity: 0.6,
105    maxZoom: 19,
106
107    attribution:
108      '© ' +
109      '<a href="http://www.openstreetmap.org/copyright/">OpenStreetMap</a>'
110  },
111
112  getMap: function() {
113    return this.map;
114  },
115
116  getOwnPosition: function(map) {
117    var me = this;
118    var popup = L.popup();
119
120    var geolocationErrorOccurred = function(geolocationSupported, popup, latLng) {
121      var msg = geolocationSupported ?
122        'Ihre Position konnte nicht ermittelt werden.' :
123        'Ihr Browser unterstützt keine Positionsermittlung.'
124      ;
125
126      popup
127        .setLatLng(latLng)
128        .setContent('<b>Fehler:</b> ' + msg)
129        .openOn(map)
130      ;
131    }
132
133    if ( !navigator.geolocation ) {
134      geolocationErrorOccurred(false, popup, map.getCenter());
135      return;
136    }
137
138    navigator.geolocation.getCurrentPosition(
139      function(position) {
140        var latlng = {
141          lat: position.coords.latitude,
142          lng: position.coords.longitude
143        };
144
145        if ( !me.ownPositionMarker ) {
146          me.ownPositionMarker = L.marker(latlng, {
147            title: 'Eigener Standort',
148            bounceOnAdd: true,
149
150            bounceOnAddOptions: {
151              height: 100
152            },
153
154            icon: new L.Icon({
155              iconUrl: me.ownPositionPin,
156              iconSize: [32, 32],
157              iconAnchor: [16, 16]
158            })
159          })
160          .setZIndexOffset(1001)
161          .addTo(map)
162        }
163

164        map.setView(latlng);
165      },
166
167      function() {
168        geolocationErrorOccurred(true, popup, map.getCenter());
169      }
170    );
171  },
172
173  getNewMapInstance: function(placeholder, center, zoom) {
174    var me = this;
175
176    var map = L.map(placeholder, {
177      layers: [ L.tileLayer(me.tilesUrl, me.tileLayerOptions) ],
178      zoomControl: false,
179      zoom: zoom,
180      zoomSnap: 0,
181      gestureHandling: true,
182
183      gestureHandlingOptions: {
184        locale: 'de',
185
186        text: {
187          touch: 'Verschieben der Karte mit zwei Fingern',
188          scroll: 'Verwende Strg + Scrollen zum Zoomen der Karte',
189          scrollMac: 'Verwende \u2318 + Scrollen zum Zoomen der Karte'
190        }
191      }
192    });
193
194    map.attributionControl.setPrefix(false);
195    window.dispatchEvent(new Event('resize'));
196    map.setView(center);
197
198    map.addControl(new L.Control.Fullscreen({
199      position: 'topright',
200
201      title: {
202        false: 'Vollbildansicht ein',
203        true: 'Vollbildansicht aus'
204      }
205    }));
206
207    L.control.zoom({
208      position: 'bottomright',
209      zoomInTitle: 'Vergrößern',
210      zoomOutTitle: 'Verkleinern'
211    })
212    .addTo(map);
213
214    return map;
215  },
216
217  addOwnLocationButton: function(map) {
218    var me = this;
219
220    var locationBtn = {
221      icon: '<img src="' + me.ownPositionIcon + '">',
222      title: 'Standort ermitteln',
223
224      onClick: function(btn, map) {
225        me.getOwnPosition(map);
226      }
227    };
228
229    L.easyButton({
230      position: 'bottomright',
231      states: [ locationBtn, locationBtn ]
232    })
233    .addTo(map);
234  },
235
236  init: function() {
237    var me = this, tag;
238    var baseUrl = '/assets/js/plugins/osm-map/leaflet/';
239    var head = document.getElementsByTagName('head')[0];
240
241    var styles = [
242      'leaflet', 'leaflet.fullscreen', 'leaflet.easybutton',
243      'leaflet.gesture-handling', 'leaflet_local'
244    ];
245
246    var scripts = [
247      'leaflet', 'leaflet.fullscreen.min', 'leaflet.easybutton',
248      'leaflet.bouncemarker', 'leaflet.gesture-handling.min'
249    ];
250
251    styles.forEach(function(style) {
252      tag = document.createElement('link');
253      tag.href = baseUrl + style + '.css';
254      tag.rel = 'stylesheet';
255      head.appendChild(tag);
256    });
257
258    scripts.forEach(function(script, index, array) {
259      tag = document.createElement('script');
260      tag.src = baseUrl + script + '.js';
261      tag.type = 'text/javascript';
262      tag.async = false;
263      tag.defer = true;
264
265      if ( index === array.length - 1 ) {
266        tag.onload = function(e) {
267          me.fireEvent('leafletLoaded');
268        };
269      }
270
271      head.appendChild(tag);
272    });
273
274    window.addEventListener('leafletLoaded', function(e) {
275      var mapCanvas = document.querySelector(
276        '#custom-map-canvas, #events-map-canvas, #map-canvas',
277      );
278
279      if ( mapCanvas ) {
280        me.map = me.getNewMapInstance(
281          mapCanvas, me.initialCenter, me.initialZoom
282        );
283
284        me.mapId = mapCanvas.id;
285        me.addOwnLocationButton(me.map);
286      }
287
288      me.fireEvent('leafletReady');
289    }, false);
290  },
291
292  fireEvent: function(eventName) {
293    var event;
294
295    if ( typeof(Event) === 'function' ) {
296      event = new Event(eventName);
297    }
298    else {
299      // for IE 11
300      event = document.createEvent('Event');
301      event.initEvent(eventName, true, true);
302    }
303
304    window.dispatchEvent(event);
305  }
306};
307
308llMaps.init();