https://rigasvasara.lv/wp-content/themes/vasara2026/assets/js/map-ol.js?ver=1.0.2

1(function($) {
2
3    const dateFormat = 'dd.mm.yy';
4
5    $(document).ready(function() {
6
7        let map, loader, eventJSON, zoomhint, hintTimeout, markers;
8
9        const allMarkers = [];
10
11        if ($('#event-map').length) {
12            zoomhint = $('.zoom-hint');
13            loader = $('.map-loader');
14
15            let waitForAPI = window.setInterval(function() {
16                if (typeof L === 'object') {
17                    initMap();
18                    clearInterval(waitForAPI);
19                }
20            }, 50);
21        }
22
23        function initMap() {
24            $(loader).hide();
25            map = L.map('event-map').setView([56.965020677726315, 24.146890013042213], 12);
26
27            map.scrollWheelZoom.disable();
28
29            map.getContainer().addEventListener('wheel', function (e) {
30                if (!e.ctrlKey) {
31                    // e.preventDefault();
32                    // e.stopPropagation();
33
34                    $(zoomhint).show();
35                    clearTimeout(hintTimeout);
36                    hintTimeout = setTimeout(() => {
37                        $(zoomhint).hide();
38                    }, 1500);
39
40                    return;
41                }
42
43                e.preventDefault();
44                e.stopPropagation();
45
46                map.scrollWheelZoom.enable();
47
48                clearTimeout(map._ctrlZoomTimeout);
49                map._ctrlZoomTimeout = setTimeout(() => {
50                    map.scrollWheelZoom.disable();
51                }, 1000);
52            }, { passive: false });
53
54            eventJSON = $('#event-json').val();
55            if(eventJSON) {
56                eventJSON = JSON.parse(eventJSON);
57            }
58
59            // L.tileLayer('https://map.webserveris.lv/styles/latvia-violet/{z}/{x}/{y}.png', {
60            //     maxZoom: 20,
61            //      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
62            // }).addTo(map);
63
64            L.rectangle(map.getBounds(), {
65                color: null,
66                fillColor: '#d9b3ff',
67                fillOpacity: 0.3,
68                interactive: false
69            }).addTo(map);
70
71            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
72                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
73            }).addTo(map);
74
75            markers = L.markerClusterGroup();
76
77            $.each(eventJSON, function(_key, _event) {
78
79                // const lat = parseFloat(_event.event_coordinates[0]);
80                // const lon = parseFloat(_event.event_coordinates[1]);
81
82                let expired = '';
83                const offset = (Math.random() - 0.5) * 0.0005;
84                const lat = parseFloat(_event.event_coordinates[0]) + offset;
85                const lon = parseFloat(_event.event_coordinates[1]) + offset;
86
87                const _now = new Date();
88                const _ends = _event.event_ends;
89
90                const [_datePart, _timePart] = _ends.split(' ');
91                const [_day, _month, _year] = _datePart.split('.').map(Number);
92                const [_hours, _minutes] = _timePart.split(':').map(Number);
93
94                const _targetDate = new Date(_year, _month - 1, _day, _hours, _minutes);
95
96                if(_now > _targetDate) {
97                    expired = 'map__event-expired';
98                }
99
100                const icon = L.divIcon({
101                    className: '',
102                    html: `<div class="map-marker ${expired}" style="background-image: url('${_event.event_category.icon}');"></div>`,
103                    iconSize: [52, 52],
104                    iconAnchor: [20, 20]
105                });
106                    
107                let eventStartTime = 'Laiks: ' + _event.event_starts_time_formated;
108
109                if(_event.event_all_day == true) eventStartTime = 'Laiks: Visu dienu';
110
111                let eventTypes = '';
112
113                $.each(_event.event_type, function(index, value) {
114                    eventTypes += '\
115                        <div class="event-popup-type">\
116                            <img src="' + value.icon + '" alt="' + value.title + '" onload="SVGInject(this)">\

117                            <span class="event-popup-type-title">' + value.title + '</span>\
118                        </div>\
119                    ';
120                });
121
122                let popupHtml = '\
123                    <a class="event-popup" href="' + _event.event_url + '" target="_blank" aria-label="Atvērt pasākumu: ' + _event.event_title + '">\
124                        <div class="event-popup-image">\
125                            <img src="' + _event.event_image + '" alt="' + _event.event_title + '">\
126                        </div>\
127                        <div class="event-popup-meta">\
128                            <div class="event-popup-meta-item">\
129                                <img src="/wp-content/themes/wb/assets/images/rs-popup-date.svg" alt="Datums" onload="SVGInject(this)">\
130                                <span class="event-popup-meta-text" tabindex="0" aria-label="' + _event.event_date_from_to + '">' + _event.event_date_from_to + '</span>\
131                            </div>\
132                            <div class="event-popup-meta-item">\
133                                <img src="/wp-content/themes/wb/assets/images/rs-popup-time.svg" alt="Laiks" onload="SVGInject(this)">\
134                                <span class="event-popup-meta-text" tabindex="0" aria-label="' + eventStartTime + '">' + eventStartTime + '</span>\
135                            </div>\
136                        </div>\
137                        <div class="event-popup-title" tabindex="0" aria-label="' + _event.event_title + '">' + _event.event_title + '</div>\
138                        <div class="event-popup-types-list">' + eventTypes + '</div>\
139                    </a>\
140                ';
141
142                const marker = L.marker([lat, lon], { icon });
143                marker.bindPopup(popupHtml);
144                markers.addLayer(marker);
145
146                allMarkers.push({
147                    marker: marker,
148                    data: _event
149                });
150
151                // marker.on('click', function () {
152                //     map.flyTo(marker.getLatLng(), map.getZoom());
153                //     // marker.openPopup();
154                // });
155            });
156
157            map.addLayer(markers);
158
159            if($('.init-datepicker').length) {
160
161                let filter_from = '';
162                let filter_to = '';
163
164                const today = new Date();
165                const min = new Date(2025, 7, 1);
166
167                const fromDateObj = filter_from ? parseDateFromString(filter_from) : null;
168                const toDateObj = filter_to ? parseDateFromString(filter_to) : null;
169
170                $.datepicker.setDefaults($.datepicker.regional['lv']);
171
172                let fromOptions = {
173                    dateFormat: dateFormat,
174                    // minDate: fromDateObj || today,
175                    minDate: min,
176                    defaultDate: today,
177                    onSelect: function(selectedDate) {
178                        var date = $(this).datepicker('getDate');
179                        $('#map-filter-date-to').datepicker("option", "minDate", date);
180                        eventFilterApply();
181                    }
182                };
183
184                if (toDateObj) {
185                    fromOptions.maxDate = toDateObj;
186                }
187
188                let from = $('#map-filter-date-from').datepicker(fromOptions);
189                $('#map-filter-date-from').datepicker("setDate", today);
190
191                let to = $('#map-filter-date-to').datepicker({
192                    dateFormat: dateFormat,
193                    minDate: fromDateObj || today,
194
195                    onSelect: function(selectedDate) {
196                        var date = $(this).datepicker('getDate');
197                        eventFilterApply();
198                    }
199                });
200
201                eventFilterApply();
202            }
203
204        }
205        
206        
207
208        $('#map-type').change(function() {
209            eventFilterApply();
210        });
211
212        $('#map-entrance').change(function() {
213            eventFilterApply();
214        });
215
216        $('.map-filter-hide').click(function() {
217            let filters = $('.map-filters');
218
219            $(filters).removeClass('fade-in').addClass('fade-out');
220            $('.map-filter-show').removeClass('fade-out').addClass('fade-in').css('display', 'inline-flex');
221
222            setTimeout(function() {
223                $(filters).hide();
224            }, 500);
225        });
226
227        $('.map-filter-show').click(function() {
228            $('.map-filters').removeClass('fade-out').addClass('fade-in').show();
229
230            $(this).removeClass('fade-in').addClass('fade-out');
231
232            setTimeout(function() {
233                $('.map-filter-show').hide();
234            },500); 
235        });
236
237        function eventFilterApply() {
238            
239            const typeFilter = parseInt($('#map-type option:selected').val());
240            const pricingFilter = $('#map-entrance option:selected').val();
241            const fromVal = $('#map-filter-date-from').val();
242            const toVal = $('#map-filter-date-to').val();
243
244            const fromDate = fromVal ? parseDate(fromVal + ' 00:00') : null;
245            const toDate = toVal ? parseDate(toVal + ' 23:59') : null;
246
247            let matchIds = [];
248
249            markers.clearLayers();
250

251            allMarkers.forEach(({ marker, data }) => {
252
253                let typeMatch = false;
254                let pricingMatch = false;
255                let dateMatch = false;
256
257                const start = parseDate(data.event_starts);
258                const end = parseDate(data.event_ends);
259
260                if (fromDate && toDate) {
261                    if(end >= fromDate && start <= toDate) {
262                        dateMatch = true;
263                    }
264                } else if (fromDate) {
265                    if(end >= fromDate) {
266                        dateMatch = true;
267                    }
268                } else if (toDate) {
269                    if(start <= toDate) {
270                        dateMatch = true;
271                    }
272                } else {
273                    dateMatch = true;
274                }
275
276                if(typeFilter) {
277                    $.each(data.event_type, function(index, value) {
278                        if(value.id == typeFilter) typeMatch = true;
279                    });
280                } else {
281                    typeMatch = true;
282                }
283 
284                if(pricingFilter) {
285                    if(pricingFilter == 'free' && data.event_free == 1) {
286                        pricingMatch = true;
287                    } else if(pricingFilter == 'paid' && !data.event_free) {
288                        pricingMatch = true;
289                    }
290                } else {
291                    pricingMatch = true;
292                }
293
294                if (pricingMatch && typeMatch && dateMatch) {
295                    matchIds.push(data.event_id);
296                    markers.addLayer(marker);
297                }
298            });
299
300            $('.map-event-list .event-card').each(function() {
301                let eid = $(this).data('eid');
302
303                if(matchIds.includes(eid)) {
304                    $(this).show();
305                } else {
306                    $(this).hide();
307                }
308            });
309        }
310
311        function parseDate(dateStr) {
312            const parts = dateStr.split(/[\s.:]/);
313            const [dd, mm, yyyy, hh = '00', min = '00'] = parts;
314            return new Date(`${yyyy}-${mm}-${dd}T${hh}:${min}`);
315        }
316
317    });
318
319})(jQuery);