https://as51540.net/wp-content/plugins/iqonic-extensions/assest/js/widget/iq_map_chart_js.js?ver=1.0.0

1(function(jQuery) {
2
3    "use strict";
4    jQuery(document).ready(function() {
5      if (typeof am4core === "object" && document.getElementById("chartdiv")) {   
6        am4core.ready(function() {
7            // Themes begin
8            am4core.useTheme(am4themes_animated);
9            // Themes end
10
11            // Create map instance
12            var chart = am4core.create("chartdiv", am4maps.MapChart);
13
14            // Set map definition
15            chart.geodata = am4geodata_worldLow;
16
17            // Set projection
18            chart.projection = new am4maps.projections.Miller();
19
20            // Create map polygon series
21            var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
22
23            // Exclude Antartica
24            polygonSeries.exclude = ["AQ"];
25
26            // Make map load polygon (like country names) data from GeoJSON
27            polygonSeries.useGeodata = true;
28
29            // Configure series
30            var polygonTemplate = polygonSeries.mapPolygons.template;
31            //polygonTemplate.tooltipText = "{name}";
32            var map_color = document.getElementById('map_color').value;
33            if (map_color != '') {
34                polygonTemplate.fill = map_color;
35            } else {
36                polygonTemplate.fill = chart.colors.getIndex(0).lighten(0.5);
37            }
38
39            // Add image series
40            var imageSeries = chart.series.push(new am4maps.MapImageSeries());
41            imageSeries.mapImages.template.propertyFields.longitude = "longitude";
42            imageSeries.mapImages.template.propertyFields.latitude = "latitude";
43            var mapdata = document.getElementById('iq-map-data').value;
44
45            //console.log(mapdata);
46
47            imageSeries.data =
48                JSON.parse(mapdata);
49
50            // add events to recalculate map position when the map is moved or zoomed
51            chart.events.on("ready", updateCustomMarkers);
52            chart.events.on("mappositionchanged", updateCustomMarkers);
53
54            // this function will take current images on the map and create HTML elements for them
55            function updateCustomMarkers(event) {
56
57                // go through all of the images
58                imageSeries.mapImages.each(function(image) {
59                    // check if it has corresponding HTML element
60                    if (!image.dummyData || !image.dummyData.externalElement) {
61                        // create onex
62                        image.dummyData = {
63                            externalElement: createCustomMarker(image)
64                        };
65                    }
66
67                    // reposition the element accoridng to coordinates
68                    var xy = chart.geoPointToSVG({
69                        longitude: image.longitude,
70                        latitude: image.latitude
71                    });
72                    image.dummyData.externalElement.style.top = xy.y + 'px';
73                    image.dummyData.externalElement.style.left = xy.x + 'px';
74                });
75
76            }
77
78            // this function creates and returns a new marker element
79            function createCustomMarker(image) {
80
81                var chart = image.dataItem.component.chart;
82                // create holder
83                var holder = document.createElement('div');
84                holder.className = 'map-marker';
85                //holder.title = image.dataItem.dataContext.title;
86
87                //holder.setAttribute('data-original-title',image.dataItem.dataContext.title);
88
89                holder.style.position = 'absolute';
90                var tooltip_image_url = '';
91                if( image.dataItem.dataContext.tooltip_image != undefined) {
92                    tooltip_image_url = image.dataItem.dataContext.tooltip_image['url'];
93                }    
94
95                // maybe add a link to it?
96                if (undefined != image.url) {
97                    holder.onclick = function() {
98                        window.location.href = image.url;
99                    };
100                    holder.className += ' map-clickable';
101                }
102
103                // create dot
104                var dot = document.createElement('div');
105                dot.className = 'dot';
106                var content = `<div class="iq-tooltip-content">
107            <div class="tooltipimg">
108            <img src="` + tooltip_image_url + `"/>
109            </div>
110            <div class="tooltip-title">
111            <` + image.dataItem.dataContext.title_tag + `>` + image.dataItem.dataContext.title + `</` + image.dataItem.dataContext.title_tag + `>
112            </div>`;
113                if (image.dataItem.dataContext.link) {
114                    var linkattr = 'href="' + image.dataItem.dataContext.link['url'] + '"';
115                    if (image.dataItem.dataContext.link['is_external']) {
116                        linkattr += 'target="_blank"';
117                    }
118                    if (image.dataItem.dataContext.link['nofollow']) {
119                        linkattr += 'rel="nofollow"';
120                    }
121
122                    content += `<div class="tooltip-info">
123            <a ` + linkattr + `>` + image.dataItem.dataContext.link_text + `</a>
124            </div>`;
125                }
126                content += `</div>`;
127
128                dot.setAttribute('data-content', content);
129                dot.setAttribute('data-placement', 'top');
130                holder.appendChild(dot);
131
132                // create pulse
133                var pulse = document.createElement('div');
134                pulse.className = 'pulse';
135                holder.appendChild(pulse);
136
137                // append the marker to the map container
138                chart.svgContainer.htmlElement.appendChild(holder);
139
140                return holder;
141            }
142
143        }); // end window.am4core.ready()
144            
145      }  
146        jQuery(".dot").popover({
147                trigger: "manual",
148                html: true,
149                animation: false
150            })
151            .on("mouseenter", function() {
152                var _this = this;
153                jQuery(this).popover("show");
154                jQuery(".popover").on("mouseleave", function() {
155                    jQuery(_this).popover('hide');
156                });
157            }).on("mouseleave", function() {
158                var _this = this;
159                setTimeout(function() {
160                    if (!jQuery(".popover:hover").length) {
161                        jQuery(_this).popover("hide");
162                    }
163                }, 300);
164            });
165
166    });
167})(jQuery);