access maps that are live

app/assets/stylesheets/clean.css.erb

@@ -751,6 +751,10 @@
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
     background-position: 0 0;
 }
+.exploreMapsCenter .liveMaps .exploreMapsIcon {
+    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-position: -32px 0;
+}
 .exploreMapsCenter .featuredMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
@@ -774,12 +778,20 @@
 .sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
     background-position: -128px -32px;
 }
+.liveMaps:hover .exploreMapsIcon, .liveMaps.active .exploreMapsIcon {
+    background-position: -32px -32px;
+}
 
 .mapsWrapper {
 	/*overflow-y: auto; */
     padding: 32px 32px 56px 32px;
 }
 
+.noMaps {
+ text-align: center;
+ padding-top: 40px;
+}
+
 /* end explore maps */
 
 /* instructions */

app/controllers/explore_controller.rb

@@ -61,6 +61,15 @@ class ExploreController < ApplicationController
     end
   end
 
+  # GET /explore/live
+  def live
+    @maps = map_scope(Map)
+
+    respond_to do |format|
+      format.html
+    end
+  end
+
   # GET /explore/mapper/:id
   def mapper
     @user = User.find(params[:id])

app/controllers/maps_controller.rb

@@ -71,7 +71,7 @@ class MapsController < ApplicationController
       end
     end
   end
-
+  
   # DELETE maps/:id
   def destroy
     @map.delete

app/views/maps/livemaps.html.erb

@@ -0,0 +1,12 @@
+<% #
+   # @file
+   # Shows a list of current user's maps
+   # GET /explore/mine(.:format)
+   # %>
+
+<script>
+  Metamaps.currentSection = "explore";
+  Metamaps.currentPage = "live";
+  <% content_for :title, "Explore Live Maps | Metamaps" %>
+  <% content_for :mobile_title, "Live Maps" %>
+</script>

config/routes.rb

@@ -11,6 +11,7 @@ Metamaps::Application.routes.draw do
     get 'mine'
     get 'shared'
     get 'starred'
+    get 'live'
     get 'mapper/:id', action: 'mapper'
   end
 

frontend/src/Metamaps/GlobalUI/index.js

@@ -54,6 +54,7 @@ const GlobalUI = {
     Metamaps.Maps.Mapper = new Metamaps.Backbone.MapsCollection(mapperCollection, mapperOptionsObj)
     Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, { id: 'featured', sortBy: 'updated_at' })
     Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, { id: 'active', sortBy: 'updated_at' })
+    Metamaps.Maps.Live = new Metamaps.Backbone.MapsCollection([], { id: 'live', sortBy: 'name' })
   },
   showDiv: function (selector) {
     $(selector).show()

frontend/src/Metamaps/Realtime.js

@@ -48,6 +48,7 @@ const Realtime = {
       console.log('connected')
       if (!self.disconnected) {
         self.startActiveMap()
+        self.subscribeToLiveMaps()
       } else self.disconnected = false
     })
     self.socket.on('disconnect', function () {
@@ -101,6 +102,21 @@ const Realtime = {
       $('body').prepend(self.room.chat.$container)
     } // if Active.Mapper
   },
+  subscribeToLiveMaps: function () {
+    var self = Metamaps.Realtime
+    // Handles livemaps array on the UI
+    self.socket.emit('requestLiveMaps')
+    self.socket.on('receiveLiveMaps', function (maps) {
+      Metamaps.Maps.Live.add(maps)
+    })
+    self.socket.on('map_went_live', function (map) {
+      Metamaps.Maps.Live.add(map)
+    })
+    self.socket.on('map_no_longer_live', function (data) {
+      var map = Metamaps.Maps.Live.get(data.id)
+      Metamaps.Maps.Live.remove(map)
+    })
+  },
   addJuntoListeners: function () {
     var self = Realtime
 
@@ -488,6 +504,7 @@ const Realtime = {
       username: Active.Mapper.get('name'),
       userimage: Active.Mapper.get('image'),
       mapid: Active.Map.id
+      map: Active.Map.attributes
     })
 
     socket.on(myId + '-' + Active.Map.id + '-invitedToCall', self.invitedToCall) // new call

frontend/src/Metamaps/Router.js

@@ -84,7 +84,8 @@ const _Router = Backbone.Router.extend({
     // either 'featured', 'mapper', or 'active'
     var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
 
-    if (section === 'shared' || section === 'featured' || section === 'active' || section === 'starred') {
+    const sections = ['shared', 'featured', 'active', 'starred', 'live']
+    if (sections.indexOf(section) !== -1) {
       document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
     } else if (section === 'mapper') {
       $.ajax({
@@ -131,7 +132,7 @@ const _Router = Backbone.Router.extend({
     var navigateTimeout = function () {
       self.timeoutId = setTimeout(navigate, 300)
     }
-    if (Metamaps.Maps[capitalize].length === 0) {
+    if (section !== 'live' && Metamaps.Maps[capitalize].length === 0) {
       Metamaps.Loading.show()
       setTimeout(function () {
         Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render

frontend/src/components/Header.js

@@ -28,7 +28,7 @@ class Header extends Component {
       return forClass
     }
 
-    const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured"
+    const explore = ["mine", "active", "starred", "shared", "featured", "live"].includes(section)
     const mapper = section == "mapper"
 
     return (
@@ -67,6 +67,13 @@ class Header extends Component {
                 text="Featured Maps"
               />
 
+              <MapLink show={explore}
+                href="/explore/live"
+                linkClass={activeClass("live")}
+                data-router="true"
+                text="Live Maps"
+              />
+        
               {mapper ? (
                 <div className='exploreMapsButton active mapperButton'>
                   <img className='exploreMapperImage' width='24' height='24' src={this.props.user.image} />

frontend/src/components/Maps.js

@@ -9,7 +9,10 @@ class Maps extends Component {
     const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
     let mapElements
 
-    if (displayStyle == 'grid') {
+    if (maps.models.length === 0) {
+      mapElements = <div className='noMaps'>There are no maps to see here.</div>
+    }
+    else if (displayStyle == 'grid') {
       mapElements = maps.models.map(function (map) {
         return <MapCard key={ map.id } map={ map } currentUser={ currentUser } />
       })
@@ -28,7 +31,7 @@ class Maps extends Component {
             { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
             { mapElements }
             <div className='clearfloat'></div>
-            { moreToLoad ? 
+            { moreToLoad && section !== 'live' ? 
                 [<button className="button loadMore" onClick={ loadMore }>load more</button>, <div className='clearfloat'></div>]
                 : null }
           </div>

realtime/realtime-server.js

@@ -3,14 +3,19 @@ var
   signalServer = require('./signal'),
   stunservers = [{"url": "stun:stun.l.google.com:19302"}];
 
-io.set('log', false);
+//io.set('log', false);
 
 function start() {
+    var livemaps = {}
 
     signalServer(io, stunservers);
 
     io.on('connection', function (socket) {
-
+        
+        socket.on('requestLiveMaps', function () {
+            var maps = Object.keys(livemaps).map(function(key) { return livemaps[key] })
+            socket.emit('receiveLiveMaps', maps)
+        })
         // this will ping a new person with awareness of who's already on the map
         socket.on('updateNewMapperList', function (data) {
             var existingUser = {
@@ -56,6 +61,16 @@ function start() {
 
         // this will ping everyone on a map that there's a person just joined the map
         socket.on('newMapperNotify', function (data) {
+            
+            if (!livemaps[data.mapid] && data.map.permission === 'commons') {
+                livemaps[data.mapid] = data.map // { name: '', desc: '', numTopics: '' }
+                livemaps[data.mapid].mapper_count = 1
+                io.sockets.emit('map_went_live', livemaps[data.mapid])
+            }
+            else if (data.map.permission === 'commons') {
+                livemaps[data.mapid].mapper_count++
+            }
+            
             socket.set('mapid', data.mapid);
             socket.set('userid', data.userid);
             socket.set('username', data.username);
@@ -70,6 +85,7 @@ function start() {
         });
 
         var end = function () {
+            
             var socketUserName, socketUserID;
             socket.get('userid', function (err, id) {
                 socketUserID = id;
@@ -82,6 +98,13 @@ function start() {
                 userid: socketUserID
             };
             socket.get('mapid', function (err, mapid) {
+                if (livemaps[mapid] && livemaps[mapid].mapper_count == 1) {
+                    delete livemaps[mapid]
+                    io.sockets.emit('map_no_longer_live', { id: mapid })
+                }
+                else if (livemaps[mapid]) {
+                    livemaps[mapid].mapper_count--
+                }
                 socket.broadcast.emit('maps-' + mapid + '-lostmapper', data);
             });
         };