avoid prompt

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

@@ -129,6 +129,7 @@ Metamaps.Backbone.Map = Backbone.Model.extend({
       this.updateMapWrapper()
       // mobile menu
       $('#header_content').html(this.get('name'))
+      document.title = this.get('name') + ' | Metamaps'
     }
   },
   updateMapWrapper: function () {

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

@@ -443,17 +443,7 @@ Metamaps.Map.InfoBox = {
     var querystring = window.location.search.replace(/^\?/, '')
     if (querystring == 'new') { 
       self.open()
-      window.setTimeout(self.requestMapTitle, 3000)
-    }
-  },
-  requestMapTitle: function () {
-    var t = prompt('Please enter a name for your map. You can also set it any time using the map info panel.')
- 
-    if (t) {
-      Metamaps.Active.Map.set('name', t)
-      Metamaps.Active.Map.save()
-      $('#mapInfoName span').text(t)
-      document.title = t + ' | Metamaps'
+      $('.mapInfoBox').addClass('mapRequestTitle')
     }
   },
   toggleBox: function (event) {
@@ -554,6 +544,8 @@ Metamaps.Map.InfoBox = {
       Metamaps.Active.Map.trigger('saved')
       // mobile menu
       $('#header_content').html(name)
+      $('.mapInfoBox').removeClass('mapRequestTitle')
+      document.title = name + ' | Metamaps'
     })
 
     $('.mapInfoDesc .best_in_place_desc').unbind('ajax:success').bind('ajax:success', function () {
@@ -664,6 +656,7 @@ Metamaps.Map.InfoBox = {
    $('.collaboratorSearchField').typeahead('val', '')
   },
   updateNameDescPerm: function (name, desc, perm) {
+    $('.mapInfoBox').removeClass('mapRequestTitle')
     $('.mapInfoName .best_in_place_name').html(name)
     $('.mapInfoDesc .best_in_place_desc').html(desc)
     $('.mapInfoBox .mapPermission').removeClass('commons public private').addClass(perm)

app/assets/stylesheets/application.css.erb

@@ -1522,6 +1522,39 @@ h3.filterBox {
     text-align: center;
     box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
 }
+.requestTitle {
+    display: none;
+    position: absolute;
+    background: black;
+    text-align: center;
+    text-transform: none;
+    color: white;
+    border-radius: 2px;
+    font-family: din-regular;
+    line-height: 18px;
+    font-size: 15px;
+    padding: 3px 5px 2px;
+    white-space: nowrap;
+    font-style: normal;
+    left: 50%;
+    margin-left: -100px;
+    top: -15px;
+}
+.mapRequestTitle .requestTitle {
+    display: block;
+}
+.requestTitle:after {
+    content: '';
+    position: absolute;
+    top: 23px;
+    left: 50%;
+    margin-left: -8px;
+    width: 0;
+    height: 0;
+    border-top: 10px solid #000000;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+}
 .mapInfoName {
     font-size: 18px;
     line-height: 20px;

app/views/layouts/_templates.html.erb

@@ -6,6 +6,7 @@
 <div class="templates">
     
     <script type="text/template" id="mapInfoBoxTemplate">
+  <div class="requestTitle">Click here to name this map!</div>
   <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
   
   <div class="mapInfoStat">

app/views/maps/_mapinfobox.html.erb

@@ -6,6 +6,12 @@
   <%= @map && @map.user == user ? " yourMap" : "" %>
   <%= @map && policy(@map).update? ? " canEdit" : "" %>
   <%= @map && @map.permission != 'private' ? " shareable" : "" %>">
+
+  <% if current_user %>
+    <div class="requestTitle">
+      Click here to name this map!
+    </div>
+  <% end %>
   
   <% if @map %>
   <div class="mapInfoName" id="mapInfoName">