metamaps--metamaps/app/views/maps/show.html.erb

<%#
  # @file
  # Code to display a map
  # /maps/:id
  #%>
  
<% content_for :title, @map.name + " | Metamaps" %>

<div id="preloaded-images">
   <img src="/assets/MMCCicon_realtime_blue.png" />
</div>
                                                                                     
                                                                                     
<% if authenticated? %>
  <% if @map.permission == "commons" || @map.user == user %>
      <div class="sidebarSave">
        <div class="sidebarSaveIcon hoverForTip">
          <div class="tip">Save Layout</div>
        </div>
        <div class="sidebarSaveBox"></div>
      </div>
  <% end %>
  <div class="sidebarFork">
    <div class="sidebarForkIcon hoverForTip">
      <div class="tip">Save To New Map</div>
    </div>
    <div class="sidebarForkBox"></div>
  </div>
  <% if @map.permission == "commons" || @map.user == user %>
    <div class="sidebarCollaborate">
      <div class="sidebarCollaborateIcon"></div>
      <div class="sidebarCollaborateBox">
        <h3 class="realtimeBoxTitle">Realtime: </h3>
        <span class="realtimeOnOff rtOff">OFF</span>
        <div class="clearfloat"></div>
        <div class="realtimeMapperList">
            <ul>
                <li class="rtMapper littleRtOff rtMapperSelf">
                    <%= user.name %> (me)
                </li>
            </ul>
        </div>
      </div>
    </div>
  <% end %>
<% end %>
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
  <div class="sidebarFilterIcon"></div>
  <div class="sidebarFilterBox">
    <h3 class="filterByMetacode">Filter By Metacode</h3><span class="showAll">all</span><span class="hideAll">none</span>
    <div class="clearfloat"></div>
    <%= render :partial => 'main/filterbymetacode' %>
  </div>
</div>

<div class="index">
  <div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
  <span><img width="35" height="35" src="/assets/map.png"></span>
  <span class="mapName"><%= @map.name %></span>
  <span class="mapInfo"></span>
  <div class="clearfloat"></div>
  <%= render :partial => 'maps/mapinfobox' %>
</div>

<div class="maps onMap" id="container">
  <div id="center-container">
    <div id="infovis"></div>    
  </div>
  <div class="showcard" id="showcard"></div>
</div>
<div class="clearfloat"></div>

<% if authenticated? %>

  <% # add these if you have edit permissions on the map %>
  <% if @map.permission == "commons" || @map.user == user %>
    
    <% # for creating and pulling in topics and synapses %>
    <%= render :partial => 'newtopic' %>
    <%= render :partial => 'newsynapse' %>

    <% # for saving the layout of the map %>
    <%= form_for @map, :url => savelayout_path(@map), :html => { :class => "saveMapLayout", :id => "saveMapLayout"}, remote: true do |form| %>
	    <%= form.hidden_field "coordinates", :value => "" %>
    <% end %>

  <% end %>

  <% # for populating the change metacode list on the topic card %>
  <%= render :partial => 'main/metacodeoptions' %>
<% end %>


<script>
var dragged = 0;
mapid = <%= @map.id %>; 
<% if (@map.permission == "commons" && authenticated? ) || @map.user == user %>
    mapperm = true; 
<% end %>

viewMode = "graph";
json = <%= @mapjson %>;
if (json.length > 0) {
    $(window).load(function () { 
        <% if (@map.arranged) %>
            initialize("arranged"); 
        <% else %>
            initialize("chaotic");
        <% end %>
    });
} else {
    $(window).load(function () {
        initialize("chaotic", true);
    });
}
    
<% if authenticated? && (@map.permission == "commons" || @map.user == user) %>
// this is for the heroku staging environment
//window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
    
// this is for metamaps.cc
//window.realtime.socket = io.connect('http://metamaps.cc:5001'); 
    
// this is for localhost development    
window.realtime.socket = io.connect('http://localhost:5001'); 

window.realtime.socket.on('connect', function () {
    console.log('socket connected');
    window.realtime.setupSocket();
});
<% end %>
    
</script>