AirQMap_Front_End/index_2.html at test · AirQMap/AirQMap_Front_End · 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
<!DOCTYPE html>
<html>
<head>
    <title>AirQMap</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <style type='text/css'>
    body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}
    </style>
    <script async defer src="http://www.bing.com/api/maps/mapcontrol?key=ArSyAqCFpDbMrF8monFxY9PomZbiBHLhUJ3sFFZeNBLI_b8Rr3J0TUDHSAjkc3AG&callback=loadMapScenario" type="application/javascript">
    </script>
</head>
<body>
    <div id='myMap' style='width: 100vw; height: 100vh;'></div>
    <script type='text/javascript'>
        function loadMapScenario() {
            var map = new Microsoft.Maps.Map('#myMap', {center: new Microsoft.Maps.Location(47.530098, 21.626017), zoom: 15 });
            Microsoft.Maps.loadModule('Microsoft.Maps.DataBinning', async () => {
                var pushpins = new Array();
                await fetch('http://airqmap.divaldo.hu/sql.php').then(
                    resp => (resp.json())
                ).then(
                    resp => {
                        var locations = [];
                        resp.forEach(element => {
                            pushpins.push(
                                new Microsoft.Maps.Pushpin(
                                    new Microsoft.Maps.Location(
                                        element.latitude,
                                        element.longtitude
                                    ),
                                    {
                                        color: getColor(element.temperature),
                                        enableHoverStyle: true
                                    }
                                )
                            );
                        });
                    }
                );
                var layer = new Microsoft.Maps.DataBinningLayer(
                    pushpins,
                    {
                        dataBinType: Microsoft.Maps.DataBinType.circle,
                        radius: 50,
                        distanceUnits: Microsoft.Maps.SpatialMath.DistanceUnits.Meters,
                        polygonOptions: {
                            strokeColor: getColor(50)
                        }
                    }
                );
                console.log('LAYER');

                map.layers.insert(layer);
            });
        }

        // -20 <-> 50
        function getColor(data) {
            data+=20;

            var r = data > 52.5 ?
                255 :
                (data > 35 ?
                    (data - 35) * 14.5714 :
                    0);

            var g = data > 52.5 ?
                Math.abs(data - 70) * 14.5714 :
                data < 17.5 ?
                    data * 14.5714 :
                    255;

            var b = data < 17.5 ?
                255 :
                (data < 35 ?
                    Math.abs(data - 35) * 14.5714 :
                    0);

            return new Microsoft.Maps.Color(1, r, g, b);
        }
    </script>
</body>
</html>