location-based-ar-tutorial-first/script.js at master · waheed11/location-based-ar-tutorial-first · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
window.onload = () => {
    let places = staticLoadPlaces();
    renderPlaces(places);
    const button = document.querySelector('button[data-action="change"]');
    button.innerText = '﹖';

};

function staticLoadPlaces() {
   return [
       {
           name: 'edge1',
           location: {
               lat: 21.360474,
               lng: 39.663316,
           }
       },
       {
        name: 'edge2',
        location: {
            lat: 21.361217,
            lng: 39.663846,
        }
    },
    {
        name: 'edge3',
        location: {
            lat: 21.361996,
            lng: 39.664339,
        }
    },
    {
        name: 'edge4',
        location: {
            lat: 21.362836,
            lng: 39.665026,
        }
    },
    {
        name: 'edge5',
        location: {
            lat: 21.363515,
            lng: 39.665884,
        }
    },
    {
     name: 'edge6',
     location: {
         lat: 21.363927,
         lng: 39.666657,
     }
 },
 {
     name: 'edge7',
     location: {
         lat: 21.364266,
         lng: 39.667600,
     }
 },
 {
     name: 'edge8',
     location: {
         lat: 21.364606,
         lng: 39.669767,
     }
 },
 {
    name: 'testSound',
    location: {
        lat: 21.376414,
        lng: 39.788172,
    }
}
   ];
}

function renderPlaces(places) {
   let scene = document.querySelector('a-scene');

   places.forEach((place) => {
       let latitude = place.location.lat;
       let longitude = place.location.lng;

       let model = document.createElement('a-image');
       model.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude};`);
       model.setAttribute('src', './assets/map-marker.png');
      // model.setAttribute('name', place.name);
      // model.setAttribute('rotation', '0 180 0');
     //  model.setAttribute('animation-mixer', '');
      // model.setAttribute('scale', '200, 200');
      model.setAttribute('width', '10');
      model.setAttribute('height', '10');
       model.addEventListener('loaded', () => {
           window.dispatchEvent(new CustomEvent('gps-entity-place-loaded'))
       });

       scene.appendChild(model);
   });
}