proper star icon

app/assets/javascripts/src/Metamaps.Map.js

@@ -50,8 +50,8 @@ Metamaps.Map = {
     })
 
     $('.starMap').click(function () {
-      if ($(this).text() === 'star') self.star()
-      else self.unstar()
+      if ($(this).is('.starred')) self.unstar()
+      else self.star()
     })
 
     $('.sidebarFork').click(function () {
@@ -147,20 +147,28 @@ Metamaps.Map = {
     if (!Metamaps.Active.Mapper || !Metamaps.Stars) return
     // update the star/unstar icon
     if (Metamaps.Stars.find(function (s) { return s.user_id === Metamaps.Active.Mapper.id })) {
-      $('.starMap').html('unstar')
+      $('.starMap').addClass('starred')
+      $('.starMap .tooltipsAbove').html('Unstar')
     } else {
-      $('.starMap').html('star')
+      $('.starMap').removeClass('starred')
+      $('.starMap .tooltipsAbove').html('Star')
     }
   },
   star: function () {
+    var self = Metamaps.Map
+
     if (!Metamaps.Active.Map) return
     $.post('/maps/' + Metamaps.Active.Map.id + '/star')
-    $('.starMap').html('unstar') 
+    Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id })
+    self.updateStar()
   },
   unstar: function () {
+    var self = Metamaps.Map
+
     if (!Metamaps.Active.Map) return
     $.post('/maps/' + Metamaps.Active.Map.id + '/unstar')
-    $('.starMap').html('star') 
+    Metamaps.Stars = Metamaps.Stars.filter(function (s) { return s.user_id != Metamaps.Active.Mapper.id })
+    self.updateStar()    
   },
   fork: function () {
     Metamaps.GlobalUI.openLightbox('forkmap')

app/assets/stylesheets/clean.css.erb

@@ -334,7 +334,8 @@
     right: 70px;
 }
 .mapPage .openCheatsheet .tooltipsAbove, .topicPage .openCheatsheet .tooltipsAbove {
-    left: 29px;
+  right: 1px;
+  left: auto;
 }
 
 .unauthenticated .homePage .infoAndHelp {
@@ -376,9 +377,18 @@
 	top: 0;
 }
 .starMap {
-  width: auto;
-  padding-right: 8px;
+  background-image: url(<%= asset_data_uri('star.png') %>);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  width: 32px;
 }
+.starMap:hover, .starMap.starred {
+  background-position: 0 -32px;
+}
+.starMap.starred:hover {
+  background-position: 0 0;
+}
+
 .unauthenticated .mapPage .starMap {
   display: none;
 }
@@ -439,7 +449,7 @@
 }
 
 .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips {
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove {
     display: block;
 }
 
@@ -523,6 +533,13 @@
     top: 10px;
 }
 
+.starMap .tooltipsAbove {
+    left: -2px;
+}
+.starMap.starred .tooltipsAbove {
+    left: -8px;
+}
+
 .openCheatsheet .tooltipsAbove {
     left: -4px;
 }
@@ -560,7 +577,7 @@
     right: 37% !important;
 }
 
-.mapInfoIcon div:after, .openCheatsheet div:after {
+.mapInfoIcon div:after, .openCheatsheet div:after, .starMap div:after {
    content: '';
     position: absolute;
     top: 76%;

app/models/user.rb

@@ -79,6 +79,10 @@ class User < ActiveRecord::Base
     end
   end
 
+  def starred_map?(map) 
+    return !!self.stars.index{|s| s.map_id == map.id }
+  end
+
   def settings
     # make sure we always return a UserPreference instance
     self[:settings] = UserPreference.new if self[:settings].nil?

app/views/layouts/_lowermapelements.html.erb

@@ -7,7 +7,11 @@
 
 <div class="infoAndHelp">
 	<%= render :partial => 'maps/mapinfobox' %>
-    <div class="starMap infoElement mapElement">Star</div>
+
+    <% starred = current_user && @map && current_user.starred_map?(@map)
+       starClass = starred ? 'starred' : ''
+       tooltip = starred ? 'Star' : 'Unstar'  %> 
+    <div class="starMap infoElement mapElement <%= starClass %>"><div class="tooltipsAbove"><%= tooltip %></div></div>
     <div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
     <div class="openCheatsheet openLightbox infoElement mapElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
     <div class="clearfloat"></div>