working version of mapchat

Author: mick

README

@@ -1,6 +1,15 @@
 
 
-This is a simple project to show the power of couchdb and NodeJS in handling Geo Data.
+This is a simple project to show the power of CouchDB and Node.js for handling Geo Data.
 
 
-In this chat app you all your messages are tied to a location. 
+Users are shown a map and chatbox. Any chat message they add is added to the map at the 
+location the map is centered on.  Other users can see the map update in real-time.
+
+==== REQUIRES
+
+ - expressjs
+ - cradle
+ - simplegeo (both the libraary and a simplegeo api key)
+ - geojs (a simple geospatial lib for node)
+ - CouchDB (or hosting with iris couch) Needs to include geocouch.

app/client.js

@@ -1,12 +1,18 @@
-HOST = null; // localhost
-PORT = 8012;
-
-var fu = require("./fu"),
+var express = require("express"),
+    app = express.createServer(),
+    cradle = require("cradle"),
     sys = require("sys"),
-    url = require("url"),
-    qs = require("querystring"),
-    geojs = require("../geojs");
+    geojs = require("geojs"),
+    io = require("socket.io"),
+    settings = require("./settings"),
+    SimpleGeo = require("simplegeo-client").SimpleGeo;
+
+var connection = new(cradle.Connection)(settings.COUCHDB_HOST, settings.COUCHDB_PORT, 
+                                        {auth: settings.COUCHDB_AUTH});
+var db = connection.database(settings.COUCHDB_DATABASE);
 
+var sg = new SimpleGeo(settings.SIMPLEGEO_KEY,
+                       settings.SIMPLEGEO_SECRET);
 
 // keep subscriptions.
 //   subscriptions have bounding boxes.
@@ -18,18 +24,7 @@ var subscriptions =  [];
 // callback:<function> or subscription id in socket?
 // messages: [<>] might no be needed if socket io does this form me.
 
-
-
-//On message: check if it is with anyone bounding box (if so send it to them)
-//save it to couchDB, add to message list, and flush message list to calc clustering.
-
-
-
-fu.listen(Number(process.env.PORT || PORT), HOST);
-                
-
-
-socket = fu.socketio()
+socket = io.listen(app);
 
 socket.on('connection', function(client){ 
         sys.puts("new client connect");
@@ -44,28 +39,19 @@ socket.on('connection', function(client){
         client.on('disconnect', function(){ sys.puts("client disconnect"); }) 
     }); 
 
-fu.get("/", fu.staticHandler("index.html"));
-fu.get("/style.css", fu.staticHandler("style.css"));
-fu.get("/client.js", fu.staticHandler("client.js"));
-fu.get("/jquery-1.2.6.min.js", fu.staticHandler("jquery-1.2.6.min.js"));
-
-
-
+app.get('/', function(req, res){                
+        res.render('index.ejs', { layout: false});
+    });
+app.use('/static', express.static(__dirname + '/static')); 
 
 
 mapchat = {
     subscriptions: [],
     subscribe:function(client, msg){
 
-        //does socket it handle client to server json?
-
-
-        bottomlat = msg.bounds[1][0];
-        bottomlon = msg.bounds[1][1];
-
-        toplatlng = new geojs.latLng(msg.bounds[0][0], msg.bounds[0][1]);
-        bottomlatlng = new geojs.latLng(msg.bounds[1][0], msg.bounds[1][1]);
-        bounds = new geojs.bounds(toplatlng, bottomlatlng);
+        bottomlatlng = new geojs.latLng(msg.bounds[0][1], msg.bounds[0][0]);
+        toplatlng = new geojs.latLng(msg.bounds[1][1], msg.bounds[1][0]);
+        bounds = new geojs.bounds(bottomlatlng, toplatlng);
 
         var allReadySubscribed = false;
         for(s in mapchat.subscriptions){
@@ -74,35 +60,115 @@ mapchat = {
 
                 //Set new bounds.
                 mapchat.subscriptions[s].bounds = bounds
-                sys.puts("new bounds set");
                 break;                
             }
         }
         if(!allReadySubscribed){
             mapchat.subscriptions.push({client:client,
                                         bounds:bounds});
-            sys.puts("client with bounds added.");
+            mapchat.sendChatClusters(client);
         }
+        bbox = bounds.toBoundsArray().join(",");
+        db.spatial("geo/recentPoints", {"bbox":bbox},
+            function(er, docs) {
+                if(er){sys.puts("Error: "+sys.inspect(er)); return;}
+                for(d in docs){
+                    client.send({"type":"message", 
+                                "geometry":docs[d].geometry, 
+                                "date":docs[d].value.date,
+                                "message":docs[d].value.message});
+                }
+
+            });
 
     },
     message: function(client, msg){
 
+        // save message to the database
+        msg.date = new Date();
+        db.save(msg, function (err, res) {
+                if(err){sys.puts("error: "+sys.inspect(err));}
+            });
+
         for(s in mapchat.subscriptions){            
             sub = mapchat.subscriptions[s];
 
             //We dont need to send a message to the same client that sent the message.
             if(sub.client.sessionId != client.sessionId){
 
                 //check see if the bounds match.
-                point = new geojs.point(new geojs.latLng(msg.point[0], msg.point[1]));
+                point = new geojs.point(msg.geometry);
                 if(sub.bounds.contains(point)){
-                    sub.client.send({"type":"message", "point":msg.point, "message":msg.message});
+                    sub.client.send({"type":"message", "geometry":msg.geometry, "message":msg.message});
                 }else{
                     sys.puts("not in the box")
                 }
             }
         }
 
-    }
+    },
+    sendChatClusters: function(client){   
+        if(client != undefined){
+            // Send to just the one client
+            client.send({"type":"clusters", "clusters":mapchat.clusters});
+        }else{
+            // Send to all subscriptions
+            for(s in mapchat.subscriptions){
+                sub = mapchat.subscriptions[s];
+                sub.client.send({"type":"clusters", "clusters":mapchat.clusters});
+            }
+        }
+    },
+    getChatClusters: function(){
+        db.spatiallist("geo/proximity-clustering/recentPoints", {"bbox":"-180,-90,180,90", 
+                                                                 "sort":"true",
+                                                                 "limit":"5",
+                                                                 "nopoints":"true"},
+            function(er, docs) {
+                if(er){sys.puts("Error: "+sys.inspect(er));return;}
+
+                var doneFetchingContext = function(docswithcontext){
+                    mapchat.clusters = docswithcontext;
+                    mapchat.sendChatClusters();
+                    setTimeout(mapchat.getChatClusters, (1000*600));
+                }
+                count = docs.length;
+                for(d in docs){
+                    (function(doc){
+                        sg.getContextByLatLng(docs[d].center.coordinates[1], 
+                                              docs[d].center.coordinates[0], 
+                                              function(error,data,res){
+                            var city = "",
+                                state = "",
+                                country = "";
+                            for(f in data.features){
+                                if(data.features[f].classifiers[0].category == "National"){
+                                    country = data.features[f].name.replace("United States of America", "USA");
+                                }else if(data.features[f].classifiers[0].category == "Subnational"){
+                                    state = data.features[f].name;
+                                }else if(data.features[f].classifiers[0].category == "Municipal"){
+                                    city = data.features[f].name;
+                                }else if(data.features[f].classifiers[0].category == "Urban Area"){
+                                    city = data.features[f].name;
+                                }
+                            }
+                            names = [];
+                            if(city != ""){ names.push(city);}
+                            if(state != ""){ names.push(state);}
+                            if(country != ""){ names.push(country);}
+                            doc.locationName = names.join(", ");
+                            count--;
+                            if(count === 0){doneFetchingContext(docs)};
+                        });})(docs[d]);
 
+                }
+
+
+            });
+    }
 };
+
+mapchat.getChatClusters();
+
+
+app.listen(settings.PORT);

app/index.html

@@ -0,0 +1,9 @@
+settings = exports;
+
+settings.SIMPLEGEO_KEY = "PTtBgGeJhmjq3BdB6jMzyQbHURyRGtcT";
+settings.SIMPLEGEO_SECRET = "t2dKATNHTyuJY7w6kexH5rhFNXeyCLza";
+settings.PORT = 8010;
+settings.COUCHDB_HOST = "localhost";
+settings.COUCHDB_PORT = 5984;
+settings.COUCHDB_DATABASE = "mapchat";
+settings.COUCHDB_AUTH = {username:"", password:""};

app/server.js

@@ -0,0 +1,192 @@
+//var socket = new io.Socket("mapchat.im");
+var socket = new io.Socket("localhost");
+var map = null;
+var chatboxes = [];
+socket.connect();
+socket.on('connect', function(){ console.log("connect"); });
+socket.on('message', function(data){ 
+        if(data.type == "message"){
+            chat.recieveMessage(data);
+        }else if(data.type == "clusters"){
+            chat.displayChatClusters(data.clusters);
+        }
+ });
+socket.on('disconnect', function(){ console.log("disconnect"); });
+
+var chat = {
+    sendMessage:function(){
+        chatmsg = $("#message").val()
+        $("#message").val("");
+        var latlon = map.getCenter();
+        var lat = latlon.lat();
+        if(lat > 90){
+            lat -= 180;
+        }
+        var lon = latlon.lng();
+        if(lon > 180){
+            lon -= 360;
+        }
+        var point = {"type":"Point", "coordinates":[lon, lat]};
+        socket.send({action:"message", message:chatmsg,  geometry:point});
+        chat.recieveMessage({message:chatmsg, geometry:point})
+    },
+    recieveMessage:function(data){
+            latlon = new google.maps.LatLng(data.geometry.coordinates[1],data.geometry.coordinates[0]);
+            var chatbox = new ChatOverlay(latlon, data.message, map, "", "", "http://a3.twimg.com/profile_images/1408706495/at-twitter_bigger_normal.png");
+            chatbox.show();
+            chatboxes.push(chatbox);
+    },
+    displayChatClusters: function(clusters){
+        $("div#clusters ul").empty();
+        for(c in clusters){
+            center = [clusters[c].center.coordinates[1], clusters[c].center.coordinates[0]].join(",");
+            image_url = "http://maps.google.com/maps/api/staticmap?center=" + 
+                center + "&zoom=4&size=80x40&sensor=true"
+            $li = $("<li><img src='"+image_url+"' /> <br /> <div class='location'>"+clusters[c].locationName+"</div></li>");
+            $("div#clusters ul").append($li);
+            $li.data("location", center);
+            $li.click(function(e){
+                    lat =$(this).data("location").split(",")[0];
+                    lon = $(this).data("location").split(",")[1];
+                    map.setCenter(new google.maps.LatLng(lat,lon));
+                });
+        }        
+    }
+};
+
+
+$(document).ready(function(){
+        $("#send").click(chat.sendMessage);
+
+        $("textarea#message").keypress(function(e){
+                var code = (e.keyCode ? e.keyCode : e.which);
+                if(code == 13) { //Enter keycode
+                    chat.sendMessage();
+                    return false;
+                }
+            });
+        if(navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function(position) {
+                    initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+                    map.setCenter(initialLocation);
+                });
+        }
+        
+        var myLatlng = new google.maps.LatLng(40.397, -104.644);
+        var myOptions = {
+            zoom: 8,
+            center: myLatlng,
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        map = new google.maps.Map(jQuery("#map")[0], myOptions);
+
+        google.maps.event.addListener(map, 'bounds_changed', function(){
+                var mapbounds = map.getBounds();
+                bounds = [[mapbounds.getSouthWest().lng(),
+                           mapbounds.getSouthWest().lat()],
+                          [mapbounds.getNorthEast().lng(),
+                           mapbounds.getNorthEast().lat()]];
+                socket.send({action:"subscribe", bounds:bounds});
+                for(c in chatboxes){chatboxes[c].setMap(null);}
+                chatboxes = [];
+            });
+    });
+
+
+
+function ChatOverlay(latlon, message, map, name, locationName, profilePic) {
+
+    // Now initialize all properties.
+    this._latlon = latlon;
+    this._map = map;
+    this._message = message;
+    this._name = name;
+    this._locationName = locationName;
+    this._profilePic = profilePic
+
+    // We define a property to hold the image's
+    // div. We'll actually create this div
+    // upon receipt of the add() method so we'll
+    // leave it null for now.
+    this._div = null;
+
+    // Explicitly call setMap() on this overlay
+    this.setMap(map);
+}
+
+ChatOverlay.prototype = new google.maps.OverlayView();
+
+ChatOverlay.prototype.onAdd = function() {
+
+    // Create a new div that we will add to the map.
+    var chatbox = $("<div class='chatmsg'><div>" + //<img src='"+this._profilePic+"' />" +
+                    "<div class='username'>"+this._name+"</div><br />" +
+                    "<div class='locationname'>"+this._locationName+"</div>"+
+                    "</div><div class='spacer'></div>"+
+                    "<div class='message'> "+this._message+"</div></div>");
+    chatbox.css("position", "absolute");
+
+    // This is the reference to our div.
+    this._div = chatbox;
+    // Have to add it to a map pane. in this case the overlay layer.
+    var panes = this.getPanes();
+    panes.overlayLayer.appendChild(chatbox[0]);
+    this._div.fadeIn('fast');
+};
+
+ChatOverlay.prototype.draw = function() {
+
+    //This function is called when the map is redrawn, such as when the use zooms or moves
+
+    // So we can size and position the div we need to get the projection.
+    var overlayProjection = this.getProjection();
+    
+    // We will convert our Lat Lon into a pixel position
+    var point = overlayProjection.fromLatLngToDivPixel(this._latlon);
+    var div = this._div;
+
+    // We dynamically resize the overlay depending on zoom level to make
+    // showing a lot of them not cover as much of the map
+    width = 22 *(this.getMap().getZoom()/16)*10;
+    height = 15 * (this.getMap().getZoom()/16)*10;
+    div.css("width", width+"px");
+    div.css("height", height+"px");
+
+    // Set the poition of the div.
+    div.css("left", point.x-(width/2) + 'px');
+    div.css("top", point.y-height + 'px');
+};
+
+ChatOverlay.prototype.onRemove = function() {
+    this._div.remove();
+    this._div = null;
+};
+ChatOverlay.prototype.hide = function() {
+    if (this._div) {
+        this._div.hide();
+    }
+};
+
+ChatOverlay.prototype.show = function() {
+    if (this._div) {
+        this._div.fadeIn('fast');
+    }
+};
+
+/*ChatOverlay.prototype.toggle = function() {
+    if (this.div_) {
+        if (this.div_.style.visibility == "hidden") {
+            this.show();
+        } else {
+            this.hide();
+        }
+    }
+};
+
+ChatOverlay.prototype.toggleDOM = function() {
+    if (this.getMap()) {
+        this.setMap(null);
+    } else {
+        this.setMap(this.map_);
+    }
+};*/

app/settings.js.dist

@@ -0,0 +1,58 @@
+body{ margin:0px; padding:0px; font-family:arial; font-size:14px;}
+div#content{ width:100%; height:100%;}
+
+div#headerwrapper{ position:absolute; top:0px; left:0px; 
+  z-index:10; width:100%;
+}
+
+div#header{margin:auto; height:75px;width:70%; border: solid 1px #1a1a1a;  border-top:none;
+  border-bottom-right-radius:5px; 
+  border-bottom-left-radius:5px;
+  background:#fff; z-index:10; box-shadow: 5px 5px 5px #666;
+  opacity:0.9;
+}
+
+div#logo{ background:#fff url('/static/map_chat_small.png') no-repeat top left; width:300px; padding:5px; height:60px; margin-left:10px;}
+
+div#footerwrapper{ position:absolute; left:0px; bottom:0px; height:70px;
+  z-index:10; width:100%
+}
+
+div#chatsend{margin:auto; height:69px;width:50%; border: solid 1px #1a1a1a;  border-bottom:none;
+  border-top-right-radius:5px; 
+  border-top-left-radius:5px;
+  background:#fff; z-index:10; box-shadow: 5px 5px 5px #666;
+  opacity:0.9;
+  position:relative;
+
+}
+
+div#chatarea{ margin:5px 80px 5px 10px;}
+div#chatsend textarea{ background-color:#eee; }
+div#send{ width:80px; position:absolute; right:15px; top:5px; width:30px; height:20px; text-align:center;
+  background:#efefef; border-radius:5px; padding:10px; border:solid 1px #333; cursor:pointer;}
+div#send:hover{ background:#ddd;
+}
+
+div#map{ height:100%; width:100%; background:#777; position:absolute; top:0px; left:0px;}
+
+textarea#message{ width:100%; height:60px; border:solid 1px #999; }
+
+div.chatmsg{ border-radius:3px; border:solid 1px #111; background-color: rgba(0,0,0,0.7); color:#fff; 
+             position:absolute; padding:3px; min-height:50px; z-index:15; overflow:hidden; display:none;}
+div.chatmsg img{ max-width:20px; max-height:20px; float:left;}
+div.chatmsg div.username{ float:left; margin-left:2px; font-size:12px; line-height:10px; font-weight:bold;}
+div.chatmsg div.locationname{ float:left; margin-left:2px; font-size:10px; line-height:8px; position:relative; 
+  top:-4px; color:#ccc;}
+
+div.chatmsg div.message{ clear:both font-size:12px; border-top:solid 1px #666; padding-top:3px; line-height:14px; overflow:hidden;}
+
+div.spacer{ clear:both;}
+
+div#clusters{float:left; margin-left:310px; margin-top:5px; }
+div#clusters p{ margin:0px; padding:0px; font-size:12px; font-weight:bold; position:relative; top:-2px;}
+div#clusters ul{margin:0px; padding:0px; }
+div#clusters ul li{float:left; width:80px; border:solid 1px #999; height:50px; 
+  overflow:hidden; margin-right:5px; opacity:0.6; cursor:pointer; border-radius:5px; background:#eee;}
+div#clusters ul li:hover{ opacity:1;}
+div#clusters ul li div.location{font-size:9px; text-align:center;}

app/static/client.js

@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <title>Map Chat</title>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
+    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
+    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
+    <script type="text/javascript" src="/static/client.js"></script>
+    <link rel="stylesheet" type="text/css" href="/static/style.css" />
+  </head>
+  <body>
+    <div id="content">
+      <div id="headerwrapper">
+        <div id="header">
+          <div id="clusters"><p>Recent Conversations</p><ul></ul></div>
+          <div id="logo">
+          </div>
+        </div>
+      </div>
+      <div id="footerwrapper">
+        <div id="chatsend">
+          <div id="chatarea"><textarea id="message"></textarea></div>
+          <div id="send">
+            Send
+          </div>
+        </div>
+      </div>
+      <div id="map"></div>
+    </div>
+  </body>
+</html>