https://dreamingholidays.com/wp-content/plugins/meks-easy-maps/public/js/main-osm.js?ver=2.1.6

1(function($) {
2
3    "use strict";
4
5    var OSM_Maps = {
6
7        settings: {},
8        items: {},
9        markers: [], // array of all markets on the map
10        clusters: L.markerClusterGroup({
11            maxClusterRadius: 60,
12            iconCreateFunction: function (cluster) {                 
13                return L.divIcon({className: 'meks-cluster', html: mks_maps_cluster_icon( cluster._childCount, OSM_Maps.settings.osm_cluster_color ), iconSize: L.point(50, 50) });
14            }
15        }),
16        polylines: [],
17        bounds: {},
18        pinColor: "#FF0000",
19        fittedToContainer: false,
20        lastValidCenter: {},
21        minZoomLevel: 2,
22
23        init: function() {
24            var get_maps = $('.mks-maps');
25            get_maps.each(this.initializeMapEachCallback);
26        },
27
28        initializeMapEachCallback: function() {
29            var $this = $(this);
30
31            OSM_Maps.resetData();
32            OSM_Maps.settings = OSM_Maps.getMapSettings($this);
33            OSM_Maps.items = $this.data('items');
34            OSM_Maps.settings.center = OSM_Maps.getMapCenter();
35            //OSM_Maps.settings.styles = (!mks_maps_empty(OSM_Maps.settings.styles)) ? JSON.parse(OSM_Maps.settings.styles) : [];
36
37            if (mks_maps_empty(OSM_Maps.settings) || mks_maps_empty(OSM_Maps.items)) {
38                console.error('Maps and items must be passed tru map div like this "data-settings" and "data-maps" in json format');
39                return false;
40            }
41            
42            // Map initialization
43            var id = $this.attr('id'),
44                map = L.map(id, {
45                    center: OSM_Maps.settings.center,
46                    zoom: OSM_Maps.settings.zoom,
47                    scrollWheelZoom: false
48                });
49
50            if (mks_maps_empty(map)) {
51                console.error('Maps div not found');
52                return false;
53            }
54
55
56            if ( OSM_Maps.settings.osm_default_map == 'osm' || mks_maps_empty( OSM_Maps.settings.osm_mapbox_token ) ) {
57                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
58                    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
59                }).addTo(map);
60            }
61
62            if ( OSM_Maps.settings.osm_default_map == 'mapbox' && !mks_maps_empty( OSM_Maps.settings.osm_mapbox_token ) ) {
63                L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token='+OSM_Maps.settings.osm_mapbox_token, {
64                    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
65                    maxZoom: 18,
66                    id: 'mapbox/'+ OSM_Maps.settings.osm_mapbox_styles,
67                    tileSize: 512,
68                    zoomOffset: -1,
69                }).addTo(map);
70            }
71    
72            OSM_Maps.printItems(map, OSM_Maps.items, OSM_Maps.afterMapInitialization);
73
74        },
75
76        printItems: function(map, items, doneCallback) {
77
78            $.each(items, function(i, item) {
79
80                if (mks_maps_empty(item.address) || mks_maps_empty(item.latitude) || mks_maps_empty(item.longitude)) {
81                    return true;
82                }
83
84                var markerContent = OSM_Maps.getMarkerContent(item);
85
86                var pinColor = !mks_maps_empty(OSM_Maps.settings.osm_pin_color) ? OSM_Maps.settings.osm_pin_color : pinColor;
87                if (!mks_maps_empty(item.pinColor)) {
88                    pinColor = item.pinColor;
89                }
90                
91                var pinIcon = L.divIcon({className: 'meks-icon-wrapper', html: mks_maps_marker_icon(pinColor) });
92
93
94                if ( ! mks_maps_empty( OSM_Maps.settings.osm_cluster_enable ) ) {
95                    var marker = L.marker([item.latitude, item.longitude ], {
96                        icon: pinIcon,
97                    });
98    
99                    OSM_Maps.markers.push(marker);

100                    OSM_Maps.clusters.addLayer(marker);
101                } else {
102                    OSM_Maps.markers.push([item.latitude, item.longitude ]);
103                    var marker = L.marker([item.latitude, item.longitude ], {
104                        icon: pinIcon,
105                    }).addTo(map);
106                }
107
108
109                if ( !mks_maps_empty(OSM_Maps.settings.osm_print_polylines) && OSM_Maps.settings.osm_polylines_limit >= i ) {
110                    OSM_Maps.polylines.push([item.latitude, item.longitude ]);
111                }
112
113               
114
115                OSM_Maps.printInfoBox(map, marker, markerContent);
116
117            });
118
119            if (typeof doneCallback === 'function') {
120                doneCallback(map);
121            }
122        },
123
124        getMarkerContent: function(item) {
125            var html = '<div class="mks-map-info-box">';
126
127            if (!mks_maps_empty(item.thumbnail)) {
128                html += '<div class="mks-map-entry-image"><a href="' + item.link + '">' + item.thumbnail + '</a></div>';
129            }
130
131            html += '<span class="mks-map-info-box-close"><span class="mks-map-x"></span></span><div class="mks-map-element-pos-abs">';
132
133            if (!mks_maps_empty(OSM_Maps.settings.display.format) && !mks_maps_empty(item.format)) {
134                html += '<div class="mks-map-entry-format">';
135                html += '<div class="mks-map-format-icon">' + item.format + '</div>';
136                html += '</div>';
137            }
138
139            if (!mks_maps_empty(OSM_Maps.settings.display.category) && !mks_maps_empty(item.categories)) {
140                html += '<div class="mks-map-entry-category">' + item.categories + '</div>';
141            }
142
143            html += '<div class="mks-map-entry-header">' +
144                '<h6 class="h6 entry-title"><a href="' + item.link + '">' + item.title + '</a></h6>' +
145                '</div>';
146
147            if (!mks_maps_empty(OSM_Maps.settings.display.meta) && OSM_Maps.settings.display.meta && !mks_maps_empty(item.meta)) {
148                html += '<div class="mks-map-entry-meta">' + item.meta + '</div>';
149            }
150
151            if (!mks_maps_empty(OSM_Maps.settings.display.excerpt) && OSM_Maps.settings.display.excerpt && !mks_maps_empty(item.excerpt)) {
152                html += '<div class="mks-map-entry-content">' + item.excerpt + '</div>';
153            }
154
155            html += '</div>';
156
157            return html;
158        },
159
160        printInfoBox: function(map, marker, markerContent) {
161
162            if ( mks_maps_empty(map) || mks_maps_empty(marker)) {
163                return false;
164            }
165
166            marker.bindPopup(markerContent, {
167                keepInView: true,
168                closeButton: false,
169            });
170
171            $('body').on('click', '.mks-map-info-box-close', function() {
172                marker.closePopup();
173            })
174        },
175
176
177        afterMapInitialization: function(map) {
178
179            if ( ! mks_maps_empty( OSM_Maps.settings.osm_cluster_enable ) ) {
180                map.addLayer(OSM_Maps.clusters);
181                map.fitBounds(OSM_Maps.clusters.getBounds(), {maxZoom: OSM_Maps.settings.zoom });
182            } else {
183                map.fitBounds(OSM_Maps.markers, {maxZoom: OSM_Maps.settings.zoom });
184            }
185
186            if ( ! mks_maps_empty( OSM_Maps.settings.osm_print_pol

186ylines ) ) { 
187                L.polyline( OSM_Maps.polylines, {color: OSM_Maps.settings.osm_cluster_color}).addTo(map);
188            }
189
190            OSM_Maps.bringMapBackInView(map)
191        },
192
193
194        bringMapBackInView: function(map) {
195
196            map.on('popupopen', function() {
197                //set timeout to wait default map panning
198                setTimeout(() => {
199                    OSM_Maps.checkMapBounds(map);
200                }, 200);
201            });
202        },
203
204        checkMapBounds: function(map) {
205            var bounds = map.getBounds();
206            var sLat = bounds.getSouthWest().lat;
207            var nLat = bounds.getNorthEast().lat;
208
209            if (sLat < -85 || nLat > 85) {
210                //the map has gone beyone the world's max or min latitude - gray areas are visible
211                map.setZoom(parseInt(map.getZoom() + 1));
212            }
213        },
214
215
216        getMapSettings: function($elem) {
217            var settings = $elem.data('settings');
218
219            if (!mks_maps_empty(settings.osm_pin_color)) {
220                OSM_Maps.pinColor = settings.osm_pin_color;
221                //delete(settings.osm_pin_color);
222            }
223
224            return settings;
225        },
226
227        getMapCenter: function() {
228            if ( !mks_maps_empty(OSM_Maps.items) ) { 
229                if (!mks_maps_empty(OSM_Maps.items[0].latitude) && !mks_maps_empty(OSM_Maps.items[0].longitude)) {
230                    return [parseFloat(OSM_Maps.items[0].latitude), parseFloat(OSM_Maps.items[0].longitude)];
231                } else {
232                    return [44.787197, 20.457273];
233                }
234            }
235        },
236
237       
238        resetData: function() {
239            OSM_Maps.settings = {};
240            OSM_Maps.items = {};
241            OSM_Maps.markers = [];
242            OSM_Maps.clusters = L.markerClusterGroup({
243                maxClusterRadius: 60,
244                iconCreateFunction: function (cluster) {                 
245                    return L.divIcon({className: 'meks-cluster', html: mks_maps_cluster_icon( cluster._childCount, OSM_Maps.settings.osm_cluster_color ), iconSize: L.point(50, 50) }); 
246                }
247            });
248            OSM_Maps.polylines = [];
249            OSM_Maps.polylines = [];
250            OSM_Maps.bounds = {};
251            OSM_Maps.pinColor = "#FF0000";
252        }
253    };
254
255    window.OSM_Maps = OSM_Maps;
256
257    $(document).ready(function() {
258        OSM_Maps.init();
259    });
260
261
262    // ********** Helpers ************
263
264    // custom marker svg icon
265    function mks_maps_marker_icon(color) {
266        return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="27.668999999999997 14.147 64.662 93.145" style="width:34px; position:relative;top:-40px;left:-12px"><path d="M60,14.147c-17.855,0-32.331,14.475-32.331,32.331C27.669,76.314,60,107.292,60,107.292s32.331-34.111,32.331-60.815  C92.331,28.622,77.855,14.147,60,14.147z M60.001,58.015c-7.4,0-13.398-5.999-13.398-13.398c0-7.399,5.999-13.398,13.398-13.398  c7.399,0,13.397,5.999,13.397,13.398C73.398,52.016,67.4,58.015,60.001,58.015z" fill="' + color + '"/>';
267    }
268
269    // custom cluster svg icon
270    function mks_maps_cluster_icon(count,color) {
271        
272        var rgba_color = mks_maps_hex_to_rgba(color, 0.2);
273        
274        var encoded = window.btoa(
275            '<svg xmlns="http://www.w3.org/2000/svg" width="53" height="52">' +
276            '<circle cx="25" cy="25" r="25" fill="' + rgba_color + '"/>' +
277            '<circle cx="25" cy="25" r="18" fill="' + color + '"/>' +
278            '</svg>');
279
280        return '<div style="background-image: url(&quot;data:image/svg+xml;base64,'+ encoded +'&quot;); background-position:0px 0px; height:50px; line-height:50px; width:50px; text-align:center; cursor:pointer;  color:'+ OSM_Maps.settings.clusterTextColor +'; position:absolute; font-size:'+ OSM_Maps.settings.clusterTextSize +'px; font-family:Arial, sans-serif; font-weight:bold;">'+ count +'</div>'
281
282    }
283
284    // convert hex color to rgba
285    function mks_maps_hex_to_rgba(hex, alpha) {
286        var c;
287        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
288            c = hex.substring(1).split('');
289            if (c.length == 3) {
290                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
291            }
292            c = '0x' + c.join('');
293            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + alpha + ')';
294        }
295        return null;
296    }
297
298    function mks_maps_empty(variable) {
299
300        if (typeof variable === 'undefined') {
301            return true;
302        }
303
304        if (variable === 0 || variable === '0') {
305            return true;
306        }
307
308        if (variable === null) {
309            return true;
310        }
311
312        if (variable.length === 0) {
313            return true;
314        }
315
316        if (variable === "") {
317            return true;
318        }
319
320        if (typeof variable === 'object' && $.isEmptyObject(variable)) {
321            return true;
322        }
323
324        return false;
325    }
326
327})(jQuery);