ishapatel · ishapatel · Sep 25, 2015 · Sep 25, 2015 · Sep 25, 2015 · Sep 25, 2015
diff --git a/app.py b/app.py
@@ -1,24 +1,53 @@
 from flask import Flask
 from flask import render_template
+from flask import request
+from flask import Response
 
 import json
 import time
 import sys
+import random
 
 import pyorient
 
+from Queue import Queue
+
 app = Flask(__name__)
 
+q = Queue()
+
+def event_stream():
+    while True:
+        result = q.get()
+        yield 'data: %s\n\n' % str(result)
+
+@app.route('/eventSource/')
+def sse_source():
+    return Response(
+            event_stream(),
+            mimetype='text/event-stream')
+
 @app.route("/")
 def index():
     return render_template("index.html")
 
 @app.route("/getData/")
 def getData():
+
+	# TRY TO SEND BACK OTHER MESSAGES FROM THE SERVER. 
+	# MAKE SURE THE MESSAGES ARE BEING DISPLAYED ON THE FRONT END.
+	q.put("starting data query...")
+
+	lat1 = str(request.args.get('lat1'))
+	lng1 = str(request.args.get('lng1'))
+	lat2 = str(request.args.get('lat2'))
+	lng2 = str(request.args.get('lng2'))
+
+	print "received coordinates: [" + lat1 + ", " + lat2 + "], [" + lng1 + ", " + lng2 + "]"
 
 	client = pyorient.OrientDB("localhost", 2424)
-	session_id = client.connect("root", "password")
-	db_name = "property_test"
+	session_id = client.connect("root", "R0n+H3rm10n3")
+	db_name = "soufun2"
 	db_username = "admin"
 	db_password = "admin"
 
@@ -28,17 +57,14 @@ def getData():
 	else:
 		print "database [" + db_name + "] does not exist! session ending..."
 		sys.exit()
-
-	lat1 = 22.532498
-	lat2 = 22.552317
-
-	lng1 = 114.044329
-	lng2 = 114.076644
 
 	query = 'SELECT FROM Listing WHERE latitude BETWEEN {} AND {} AND longitude BETWEEN {} AND {}'
 
 	records = client.command(query.format(lat1, lat2, lng1, lng2))
 
+	random.shuffle(records)
+	records = records[:100]
+
 	numListings = len(records)
 	print 'received ' + str(numListings) + ' records'
 
@@ -55,7 +81,9 @@ def getData():
 
 		output["features"].append(feature)
 
+	q.put('idle')
+
 	return json.dumps(output)
 
 if __name__ == "__main__":
-    app.run(host='0.0.0.0',port=5000,debug=True,threaded=True)
+    app.run(host='0.0.0.0',port=5001,debug=True,threaded=True)
diff --git a/templates/index.html b/templates/index.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Flask Demo</title>
+	<title>DMC Web Stack</title>
 	<script type="text/javascript" src="./static/lib/d3.js"></script>
 	<script type="text/javascript" src="./static/lib/leaflet.js"></script>
 	<link rel="stylesheet" href="./static/lib/leaflet.css" />
@@ -9,15 +9,54 @@
 		body {
 		    padding: 0;
 		    margin: 0;
+		    font-family: Helvetica, Arial, sans-serif;
+			font-size: 12px;
+			line-height: 18px;
 		}
 		html, body, #map {
 		    height: 100%;
 		}
 
+		/*EXPERIMENT WITH DIFFERENT STYLING FOR THE CIRCLES AND WHAT HAPPENS WHEN THE MOUSE HOVERS OVER THEM*/
 		circle {
-			fill-opacity: 0;
-			stroke: red;
-			stroke-width: 5px;
+			fill-opacity: 10;
+			fill: yellow;
+			stroke-width: .3px;
+		}
+		circle:hover {
+		  	stroke: white;
+		  	stroke-width: 2px
+		  	stroke-opacity: 50;
+		  	cursor: crosshair;
+		}
+
+		/*EXPERIMENT WITH YOUR OWN STYLING RULES TO CHANGE THE APPEARANCE OF THE TOOLTIP, THE MENU, AND THE MESSAGE TEXT*/
+		div.tooltip{
+			padding: 6px;
+			background: white;
+			visibility: hidden;
+			position: absolute;
+			z-index: 10;
+		}
+		p.tooltip-text{
+			margin: 0px;
+			padding: 0px;
+		}
+
+		div.menu{
+			position: fixed;
+			margin: 0px;
+			padding: 10px;
+			top: 0px;
+			right: 0px;
+			width: 250px;
+			height: 500px;
+			background: rgba(255,255,255,.8);
+		}
+
+		em{
+		  color: red;
+		  font-weight: bold;
 		}
 	</style>
 
@@ -28,8 +67,39 @@
 
 	<div id="map"></div>
 
+	<!-- CHANGE THE STRUCTURE OF THE TOOLTIP TO DISPLAY THE LATITUDE AND LONGITUDE OF EACH POINT. ALSO, YOU COULD TRY TO DISPLAY ANOTHER PIECE OF DATA ABOUT THE POINT, BUT REMEMBER YOU FIRST NEED TO MAKE SURE TO SEND THIS DATA BACK FROM THE SERVER -->
+	<div class="tooltip">
+		<p class="tooltip-text" id="title">This is the title</p>
+		<p class="tooltip-text" id="price">This is the price</p>
+	</div>
+
+	<!-- EXPERIMENT WITH OTHER FORM ELEMENTS, AND ADD SOME TEXT TO THE MENU TO EXPLAIN WHAT IS HAPPENING ON THE SITE -->
+	<div class="menu">
+		<p><h4>DMC Web Stack</h4></p>
+		<form>
+			<p><input id="heatmap" type="checkbox">Heat Map</p>
+			<p><input type="button" value="Update Data" onclick="updateData()"></p>
+			<p>Status: <em id="message"></em></p>
+		</form>
+	</div>
+
+
 	<script type="text/javascript">
 
+		var eventOutputContainer = document.getElementById("message");
+		var eventSrc = new EventSource("/eventSource");
+
+		eventSrc.onmessage = function(e) {
+			console.log(e);
+			eventOutputContainer.innerHTML = e.data;
+		};
+
+		// DON'T FORGET TO CHANGE THIS CODE DEPENDING ON THE DATA YOU'RE DISPLAYING IN YOUR TOOLTIP
+		var tooltip = d3.select("div.tooltip");
+		var tooltip_title = d3.select("#title");
+		var tooltip_price = d3.select("#price");
+
+
 		var map = L.map('map').setView([22.539029, 114.062076], 16);
 
 		//this is the OpenStreetMap tile implementation
@@ -40,11 +110,11 @@
 
 		//uncomment for Mapbox implementation, and supply your own access token
 
-		// L.tileLayer('https://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={accessToken}', {
-		// 	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-		// 	mapid: 'mapbox.light',
-		// 	accessToken: [INSERT YOUR TOKEN HERE!]
-		// }).addTo(map);
+		L.tileLayer('https://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={accessToken}', {
+		 	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+		 	mapid: 'mapbox.light',
+		 	accessToken: ['pk.eyJ1IjoiaXAyMjg2IiwiYSI6ImNpZnI3ZTV1cWtlaXVzNG03YjdrY2pkbmQifQ.liSNOfiiGxYjYNLdv41KeA']
+		 }).addTo(map);
 
 		//create variables to store a reference to svg and g elements
 
@@ -63,44 +133,72 @@
 		var transform = d3.geo.transform({point: projectStream});
 		var path = d3.geo.path().projection(transform);
 
-	  	d3.json("/getData/", function(data) {
+		function updateData(){
+
+			var mapBounds = map.getBounds();
+			var lat1 = mapBounds["_southWest"]["lat"];
+			var lat2 = mapBounds["_northEast"]["lat"];
+			var lng1 = mapBounds["_southWest"]["lng"];
+			var lng2 = mapBounds["_northEast"]["lng"];
+
+			request = "/getData?lat1=" + lat1 + "&lat2=" + lat2 + "&lng1=" + lng1 + "&lng2=" + lng2
+
+			console.log(request);
+
+		  	d3.json(request, function(data) {
+
+				//create placeholder circle geometry and bind it to data
+				var circles = g.selectAll("circle").data(data.features);
 
-			//create placeholder circle geometry and bind it to data
-			var circles = g.selectAll("circle").data(data.features);
+				circles.enter()
+					.append("circle")
+					.on("mouseover", function(d){
+						tooltip.style("visibility", "visible");
+						tooltip_title.text(d.properties.name);
+						tooltip_price.text("Price: " + d.properties.price);
+					})
+					.on("mousemove", function(){
+						tooltip.style("top", (d3.event.pageY-10)+"px")
+						tooltip.style("left",(d3.event.pageX+10)+"px");
+					})
+					.on("mouseout", function(){
+						tooltip.style("visibility", "hidden");
+					})
+				;
 
-			circles.enter()
-				.append("circle")
-			    .attr("r", 10);
+				// function to update the data
+				function update() {
 
-			// function to update the data
-			function update() {
+					// get bounding box of data
+				    var bounds = path.bounds(data),
+				        topLeft = bounds[0],
+				        bottomRight = bounds[1];
 
-				// get bounding box of data
-			    var bounds = path.bounds(data),
-			        topLeft = bounds[0],
-			        bottomRight = bounds[1];
+				    var buffer = 50;
 
-			    var buffer = 50;
+				    // reposition the SVG to cover the features.
+				    svg .attr("width", bottomRight[0] - topLeft[0] + (buffer * 2))
+				        .attr("height", bottomRight[1] - topLeft[1] + (buffer * 2))
+				        .style("left", (topLeft[0] - buffer) + "px")
+				        .style("top", (topLeft[1] - buffer) + "px");
 
-			    // reposition the SVG to cover the features.
-			    svg .attr("width", bottomRight[0] - topLeft[0] + (buffer * 2))
-			        .attr("height", bottomRight[1] - topLeft[1] + (buffer * 2))
-			        .style("left", (topLeft[0] - buffer) + "px")
-			        .style("top", (topLeft[1] - buffer) + "px");
+				    g   .attr("transform", "translate(" + (-topLeft[0] + buffer) + "," + (-topLeft[1] + buffer) + ")");
 
-			    g   .attr("transform", "translate(" + (-topLeft[0] + buffer) + "," + (-topLeft[1] + buffer) + ")");
+				    // update circle position and size
+				    circles
+				    	.attr("cx", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).x; })
+				    	.attr("cy", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).y; })
+		    			.attr("r", function(d) { return Math.pow(d.properties.price,.3); });
+				};
 
-			    // update circle position and size
-			    circles
-			    	.attr("cx", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).x; })
-			    	.attr("cy", function(d) { return projectPoint(d.geometry.coordinates[0], d.geometry.coordinates[1]).y; });
-			};
+				// call function to 
+				update();
+				map.on("viewreset", update);
+			});
 
-			// call function to 
-			update();
-			map.on("viewreset", update);
+		};
 
-		});
+		updateData();
 
 	</script>