Project-Thor/index.html at master · steveram/Project-Thor · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Tweet Clustering</title>
  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #cm-example { height: 100% }
  </style>

	<link rel="stylesheet" type="text/css" href="/css/main.css" />
	<script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
    <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type = "text/javascript" src = "/js/mustache.js"></script>
	<script type = "text/javascript" src = "/js/jquery.mustache.js"></script>
	<script type = "text/javascript" src = "/js/templates.js"></script>
	<script type = "text/javascript" src = "/js/utils.js"></script>


    <script type = "text/javascript">
    var swLat, swLng, neLat, neLng, sw, ne, map, clusterer, markers, CloudMadeIcon, FourSquareIcon, CLUSTER_LOCATIONS = [];

    function initialize(){
        var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707', styleId:999});
        map = new CM.Map('cm-example', cloudmade);

            CloudMadeIcon = new CM.Icon();
            CloudMadeIcon.image = "images/tweet.png";
            CloudMadeIcon.iconSize = new CM.Size(32, 32);
            CloudMadeIcon.iconAnchor = new CM.Point(0, 0);

            FourSquareIcon = new CM.Icon();
            FourSquareIcon.image = "images/foursquare.png";
            FourSquareIcon.iconSize = new CM.Size(20, 20);
            FourSquareIcon.iconAnchor = new CM.Point(0, 0);

        if(navigator.geolocation) {
                browserSupportFlag = true;
                navigator.geolocation.getCurrentPosition(function(position) {
                   initialLocation = new CM.LatLng(position.coords.latitude,position.coords.longitude);
                map.setCenter(initialLocation, 10);
                map.addControl(new CM.LargeMapControl());
                map.addControl(new CM.ScaleControl());
                map.addControl(new CM.OverviewMapControl());
                bounds = map.getBounds();
                sw = bounds.getSouthWest();
                ne = bounds.getNorthEast();
            }, function() {

            });
        }

        CM.Event.addListener(map, 'moveend', function(latlng) {
        	jQuery(".popup").remove();
             $(".wml-marker-pane").html("");
             if(clusterer){
                clusterer._clusters = {};
                clusterer.addMarkers([]);
             }
              bounds = map.getBounds();
              sw = bounds.getSouthWest();
              ne = bounds.getNorthEast();
              getHotSpots();
          });
    }


    function getTweet(id, e){
 		var _this = this;
		$.getJSON("/gettweet", {id: id}, function(response){
			var data = response.data[0];
			jQuery(jQuery.mustache(TEMPLATES.Popup, {tweettext: data.text, profile_url:data.image, user: data.user, time: Utils.relativeTime(data.created_at)}))
				.css({position: "absolute", left: e.pageX + "px", top: (e.pageY - 30) + "px", zIndex: 10000})
					.attr("id", id)
						.appendTo("body");

			jQuery(_this).mouseleave(function(e){
				jQuery("#" + id).detach();
			});
		});
    }
    function getHotSpots(){
        markers = [];
        var marker;
        $.get("/hotspots", {swLat: sw.lat(), swLng: sw.lng(), neLat : ne.lat(), neLng: ne.lng()}, function(response){
            for(var i in response.data){

            	marker = getMarker(response.data[i]);
				markers.push(marker);

              }
              clusterer = new CM.MarkerClusterer(map, {clusterRadius: 50});
              clusterer.addMarkers(markers);

              jQuery(".wml-marker").bind("mouseenter", function(e){
              	var id = jQuery(this).attr("title");
              	getTweet.call(this, id, e);
              });
		});
    }

	function getMarker(data){
		var lat = data.loc.lat, lng = data.loc.long;
		return data.checkedin ? new CM.Marker(new CM.LatLng(lat, lng), {icon: FourSquareIcon, title:data.id})
											: new CM.Marker(new CM.LatLng(lat, lng), {icon: CloudMadeIcon, title:data.id})
	}

    </script>
</head>
<body>
<div id="cm-example" style=""></div>
  <script type="text/javascript">
    $(document).ready(function(){
		initialize();
    });
  </script>
</body>
</html>