https://www.weareaptn.org/wp-content/mu-plugins/aptn-utilities/assets/js/map.js?m=1649961785

1var mapExist = false;
2if (jQuery('#aptn-map').length) {
3    mapExist = true;
4}
5infiniteScroll = false;
6if (jQuery('#infiteScrollEnabled').length) {
7    infiniteScroll = true;
8    jQuery('#infiteScrollEnabled').append('<div class="load-more-infinite">Loading more...</div>');
9}
10var myGeoJSONPath = aptn.geojson;
11var locations = aptn.locations;
12var selectedFeature = [];
13var homeView = [11.7660012511866, 96.35934591293336];
14var homeZoom = 3;
15var idNames = JSON.parse(aptn.idNames);
16if (mapExist) {
17    var map = L.map('aptn-map').setView(homeView, homeZoom);
18    var gl = L.mapboxGL({
19        attribution: '\u003ca href="https://www.maptiler.com/copyright/" target="_blank"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e',
20        style: 'https://api.maptiler.com/maps/52072a73-cc86-409f-bdbc-b0a16ad6f9aa/style.json?key=wuoJVJkZcMgCBc6orfUj',
21    }).addTo(map);
22
23    jQuery.getJSON(myGeoJSONPath, function(data) {
24        let onEachFeature = (feature, layer) => {
25            if (locations.includes(feature.properties.name)) {
26                layer.on('mouseout', function() {
27                    let donotchange = selectedFeature.some((item) => {
28                        return item._leaflet_id === this._leaflet_id;
29                    });
30                    if (!donotchange) {
31                        this.setStyle({
32                            fillColor: getColor(feature.properties.name),
33                        });
34                    }
35                });
36                layer.on('click', function(e) {
37                    if (!selectedFeature.includes(this)) {
38                        selectedFeature.push(this);
39                        this.setStyle({ fillColor: '#f7d420' });
40                        let selected = jQuery('select#location').select2('data');
41                        let alreadySelected = [];
42                        selected.forEach((selection) => {
43                            alreadySelected.push(selection.id);
44                        });
45                        Object.keys(idNames).map(function(key) {
46                            if (idNames[key][0] === feature.properties.name) {
47                                alreadySelected.push(key);
48                                getDescription(idNames[key][1], idNames[key][0]);
49                            }
50                        });
51                        jQuery('select#location').val(alreadySelected).trigger('change');
52                        setSelectedCountries(alreadySelected);
53                        var filter = jQuery('#filter');
54                        jQuery('input.paged').val(1);
55                        jQuery.ajax({
56                            url: filter.attr('action'),
57                            data: filter.serialize(), // form data
58                            type: filter.attr('method'), // POST
59                            dataType: 'json',
60                            beforeSend: function(xhr) {
61                                filter.find('status').text('Processing...'); // changing the button label
62                            },
63                            success: function(response) {
64                                jQuery('#dynamic-posts').fadeOut(500, function() {
65                                    window.history.pushState({}, '', response.link);
66                                    jQuery('#dynamic-posts').html(response.posts);
67                                    jQuery(this).fadeIn(500);
68                                });
69                            },
70                        });
71                    } else {
72                        selectedFeature.forEach((selection, index) => {
73                            if (
74                                selection.feature.properties.name === feature.properties.name
75                            ) {
76                                selectedFeature.splice(index, 1);
77                            }
78                        });
79                        let selected = jQuery('select#location').select2('data');
80                        let alreadySelected = [];
81                        selected.forEach((selection) => {
82                            alreadySelected.push(selection.id);
83                        });
84                        console.log(alreadySelected);
85                        Object.keys(idNames).map(function(key) {
86                            if (idNames[key][0] === feature.properties.name) {
87                                removeA(alreadySelected, key.toString());
88                                unSelectMapDescription(idNames[key][1], idNames[key][0]);
89                            }
90                        });
91                        console.log(alreadySelected);
92                        jQuery('select#location').val(alreadySelected).trigger('change');
93
94                        this.setStyle({
95                            fillColor: getColor(feature.properties.name),
96                        });
97                        var filter = jQuery('#filter');
98                        jQuery('input.paged').val(1);
99                        jQuery.ajax({
100                            url: filter.attr('action'),
101                            data: filter.serialize(), // form data
102                            type: filter.attr('method'), // POST
103                            dataType: 'json',
104                            beforeSend: function(xhr) {
105                                filter.find('status').text('Processing...'); // changing the button label
106                            },
107                            success: function(response) {
108                                jQuery('#dynamic-posts').fadeOut(500, function() {
109                                    window.history.pushState({}, '', response.link);
110                                    jQuery('#dynamic-posts').html(response.posts);
111                                    jQuery(this).fadeIn(500);
112                                });
113                            },
114                        });
115                    }
116                });
117                layer.on('mouseover', function() {
118                    this.setStyle({
119                        fillColor: '#ffef27',
120                    });
121                });
122            }
123        };
124        countries = L.geoJson(data, {
125            clickable: false,
126            style: style,
127            onEachFeature: onEachFeature,
128        }).addTo(map);
129
130        // countries.on('click', selectLocation());
131
132        map.on('click', function(e) {
133            var coord = e.latlng;
134            var lat = coord.lat;
135            // var lng = coord.lng;
136            // console.log(
137            // 	'You clicked the map at latitude: ' + lat + ' and longitude: ' + lng,
138            // );
139            // console.log(map.getZoom());
140        });
141    });
142}
143
144var countries;
145
146function removeA(arr) {
147    var what,
148        a = arguments,
149        L = a.length,
150        ax;
151    while (L > 1 && arr.length) {
152        what = a[--L];
153        while ((ax = arr.indexOf(what)) !== -1) {
154            arr.splice(ax, 1);
155        }
156    }
157    return arr;
158}
159
160function getColor(name) {
161    return locations.includes(name) ? '#ec008c' : '';
162}
163
164function selectedFill(item) {
165    return locations.includes(item) ? '#f7d420' : '#ec008c';
166}
167
168function getOpacity(name) {
169    return locations.includes(name) ? 0.6 : 0;
170}
171
172function style(feature, selected = false) {
173    return {
174        fillColor: getColor(feature.properties.name, selected),
175        stroke: true,
176        weight: 1,
177        color: '#3b1659',
178        fill: true,
179        fillOpacity: getOpacity(feature.properties.name),
180        backgroundColor: '##3b1659',
181    };
182}
183
184function setSelectedCountries(selected) {
185    let selectedSlugs = [];
186
187    selected.forEach((selection) => {
188        selectedSlugs.push(selection.text);
189    });
190    if (mapExist) {
191        countries.eachLayer(function(layer) {

192            selectedSlugs.forEach((item) => {
193                if (item === layer.feature.properties.name) {
194                    layer.setStyle({ fillColor: '#f7d420' });
195                }
196            });
197        });
198    }
199}
200
201function getDescription(slug, text) {
202    jQuery('.slideout-wrapper').addClass('show');
203    if (!jQuery('.selected-countries a[data-slug="' + slug + '"]').length) {
204        if (jQuery('.selected-countries').is(':empty')) {
205            jQuery(
206                '<a class="selected" data-slug="' + slug + '">' + text + '</a>',
207            ).appendTo('.selected-countries');
208        } else {
209            jQuery('<a data-slug="' + slug + '">' + text + '</a>').appendTo(
210                '.selected-countries',
211            );
212        }
213    }
214    tabDisplay();
215    var filter = jQuery('#filter');
216    jQuery.ajax({
217        url: filter.attr('action'),
218        data: { action: 'aptn_country_description', slug: slug }, // form data
219        type: 'POST', // POST
220        dataType: 'json',
221        success: function(response) {
222            if (!jQuery('.slideout a[' + response.slug + ']').length) {
223                jQuery('.slideout').append(response.tab);
224            }
225        },
226    });
227}
228
229function unSelectMapDescription(slug, text) {
230    jQuery('.selected-countries [data-slug="' + slug + '"]').remove();
231    jQuery('.slideout #' + slug).remove();
232    tabDisplay();
233    if (mapExist) {
234        selectedFeature.forEach((selection, index) => {
235            if (selection.feature.properties.name === text) {
236                selectedFeature.splice(index, 1);
237            }
238        });
239    }
240
241    if (!jQuery.trim(jQuery('.slideout').html())) {
242        jQuery('.slideout-wrapper').removeClass('show');
243    }
244    if (mapExist) {
245        countries.eachLayer((layer) => {
246            if (text === layer.feature.properties.name) {
247                layer.setStyle({ fillColor: '#ec008c' });
248            }
249        });
250    }
251}
252
253function tabDisplay() {
254    if (1 === jQuery('.selected-countries a').length) {
255        jQuery('.selected-countries').addClass('hide');
256    } else {
257        jQuery('.selected-countries').removeClass('hide');
258    }
259}
260
261function formatState(option) {
262    if (!option.id) {
263        return option.text;
264    }
265    var location = '';
266    let attributes = option.element.attributes;
267    if (typeof attributes.class !== 'undefined') {
268        location = jQuery(
269            '<li class="' + attributes.class.value + '">' + option.text + '</li>',
270        );
271    } else {
272        location = jQuery('<li class="option">' + option.text + '</li>');
273    }
274
275    return location;
276}
277
278function addInfiniteScroll( max_pages ) {
279    // Activate Infinite scroll
280    if ( infiniteScroll ) {
281        var waypoint = new Waypoint({
282            element: jQuery('.load-more-infinite'),
283            handler: function(direction) {
284                getMore();
285            },
286            offset: '80%',
287        })
288        function getMore() {
289            var paged = parseInt( jQuery('input.paged').val() );
290            if ( paged < max_pages && jQuery('#dynamic-posts #nav-links a').length ) {
291                if ( 0 == paged ) {
292                    jQuery('input.paged').val( 2 );
293                } else {
294                jQuery('input.paged').val( paged + 1 );
295                }
296                var filter = jQuery('#filter');
297                jQuery.ajax({
298                    url: filter.attr('action'),
299                    data: filter.serialize(), // form data
300                    type: filter.attr('method'), // POST
301                    dataType: 'json',
302                    success: function(response) { 
303                        jQuery('#dynamic-posts').append(response.posts);
304                        jQuery('.hide-pagination .posts-navigation').hide();
305                        waypoint.enable();
306                        Waypoint.refreshAll();
307                    },
308                });
309            }
310            else {
311                jQuery('.load-more-infinite').addClass('disable');
312                waypoint.disable();
313            }
314        }
315    }
316}
317
318jQuery(document).ready(function() {
319    jQuery('.filter-dropdown select:not(#location)').select2({
320        closeOnSelect: false,
321        width: '100%',
322    });
323    jQuery('.filter-dropdown select#location').select2({
324        closeOnSelect: false,
325        width: '100%',
326        templateResult: formatState,
327    });
328    jQuery('.header-select select').select2({
329        closeOnSelect: true,
330        width: '100px',
331        placeholder: 'Sort by',
332        minimumResultsForSearch: Infinity,
333    });
334
335    jQuery(document).on('click', '.selected-countries a', function(event) {
336        jQuery('.selected-countries a').removeClass('selected');
337        jQuery(this).addClass('selected');
338        var currentTab = jQuery(this).data('slug');
339        jQuery('.tab-item').hide();
340        jQuery('#' + currentTab).show();
341    });
342});
343
344jQuery('.filters-label').click(function() {
345    jQuery(this).toggleClass('show');
346    jQuery(this).parent().next('.taxonomy-filters-wrap').slideToggle();
347});
348
349jQuery('a.reset').click(function(e) {
350    e.preventDefault();
351    jQuery('.filter-dropdown select').val([]).trigger('change');
352    if (mapExist) {
353        countries.eachLayer((layer) => {
354            if (locations.includes(layer.feature.properties.name)) {
355                layer.setStyle({ fillColor: '#ec008c' });
356            }
357        });

358        map.setView(homeView, homeZoom);
359    }
360
361    if ( infiniteScroll ) {
362        jQuery('input.paged').val(0)
363    }
364
365    jQuery('.slideout-wrapper').removeClass('show');
366    jQuery('.slideout').empty();
367    jQuery('.selected-countries').empty();
368    selectedFeature = [];
369    var first = jQuery(location).attr('pathname');
370    jQuery('input.base').val('/' + first.split('/')[1]);
371    var filter = jQuery('#filter');
372
373    jQuery.ajax({
374        url: filter.attr('action'),
375        data: filter.serialize(), // form data
376        type: filter.attr('method'), // POST
377        dataType: 'json',
378        success: function(response) {
379            jQuery('#dynamic-posts').html(response.posts); // insert data
380            addInfiniteScroll( response.max_pages );
381        },
382    });
383});
384
385jQuery('.filter-dropdown select').on('select2:select', function(e) {
386    var data = e.params.data;
387
388    let id = jQuery(this).attr('id');
389
390    if ('location' === id) {
391        getDescription(data.element.dataset.slug, data.text);
392
393        let selected = jQuery(this).select2('data');
394        setSelectedCountries(selected);
395    }
396});
397
398jQuery('#filter select').on('select2:select', function(e) {
399    var filter = jQuery('#filter');
400    jQuery('input.paged').val(1);
401    jQuery.ajax({
402        url: filter.attr('action'),
403        data: filter.serialize(), // form data
404        type: filter.attr('method'), // POST
405        dataType: 'json',
406        beforeSend: function(xhr) {
407            filter.find('status').text('Processing...'); // changing the button label
408        },
409        success: function(response) {
410            jQuery('#dynamic-posts').fadeOut(500, function() {
411                window.history.pushState({}, '', response.link);
412                jQuery('#dynamic-posts').html(response.posts);
413                jQuery(this).fadeIn(500);
414                addInfiniteScroll( response.max_pages );
415            });
416        },
417    });
418});
419
420jQuery(document).ready(function() {
421    jQuery(document).on('click', '#dynamic-posts #nav-links a', function(event) {
422        event.preventDefault();
423        var link = jQuery(this).attr('href');
424        if (link.indexOf('page') !== -1) {
425            var number = link.split('/page/')[1].match(/^\d*/);
426            jQuery('input.paged').val(number[0]);
427        } else {
428            jQuery('input.paged').val(1);
429        }
430
431        var filter = jQuery('#filter');
432        jQuery.ajax({
433            url: filter.attr('action'),
434            data: filter.serialize(), // form data
435            type: filter.attr('method'), // POST
436            dataType: 'json',
437            success: function(response) {
438                jQuery('#loaded-posts-wrapper').fadeOut(500, function() {
439                    window.history.pushState({}, '', link);
440                    jQuery('#dynamic-posts').html(response.posts);
441                    document.querySelector('#dynamic-posts').scrollIntoView({
442                        behavior: 'smooth',
443                    });
444                    jQuery(this).fadeIn(500);
445                });
446            },
447        });
448    });
449});
450
451jQuery('#filter select').on('select2:unselect', function(e) {
452    var data = e.params.data;
453    unSelectMapDescription(data.element.dataset.slug, data.text);
454    var filter = jQuery('#filter');
455    jQuery('input.paged').val(1);
456    jQuery.ajax({
457        url: filter.attr('action'),
458        data: filter.serialize(), // form data
459        type: filter.attr('method'), // POST
460        dataType: 'json',
461        beforeSend: function(xhr) {
462            filter.find('status').text('Processing...'); // changing the button label
463        },
464        success: function(response) {
465            jQuery('#dynamic-posts').fadeOut(500, function() {
466                window.history.pushState({}, '', response.link);
467                jQuery('#dynamic-posts').html(response.posts);
468                jQuery(this).fadeIn(500);
469                addInfiniteScroll( response.max_pages );
470            });
471        },
472    });
473});
474
475jQuery(document).ready(function() {
476    var first = jQuery(location).attr('pathname');
477    // jQuery('input.base').val('/' + first.split('/')[1]);
478    var filter = jQuery('#filter');
479    // console.log(filter);
480    jQuery.ajax({
481        url: filter.attr('action'),
482        data: filter.serialize(), // form data
483        type: filter.attr('method'), // POST
484        dataType: 'json',
485        success: function(response) {
486            jQuery('#dynamic-posts').html(response.posts); // insert data
487            jQuery('.hide-pagination .posts-navigation').hide();
488            addInfiniteScroll( response.max_pages );
489        },
490    });
491});
492
493/**	

494 * Toggles the source for all content fields.
495 */
496jQuery('.aptn-radio-toggle input').change(function() {
497    var first = jQuery(location).attr('pathname');
498    jQuery('input.base').val('/' + first.split('/')[1]);
499    var filter = jQuery('#filter');
500
501    // Add the source values, based on toggle value.
502    addDataToForm('#filter', {
503        'aptn': jQuery(this).val() === 'aptn' ? 'on' : 'off',
504        'other': jQuery(this).val() === 'other' ? 'on' : 'off',
505    });
506
507    jQuery.ajax({
508        url: filter.attr('action'),
509        data: filter.serialize(), // form data
510        type: filter.attr('method'), // POST
511        dataType: 'json',
512        success: function(response) {
513            jQuery('#dynamic-posts').html(response.posts); // insert data
514        },
515    });
516
517    /**
518     * Adds a key and value pair to the form data.
519     * @param {Form} form The form data
520     * @param {object} data Data to add to form.
521     * @returns Form
522     */
523    function addDataToForm(form, data) {
524        if (typeof form === 'string') {
525            if (form[0] === '#') form = form.slice(1);
526            form = document.getElementById(form);
527        }
528
529        var keys = Object.keys(data);
530        var name;
531        var value;
532        var input;
533
534        for (var i = 0; i < keys.length; i++) {
535            name = keys[i];
536            // removing the inputs with the name if already exists [overide]
537            Array.prototype.forEach.call(form.elements, function(input) {
538                if (input.name === name) {
539                    input.parentNode.removeChild(input);
540                }
541            });
542
543            value = data[name];
544            input = document.createElement('input');
545            input.setAttribute('name', name);
546            input.setAttribute('value', value);
547            input.setAttribute('type', 'hidden');
548
549            form.appendChild(input);
550        }
551
552        return form;
553    }
554});