https://lamm-mitteltal.de/(cms)/module/static/default/content/map/js/map.js

1(function(){
2    var selector = '.cms-map-osm';
3    
4    function osmMapInit (maps) {
5        for (i=0, len=maps.length; i < len; i++) {
6            try {
7                maps[i].osmConfig = JSON.parse(maps[i].dataset.config);
8                if (maps[i].osmConfig.map.map_autobuild == 1) {
9                    osmMapBuild({currentTarget: maps[i]});
10                }
11                else {
12                    maps[i].addEventListener('click', osmMapBuild);
13                }
14            }
15            catch(err) {
16                console.warn(err);
17            }
18        }
19    }
20
21    function osmMapBuild (ev) {
22        var i, len, config, map, mapOptions, devDomain;
23        map = ev.currentTarget;
24        if (map.cmsMapInstance) {
25            return;
26        }
27        config = map.osmConfig;
28        if (ev.type == 'click') {
29            map.removeEventListener('click', osmMapBuild);
30        }
31        if (map.getBoundingClientRect().height <= 0){
32            map.style.height= config.map.map_height + 'px';
33        }
34        map.innerHTML = '';
35        if (config.map.map_expand == 1) {
36            map.parentNode.className += ' cms-map-expanded';
37        }
38        if (ev.type == 'click') {
39            ev.preventDefault();
40            map.scrollIntoView();
41        }
42        mapOptions = {
43            scrollWheelZoom: false,
44            center: [parseFloat(config.map.map_center_lat), parseFloat(config.map.map_center_long)], 
45            zoom: parseFloat(config.map.map_zoom)
46        };
47        if (document.location.search.indexOf('mapControls=0') > -1) {
48            mapOptions.dragging = false;
49            mapOptions.zoomControl = false;
50            mapOptions.attributionControl = false;
51        }
52        map.cmsMapInstance = L.map(map.id, mapOptions);
53        L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
54            attribution: '<a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
55            maxZoom: 18,
56        }).addTo(map.cmsMapInstance);
57
58        if (map.dataset.route) {
59            L.Control.Route = L.Control.extend({
60                onAdd: function() {
61                    var group = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
62                    var button = L.DomUtil.create('a', 'leaflet-button-custom', group);
63                    button.role = 'button';
64                    button.href = map.dataset.route;
65                    if( button.href.indexOf('#') != 0 ) {
66                        button.target = '_blank';
67                    }
68                    button.innerText = map.dataset.routeLabel;
69                    return group;
70                }
71            });
72            L.control.route = function(opts) {
73                return new L.Control.Route(opts);
74            }
75            L.control.route({position: 'topleft'}).addTo(map.cmsMapInstance)
76        }
77
78        if (config.markers && config.markers.length) {
79            devDomain = map.dataset.devDomain || '';
80            for(i=0, len=config.markers.length; i<len; i++){
81                osmMapMarker(map, config.markers[i], devDomain); 
82            }
83        }
84    }
85
86    function osmMapMarker (map, marker, devDomain) { 
87        var markerCoords = [parseFloat(marker.map_marker_lat), parseFloat(marker.map_marker_long)];
88        var markerConfig = {
89            title: marker.map_marker_name,
90			alt: marker.map_marker_name,
91            riseOnHover: true
92        };
93        var markerPopupLink = marker.map_marker_url || 'https://www.google.com/maps/?daddr=' + marker.map_marker_lat + ',' + marker.map_marker_long;
94        var markerButtonLabel = marker.map_marker_button || map.dataset.routeLabel;
95        var markerDescription = marker.map_marker_description ? '<p>' + marker.map_marker_description + '</p>' : '';
96        var markerPopupContent = '<h3>' + marker.map_marker_name + '</h3>' + markerDescription + '<div><a class="cta" href="' + markerPopupLink + '" target="_blank">' + markerButtonLabel + '</a></div>'
97        if (marker.media && marker.media.media_file_id > 0) {
98            var markerSize = osmMapMarkerSize(marker);
99            var markerAnchor = [Math.round(0.5 * markerSize[0]), markerSize[1]];
100            var iconUrl = devDomain + '/%28cms%29/media/resize/size=' + marker.map_marker_size + 'x' + marker.map_marker_size + '%2Cscale=fit/' 

100+ marker.media.media_file_id
101            var iconRetinaUrl = devDomain + '/%28cms%29/media/resize/size=' + (2 * marker.map_marker_size) + 'x' + (2 * marker.map_marker_size) + '%2Cscale=fit/' + marker.media.media_file_id
102            markerConfig.icon = L.icon({
103                iconUrl: iconUrl,
104                iconRetinaUrl: iconRetinaUrl,
105                iconSize: markerSize,
106                iconAnchor: markerAnchor,
107                popupAnchor: [-3, -76]
108            });
109            /* https://leafletjs.com/reference-1.4.0.html#icon */
110        }
111        L.marker(markerCoords, markerConfig).bindPopup(markerPopupContent).addTo(map.cmsMapInstance);
112    }
113
114    function osmMapMarkerSize (marker) {
115        var ratio = marker.map_marker_width * marker.map_marker_height > 0 ? 
116            marker.map_marker_height / marker.map_marker_width : 1;
117        var ratioSize = Math.round(marker.map_marker_size / ratio);
118        return [
119            ratio > 1 ? ratioSize : marker.map_marker_size,
120            ratio < 1 ? ratioSize : marker.map_marker_size
121        ]
122    }
123
124    osmMapInit(document.querySelectorAll(selector));
125})();