https://www.astegiudiziarie.it/assets/scripts/vuejs/virtualmap.js?rf=bd419854-8d89-4adb-83db-c379c21a1f6b

1const virtualMap = Vue.createApp({
2    data() {
3        return {
4            uffici: null,
5            idSede: null
6        }
7    },
8    mounted() {
9        var _this = this;
10
11        axios.get(BaseUrlWebAPI + 'sediesterne/index?assistenza=false&sedeEsterna=true')
12            .then(function (response) {
13                _this.uffici = response.data;
14                var canvas = document.getElementById("mappaSedi");
15                var ctx = canvas.getContext("2d");
16
17                for (var i = 0; i < _this.filteredUffici.length; i++) {
18
19                    ctx.beginPath();
20                    ctx.arc(_this.filteredUffici[i].coordinataXVirtualMap, _this.filteredUffici[i].coordinataYVirtualMap, 7, 0, 2 * Math.PI);
21                    ctx.fillStyle = "#007aff";
22                    ctx.fill();
23                }
24
25                //ctx.beginPath();
26                //ctx.arc(345, 345, 375, 0, 2 * Math.PI);
27                //ctx.fillStyle = "transparent";
28                //ctx.fill();
29
30                canvas.addEventListener('click', function (event) {
31                    var x = event.pageX - canvas.offsetLeft;
32                    var y = event.pageY - canvas.offsetTop;
33
34                    var sede = _this.filteredUffici.filter(k => _this.pointInCircle(x, y, k.coordinataXVirtualMap, k.coordinataYVirtualMap, 7));
35                    if (sede != null) {
36                        htmlText = '';
37                        for (var i = 0; i < sede.length; i++) {
38                            htmlText += '<p style="font-size: smaller; text-align:left"><strong>Indirizzo</strong>: ' + sede[i].indirizzo;
39                            if (sede[i].telefono != null) htmlText += '<br/><strong>Telefono</strong>: ' + sede[i].telefono;
40                            if (sede[i].email != null) htmlText += '<br/><strong>Email</strong>: ' + sede[i].email;
41                            if (sede[i].orari != null) htmlText += '<br/><strong>Orari</strong>: ' + sede[i].orari;
42                            htmlText += '</p>';
43                        }                        
44
45                        Swal.fire({
46                            title: '<span style="font-size: smaller">' + sede[0].sede + '</span>',
47                            html: htmlText,
48                            confirmButtonColor: '#3857E0'
49                        });
50                    }
51                });
52
53            })
54            .catch(function (error) {
55                console.log(error);
56            });
57    },
58    computed: {
59        filteredUffici: function () {
60            return this.uffici.filter(function (el) {
61                return (el.coordinataXVirtualMap != null);
62            });
63        }
64    },
65    methods: {
66        pointInCircle: function (x, y, cx, cy, radius) {
67            var distancesquared = (x - cx) * (x - cx) + (y - cy) * (y - cy);
68            return distancesquared <= radius * radius;
69        },
70        selectSede: function () {            
71            var sede = this.filteredUffici.find(k => k.idSede == this.idSede);
72            if (sede != null) {
73                htmlText = '<p style="font-size: smaller; text-align:left"><strong>Indirizzo</strong>: ' + sede.indirizzo;
74                if (sede.telefono != null) htmlText += '<br/><strong>Telefono</strong>: ' + sede.telefono;
75                if (sede.email != null) htmlText += '<br/><strong>Email</strong>: ' + sede.email;
76                if (sede.orari != null) htmlText += '<br/><strong>Orari</strong>: ' + sede.orari;
77                htmlText += '</p>';
78
79                Swal.fire({
80                    title: '<span style="font-size: smaller">' + sede.sede + '</span>',
81                    html: htmlText,
82                    confirmButtonColor: '#3857E0'
83                });
84            }
85        }
86    }
87    /* root component options */
88})
89
90virtualMap.mount('#virtualMap');