stone-utils/map.html at master · Bitshifting/stone-utils · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Stone map</title>

        <script src="jquery-2.1.0.min.js"></script>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                height: 100%; margin: 0; padding: 0;
            }

            #map-canvas {
                height: 100%;
            }
        </style>

        <script type="text/javascript"
              src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO-r9oH2ffLHKxlrXAYa7OPVUYF0OBxQg&sensor=false">
        </script>


        <script type="text/javascript">
            //Google Maps init
            var map;

            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(43.072233,-89.409233), zoom: 8
                };
                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                loadStones();
            }


            google.maps.event.addDomListener(window, 'load', initialize);


            //Load stones from the Stone API
//            $(document).ready(function() {
            function genRatingHTML(rating) {
                return '<span style="color: ' + (rating > 0 ? 'green;">+' : rating < 0 ? 'red;">' : 'inherit; display: none;">') + rating + '</span>';
            }

            function loadStones() {
                $.ajax( {
                    url: "http://riptide.alexkersten.com:3333/stoneapi/message/get/0/0/1000000000",
                    jsonpCallback: "readyCallback", //Dummy callback. Necessary?
                    dataType: "jsonp",
                    success: function (data) {
                        //Result is JSONP, so evaluate to get a JSON object returned.
                        data = eval('(' + data + ')');

                        $.each(data, function(i, item) {
                            //Add each item to the map.
                            var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(item.lat, item.lon),
                                map: map,
                                title: item.username,

                            });
                            var infowindow = new google.maps.InfoWindow({
                                content: item.message + '<br /><span style="opacity: 0.8; font-size: 0.75em;">' + genRatingHTML(item.rating) + ' by ' + item.username
                            });
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(map, marker);
                            });
                        });
                     }
                });
            }
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>