Add share control

css/mapbox.share.css

@@ -0,0 +1,112 @@
+/* ### General control styles ### */
+ .map-share div,
+ .map-share .twitter,
+ .map-share .facebook {
+  display:block;
+  position:absolute;
+  border:1px solid #ccc;
+  background:#fff;
+  border-radius:3px;
+  -moz-border-radius:3px;
+  -webkit-border-radius:3px;
+  box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+  -moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+  -webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+  }
+
+/* ### Zoomer, close buttons, share ### */
+ .map-share .close {
+  position: absolute;
+  text-indent:-9999px;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAeCAYAAADO4udXAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHFSURBVHic7dpBbsIwEAXQoZpbwKKz8Bm66EFyjUicI1KuwUF6Ci/cBbmFJbqoLbluJezgMSn8JyGhJMRAvmZiw+5yuRBAay/3fgPwmBAsUIFggQoEC1QgWKACwQIVCBaoQLCgiIiMIjKWHo9gbVy4oJ/po9e42fPiUBERcemBxpiD935i5qO19ly6rzUR+SAics69a46zFc65WUSIKi9sA2MYN449O+fm0hcXVyzv/UREb977kzHmELeHUJ3Cvqn0fDfYhwfoi5WqKlREFRWLmY8hQPsQroGIKG4jooWZjzWDw3VJG4oXtnflWqU4WNbaszFmSMMVdsVQDdpt8NmkoYoVI2lPPY0iQjVVa1f774ak9cV2pBqqcE91rfUtre+57jGuiIxJgFa3oS0orljQxU03zGv8NeNzzr3eet6qipVVqyVs7toK43S7xYffmmwpoVulysPV4rstnhXmoWLmgZkH+g7YPp8twnOrXW74UZ2stecsXD2WG55F1Ur3Wtmss1mFrF1u+LUImswWp07LDcv1Q/6n3u1dc9ZZPSuExxErosa9HIIFKvAjNKhAsEAFggUqECxQgWCBCgQLVCBYoALBAhVfpi7sxwlEhWYAAAAASUVORK5CYII=);
+  background-repeat:no-repeat;
+  overflow:hidden;
+  background-position:-6px -6px;
+  top:4px;
+  right:4px;
+  width:18px;
+  height:18px;
+  }
+
+ .map-share .close:active {
+  border-color:#bbb;
+  background-color:#ddd;
+  box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+  -moz-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+  -webkit-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+  }
+
+ .share {
+  clear:left;
+  left:10px;
+  top:10px;
+  width:57px;
+  height:18px;
+  font:bold 10px/18px Arial,sans-serif;
+  text-align:center;
+  text-transform:uppercase;
+  background:#333;
+  background:rgba(32,32,32,0.75);
+  border-color:#666;
+  border-color:rgba(128,128,128,0.75);
+  border-radius: 3px;
+  color:#fff;
+  position: absolute;
+  left: 11px;
+  top: 45px;
+  }
+
+
+/* ### Share ### */
+ .map-share {
+  background:#666;
+  background:rgba(32,32,32,0.75);
+  position:absolute;
+  width:100%;
+  height:100%;
+  top:0px; left:0px; right:0px; bottom:0px;
+  z-index:999999;
+  }
+
+ .map-share div {
+  right:50%;
+  top:50%;
+  margin:-120px -180px 0px 0px;
+  padding:19px;
+  width:320px;
+  height:200px;
+  overflow:hidden;
+  }
+
+ .map-share small { color:#999; }
+
+ .map-share textarea {
+  display:block;
+  font:normal 10px/15px Arial,sans-serif;
+  resize:none;
+  border:1px solid #ccc;
+  padding:4px;
+  width:310px;
+  }
+
+ .map-share .twitter,
+ .map-share .facebook {
+  display:inline-block;
+  position:relative;
+  padding:2px 18px;
+  margin-right:10px;
+  background:#fff;
+  color:#fff;
+  font-weight:bold;
+  border:2px solid #ccc;
+  }
+
+ .map-share .twitter {
+  background:#0ac;
+  border-color:#4ce;
+  }
+
+ .map-share .facebook {
+  background:#359;
+  border-color:#68c;
+  }

ext/mapbox.share.js

@@ -0,0 +1,95 @@
+if (typeof mapbox === 'undefined') mapbox = {};
+
+mapbox.share = function() {
+    var share = {};
+
+    tj = {};
+    var l = window.location;
+    tj.webpage = l.href;
+    tj.embed = (l.hash) ? l.href + '?embed' : l.href + '#/?embed';
+
+    var link = document.createElement('a');
+    var close = document.createElement('a');
+    var embed = document.createElement('textarea');
+    var share = document.createElement('div');
+    var popup = document.createElement('div');
+    var elements = [link, close, embed, share, popup];
+
+    for (var i = 0; i < elements.length; i++) {
+        MM.addEvent(elements[i], 'mousedown', MM.cancelEvent);
+        MM.addEvent(elements[i], 'dblclick', MM.cancelEvent);
+    }
+
+    link.innerHTML = 'Share +';
+    link.href = '#';
+    link.className = 'share';
+    link.onclick = link.ontouchstart = function() {
+        popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
+        $('body').toggleClass('sharing');
+        return false;
+    };
+
+    close.innerHTML = 'Close';
+    close.href = '#';
+    close.className = 'close';
+    close.onclick = close.ontouchstart = function() {
+        popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
+        $('body').toggleClass('sharing');
+        return false;
+    };
+
+    embed.className = 'embed';
+    embed.rows = 4;
+    embed.setAttribute('readonly', 'readonly');
+    embed.value = '<iframe width="500" height="300" frameBorder="0" src="{{embed}}"></iframe>'
+        .replace('{{embed}}', tj.embed);
+    embed.onclick = function() {
+        embed.focus();
+        embed.select();
+        return false;
+    };
+
+    var twitter = 'http://twitter.com/intent/tweet?status='
+        + encodeURIComponent(document.title + ' (' + tj.webpage + ')');
+    var facebook = 'https://www.facebook.com/sharer.php?u='
+        + encodeURIComponent(tj.webpage)
+        + '&t=' + encodeURIComponent(document.title);
+    share.innerHTML = ('<h3>Share this map</h3>'
+        + '<p><a class="facebook" target="_blank" href="{{facebook}}">Facebook</a>'
+        + '<a class="twitter" target="_blank" href="{{twitter}}">Twitter</a></p>')
+        .replace('{{twitter}}', twitter)
+        .replace('{{facebook}}', facebook);
+    share.innerHTML += '<strong>Get the embed code</strong><br />'
+    share.innerHTML += '<small>Copy and paste this HTML into your website or blog.</small>';
+    share.appendChild(embed);
+    share.appendChild(close);
+
+    popup.className = 'map-share';
+    popup.style.display = 'none';
+    popup.appendChild(share);
+
+    share.map = function(x) {
+        if (!x) return map;
+        map = x;
+        return this;
+    };
+
+    share.add = function() {
+        this.appendTo($('body')[0]);
+        return this;
+    };
+
+    share.remove = function() {
+        $(link).remove();
+        $(popup).remove();
+        return this;
+    };
+
+    share.appendTo = function(elem) {
+        wax.u.$(elem).appendChild(link);
+        wax.u.$(elem).appendChild(popup);
+        return this;
+    };
+
+    return share;
+};

index.html

@@ -6,11 +6,13 @@
     <link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css" type="text/css" />
     <link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
     <link rel="stylesheet" href="css/style.css" type="text/css" />
+    <link rel="stylesheet" href="css/mapbox.share.css" type="text/css" />
     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
 
     <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.uncompressed.js'></script>
     <script src="ext/jquery.min.js"></script>
     <script src="ext/underscore.min.js"></script>
+    <script src="ext/mapbox.share.js"></script>
     <script src="tweetRace.js"></script>
 </head>
 <body>
@@ -58,6 +60,9 @@ <h2>About this Site</h2>
 
             map.setZoomRange(2, 15);
             tweetRace.start(map);
+
+            // Add share control
+            mapbox.share().map(map).add();
         });
 
     </script>