風向のチャートのコンパスをGPSで動かしたいです。

いつもありがとうございます。

今、Anychart.jsを利用して、風向の画面を作っています。サンプルを利用して、画面は出来たのですが、更に、GPSを取得してコンパスを動かす事は可能でしょうか？アドバイスいただければと思い投稿しました。どうぞよろしくお願いします。

html
1<!doctype html>
2<html>
3    <head>
4        <meta charset="UTF-8">
5     <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
6   
7        <title>Weather Dashboard</title>
8        <style>
9         html, body, #container {
10             width: 100%;
11             height: 100%;
12             margin: 0;
13             padding: 0;
14         }
15        </style>
16    </head>
17    <body>
18        <div id="container"></div>
19        <script type="text/javascript">
20         
21anychart.onDocumentReady(function() {
22    // Create table to place gauges and information
23    layoutTable = anychart.standalones.table(4, 3);
24    layoutTable.hAlign('center')
25            .vAlign('middle')
26            .useHtml(true)
27            .fontSize(16)
28            .cellBorder(null);
29
30    // Set height and width for some cols and rows for layout table
31    layoutTable.getCol(2).width('50%');
32    layoutTable.getRow(0)
33            .height(60)
34            .fontSize(18);
35    layoutTable.getRow(1).height(60);
36    layoutTable.getRow(3)
37            .height(60)
38            .fontSize(14)
39            .vAlign('top');
40
41    // Merge cells in layout table where needed
42    layoutTable.getCell(0, 0).colSpan(3);
43    layoutTable.getCell(1, 0).colSpan(2)
44            .fontColor('#212121')
45            .fontWeight(600);
46		layoutTable.getCell(2, 0).colSpan(3)
47
48    // Put data and charts into the layout table
49    layoutTable.contents([
50        ['The Weather<br/><span style="color:#1976d2; font-size: 16px; font-weight: 300">' +
51        anychart.format.dateTime(new Date(), 'dd MMMM yyyy') + '</span>', null, null],
52        [null, null, null],
53        [drawCircularGauge(305, 6), null, null],
54        [null, null, null]
55    ]);
56
57    // Set container id and initiate drawing
58    layoutTable.container('container');
59    layoutTable.draw();
60
61    
62
63    // Helper function to create circular gauge
64    function drawCircularGauge(direction, force) {
65        var gauge = anychart.gauges.circular();
66        gauge.fill('white')
67                .margin(30)
68                .stroke(null)
69                .tooltip(false);
70        gauge.data([direction]);
71
72        gauge.axis().scale()
73                .minimum(0)
74                .maximum(360)
75                .ticks({interval: 45})
76                .minorTicks({interval: 45});
77        gauge.axis()
78                .startAngle(0)
79                .fill('#CECECE')
80                .width(2)
81                .radius(100)
82                .sweepAngle(360);
83        gauge.axis().ticks()
84                .enabled(true)
85                .length(20)
86                .stroke('2 #CECECE')
87                .position('in')
88                .type(function(path, x, y, radius) {
89                    path.moveTo(x, y - radius / 2).lineTo(x, y + radius / 2).close();
90                    return path;
91                });
92
93        gauge.axis().labels()
94                .fontSize(20)
95                .position('outside')
96                .format(function() {
97                    if (this.value == 0) return 'N';
98                    if (this.value == 45) return 'ne';
99                    if (this.value == 90) return 'E';
100                    if (this.value == 135) return 'se';
101                    if (this.value == 180) return 'S';
102                    if (this.value == 225) return 'sw';
103                    if (this.value == 270) return 'W';
104                    if (this.value == 315) return 'nw';
105                    else return this.value;
106                });
107
108        gauge.needle()
109                .fill('#64b5f6')
110                .stroke('#64b5f6')
111                .startRadius('45%')
112                .middleRadius('5%')
113                .endRadius('-85%')
114                .startWidth('0%')
115                .endWidth('0%')
116                .middleWidth('20%');
117
118        gauge.cap()
119                .radius('30%')
120                .enabled(true)
121                .fill('#fff')
122                .stroke('#CECECE');
123
124        gauge.label()
125                .hAlign('center')
126                .anchor('center')
127                .text(
128                '<span style="color: #212121; font-weight: 600">' + direction + '</span>\u00B0<br>' +
129                '<span style="color: #212121; font-weight: 600">' + force + '</span> m/s').useHtml(true);
130
131        return gauge
132    }
133});
134    
135        </script>
136    </body>
137</html>
138
139