From 438e8be102a2ac4c0e92041da2866f1339715b40 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 10 Jul 2013 11:52:33 -0700
Subject: [PATCH 01/27] Reorganize share/export UI

"Image" and "Embeddable HTML" options move to share control.
Only XML export remains, and is now accessed via a sidebar
link rather than the tab bar.
---
 app/assets/javascripts/index/export.js  | 229 +----------------------
 app/assets/javascripts/leaflet.share.js | 235 +++++++++++++++++++++++-
 app/assets/stylesheets/common.css.scss  |  27 ++-
 app/views/export/start.html.erb         |  51 +----
 app/views/layouts/site.html.erb         |  17 +-
 app/views/site/_sidebar.html.erb        |   1 +
 config/locales/en.yml                   |  14 +-
 7 files changed, 276 insertions(+), 298 deletions(-)

diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js
index 47830f8bee..aec35ed2b1 100644
--- a/app/assets/javascripts/index/export.js
+++ b/app/assets/javascripts/index/export.js
@@ -1,61 +1,32 @@
 function initializeExport(map) {
-  $("#exportanchor").click(function (e) {
-    $.ajax({ url: $(this).data('url'), success: function (sidebarHtml) {
-      startExport(sidebarHtml);
-    }});
-    e.preventDefault();
-  });
-
   if (window.location.pathname == "/export") {
-    $("#exportanchor").click();
+    startExport();
   }
 
-  function startExport(sidebarHtml) {
-    var marker;
-
+  function startExport() {
     var locationFilter = new L.LocationFilter({
       enableButton: false,
       adjustButton: false
     }).addTo(map);
 
-    locationFilter.on("change", filterChanged);
+    locationFilter.on("change", update);
 
-    map.on("moveend", mapMoved);
-    map.on("baselayerchange", htmlUrlChanged);
+    map.on("moveend", update);
 
     $("#sidebar_title").html(I18n.t('export.start_rjs.export'));
-    $("#sidebar_content").html(sidebarHtml);
 
     $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
 
     $("#drag_box").click(enableFilter);
 
-    $("#add_marker").click(startMarker);
-
-    $("#format_osm,#format_mapnik,#format_html").click(formatChanged);
-
-    $("#mapnik_scale").change(mapnikSizeChanged);
-
     openSidebar();
 
-    if (map.getMapBaseLayerId() == "mapnik") {
-      $("#format_mapnik").prop("checked", true);
-    }
-
     setBounds(map.getBounds());
-    formatChanged();
-
-    $("body").removeClass("site-index").addClass("site-export");
 
     $("#sidebar").one("closed", function () {
-      $("body").removeClass("site-export").addClass("site-index");
-
       map.removeLayer(locationFilter);
-      clearMarker();
-
-      map.off("moveend", mapMoved);
-      map.off("baselayerchange", htmlUrlChanged);
-      locationFilter.off("change", filterChanged);
+      map.off("moveend", update);
+      locationFilter.off("change", update);
     });
 
     function getBounds() {
@@ -63,22 +34,6 @@ function initializeExport(map) {
                             L.latLng($("#maxlat").val(), $("#maxlon").val()));
     }
 
-    function getScale() {
-      var bounds = map.getBounds(),
-        centerLat = bounds.getCenter().lat,
-        halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
-        meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
-        pixelsPerMeter = map.getSize().x / meters,
-        metersPerPixel = 1 / (92 * 39.3701);
-      return Math.round(1 / (pixelsPerMeter * metersPerPixel));
-    }
-
-    function getMercatorBounds() {
-      var bounds = getBounds();
-      return L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
-                      L.CRS.EPSG3857.project(bounds.getNorthEast()));
-    }
-
     function boundsChanged() {
       var bounds = getBounds();
 
@@ -87,7 +42,6 @@ function initializeExport(map) {
 
       enableFilter();
       validateControls();
-      mapnikSizeChanged();
     }
 
     function enableFilter() {
@@ -99,186 +53,21 @@ function initializeExport(map) {
       locationFilter.enable();
     }
 
-    function filterChanged() {
-      setBounds(locationFilter.getBounds());
+    function update() {
+      setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());
       validateControls();
     }
 
-    function startMarker() {
-      $("#add_marker").html(I18n.t('export.start_rjs.click_add_marker'));
-
-      map.on("click", endMarker);
-
-      return false;
-    }
-
-    function endMarker(event) {
-      map.off("click", endMarker);
-
-      $("#add_marker").html(I18n.t('export.start_rjs.change_marker'));
-      $("#marker_inputs").show();
-
-      var latlng = event.latlng;
-
-      if (marker) {
-        map.removeLayer(marker);
-      }
-
-      marker = L.marker(latlng).addTo(map);
-
-      $("#marker_lon").val(latlng.lng.toFixed(5));
-      $("#marker_lat").val(latlng.lat.toFixed(5));
-
-      htmlUrlChanged();
-    }
-
-    function clearMarker() {
-      $("#marker_lon,#marker_lat").val("");
-      $("#marker_inputs").hide();
-      $("#add_marker").html(I18n.t('export.start_rjs.add_marker'));
-
-      if (marker) {
-        map.removeLayer(marker);
-      }
-    }
-
-    function mapMoved() {
-      if (!locationFilter.isEnabled()) {
-        setBounds(map.getBounds());
-        validateControls();
-      }
-    }
-
     function setBounds(bounds) {
       var precision = zoomPrecision(map.getZoom());
-
       $("#minlon").val(bounds.getWest().toFixed(precision));
       $("#minlat").val(bounds.getSouth().toFixed(precision));
       $("#maxlon").val(bounds.getEast().toFixed(precision));
       $("#maxlat").val(bounds.getNorth().toFixed(precision));
-
-      mapnikSizeChanged();
-      htmlUrlChanged();
     }
 
     function validateControls() {
-      var bounds = getBounds();
-
-      var tooLarge = bounds.getSize() > OSM.MAX_REQUEST_AREA;
-      if (tooLarge) {
-        $("#export_osm_too_large").show();
-      } else {
-        $("#export_osm_too_large").hide();
-      }
-
-      var max_scale = maxMapnikScale();
-      var disabled = true;
-
-      if ($("#format_osm").prop("checked")) {
-        disabled = tooLarge;
-      } else if ($("#format_mapnik").prop("checked")) {
-        disabled = $("#mapnik_scale").val() < max_scale;
-      }
-
-      $("#export_commit").prop("disabled", disabled);
-      $("#mapnik_max_scale").html(roundScale(max_scale));
-    }
-
-    function htmlUrlChanged() {
-      var bounds = getBounds();
-      var layerName = map.getMapBaseLayerId();
-
-      var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&amp;layer=" + layerName;
-      var markerUrl = "";
-
-      if ($("#marker_lat").val() && $("#marker_lon").val()) {
-        markerUrl = "&amp;mlat=" + $("#marker_lat").val() + "&amp;mlon=" + $("#marker_lon").val();
-        url += "&amp;marker=" + $("#marker_lat").val() + "," + $("#marker_lon").val();
-      }
-
-      var html = '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+url+'" style="border: 1px solid black"></iframe>';
-
-      // Create "larger map" link
-      var center = bounds.getCenter();
-
-      var zoom = map.getBoundsZoom(bounds);
-
-      var layers = map.getLayersCode();
-
-      var text = I18n.t('export.start_rjs.view_larger_map');
-      var escaped = [];
-
-      for (var i = 0; i < text.length; ++i) {
-        var c = text.charCodeAt(i);
-        escaped.push(c < 127 ? text.charAt(i) : "&#" + c + ";");
-      }
-
-      html += '<br /><small><a href="http://' + OSM.SERVER_URL + '/?lat='+center.lat+'&amp;lon='+center.lng+'&amp;zoom='+zoom+'&amp;layers='+layers+markerUrl+'">'+escaped.join("")+'</a></small>';
-
-      $("#export_html_text").val(html);
-
-      if ($("#format_html").prop("checked")) {
-        $("#export_html_text").prop("selected", true);
-      }
-    }
-
-    function formatChanged() {
-      $("#export_commit").show();
-
-      if ($("#format_osm").prop("checked")) {
-        $("#export_osm").show();
-      } else {
-        $("#export_osm").hide();
-      }
-
-      if ($("#format_mapnik").prop("checked")) {
-        $("#mapnik_scale").val(getScale());
-        $("#export_mapnik").show();
-
-        mapnikSizeChanged();
-      } else {
-        $("#export_mapnik").hide();
-      }
-
-      if ($("#format_html").prop("checked")) {
-        $("#export_html").show();
-        $("#export_commit").hide();
-        $("#export_html_text").prop("selected", true);
-      } else {
-        $("#export_html").hide();
-
-        clearMarker();
-      }
-
-      validateControls();
-    }
-
-    function maxMapnikScale() {
-      var size = getMercatorBounds().getSize();
-
-      return Math.floor(Math.sqrt(size.x * size.y / 0.3136));
-    }
-
-    function mapnikImageSize(scale) {
-      var size = getMercatorBounds().getSize();
-
-      return {w: Math.round(size.x / scale / 0.00028),
-              h: Math.round(size.y / scale / 0.00028)};
-    }
-
-    function roundScale(scale) {
-      var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
-
-      return precision * Math.ceil(scale / precision);
-    }
-
-    function mapnikSizeChanged() {
-      var size = mapnikImageSize($("#mapnik_scale").val());
-
-      $("#mapnik_image_width").html(size.w);
-      $("#mapnik_image_height").html(size.h);
-
-      validateControls();
+      $("#export_osm_too_large").toggle(getBounds().getSize() > OSM.MAX_REQUEST_AREA);
     }
   }
 }
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index bea877e668..7880abe140 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -1,5 +1,10 @@
 L.OSM.share = function (options) {
-  var control = L.control(options);
+  var control = L.control(options),
+    marker = L.marker([0, 0], {draggable: true}),
+    locationFilter = new L.LocationFilter({
+      enableButton: false,
+      adjustButton: false
+    });
 
   control.onAdd = function (map) {
     var $container = $('<div>')
@@ -29,6 +34,8 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
+    // Link
+
     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
       .appendTo($ui);
@@ -48,6 +55,135 @@ L.OSM.share = function (options) {
         .append($shortLink = $('<a>')
           .text(I18n.t('javascripts.share.short_link'))));
 
+    // Embeddable HTML
+
+    var $embedSection = $('<div>')
+      .attr('class', 'section share-html')
+      .appendTo($ui);
+
+    $('<h4>')
+      .text(I18n.t('javascripts.share.embed'))
+      .appendTo($embedSection);
+
+    var $form = $('<form>')
+      .attr('class', 'standard-form')
+      .attr('action', '/export/finish')
+      .attr('method', 'post')
+      .appendTo($embedSection);
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<label>')
+          .attr('for', 'embed_marker')
+          .append(
+            $('<input>')
+              .attr('id', 'embed_marker')
+              .attr('type', 'checkbox')
+              .bind('change', toggleMarker))
+          .append(I18n.t('javascripts.share.include_marker')))
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<textarea>')
+          .attr('id', 'embed_html')
+          .on('click', select));
+
+    $('<p>')
+      .attr('class', 'deemphasize')
+      .text(I18n.t('javascripts.share.paste_html'))
+      .appendTo($embedSection);
+
+    // Image
+
+    var $imageSection = $('<div>')
+      .attr('class', 'section share-image')
+      .appendTo($ui);
+
+    $('<h4>')
+      .text(I18n.t('javascripts.share.image'))
+      .appendTo($imageSection);
+
+    $form = $('<form>')
+      .attr('class', 'standard-form')
+      .attr('action', '/export/finish')
+      .attr('method', 'post')
+      .appendTo($imageSection);
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<label>')
+          .attr('for', 'image_filter')
+          .append(
+            $('<input>')
+              .attr('id', 'image_filter')
+              .attr('type', 'checkbox')
+              .bind('change', toggleFilter))
+          .append(I18n.t('javascripts.share.custom_dimensions')));
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<label>')
+          .attr('class', 'standard-label')
+          .attr('for', 'mapnik_format')
+          .text(I18n.t('javascripts.share.format')))
+      .append($('<select>')
+        .attr('name', 'mapnik_format')
+        .attr('id', 'mapnik_format')
+        .append($('<option>').val('png').text('PNG').prop('selected', true))
+        .append($('<option>').val('jpeg').text('JPEG'))
+        .append($('<option>').val('svg').text('SVG'))
+        .append($('<option>').val('pdf').text('PDF')));
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append($('<label>')
+        .attr('class', 'standard-label')
+        .attr('for', 'mapnik_scale')
+        .text(I18n.t('javascripts.share.scale')))
+      .append('1 : ')
+      .append($('<input>')
+        .attr('name', 'mapnik_scale')
+        .attr('id', 'mapnik_scale')
+        .attr('type', 'text')
+        .on('change', update));
+
+    ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
+      $('<input>')
+        .attr('id', 'mapnik_' + name)
+        .attr('name', name)
+        .attr('type', 'hidden')
+        .appendTo($form);
+    });
+
+    $('<input>')
+      .attr('name', 'format')
+      .attr('value', 'mapnik')
+      .attr('type', 'hidden')
+      .appendTo($form);
+
+    $('<p>')
+      .attr('class', 'deemphasize')
+      .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
+      .appendTo($form);
+
+    $('<input>')
+      .attr('type', 'submit')
+      .attr('value', I18n.t('javascripts.share.download'))
+      .appendTo($form);
+
+    locationFilter
+      .on('change', update)
+      .addTo(map);
+
     map.on('moveend layeradd layerremove', update);
 
     options.sidebar.addPane($ui);
@@ -55,19 +191,116 @@ L.OSM.share = function (options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
+
+      $('#mapnik_scale').val(getScale());
+      marker.setLatLng(map.getCenter());
+
+      update();
       options.sidebar.togglePane($ui);
+    }
+
+    function toggleMarker() {
+      if ($(this).is(':checked')) {
+        map.addLayer(marker);
+      } else {
+        map.removeLayer(marker);
+      }
+      update();
+    }
+
+    function toggleFilter() {
+      if ($(this).is(':checked')) {
+        if (!locationFilter.getBounds().isValid()) {
+          locationFilter.setBounds(map.getBounds().pad(-0.2));
+        }
+
+        locationFilter.enable();
+      } else {
+        locationFilter.disable();
+      }
       update();
     }
 
     function update() {
+      // Link
+
       $shortLink.attr('href', map.getShortUrl());
       $longLink.attr('href', map.getUrl());
+
+      // Embed
+
+      var bounds = map.getBounds(),
+        center = bounds.getCenter(),
+        params = {
+          bbox: bounds.toBBoxString(),
+          layer: map.getMapBaseLayerId()
+        },
+        linkParams = {
+          lat: center.lat,
+          lon: center.lng,
+          zoom: map.getBoundsZoom(bounds),
+          layers: map.getLayersCode()
+        };
+
+      if (map.hasLayer(marker)) {
+        var m = marker.getLatLng();
+        params.marker = m.lat + ',' + m.lng;
+        linkParams.mlat = m.lat;
+        linkParams.mlon = m.lng;
+      }
+
+      $('#embed_html').val(
+        '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
+          'http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params) +
+          '" style="border: 1px solid black"></iframe><br/>' +
+          '<small><a href="' +
+          'http://' + OSM.SERVER_URL + '/?' + $.param(linkParams) +
+          '">' + I18n.t('export.start_rjs.view_larger_map') + '</a></small>');
+
+      // Image
+
+      if (locationFilter.isEnabled()) {
+        bounds = locationFilter.getBounds();
+      }
+
+      var scale = $("#mapnik_scale").val(),
+        size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
+                        L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
+        maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
+
+      $('#mapnik_minlon').val(bounds.getWest());
+      $('#mapnik_minlat').val(bounds.getSouth());
+      $('#mapnik_maxlon').val(bounds.getEast());
+      $('#mapnik_maxlat').val(bounds.getNorth());
+
+      if (scale < maxScale) {
+        scale = roundScale(maxScale);
+        $("#mapnik_scale").val(scale);
+      }
+
+      $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
+      $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
     }
 
     function select() {
       $(this).select();
     }
 
+    function getScale() {
+      var bounds = map.getBounds(),
+        centerLat = bounds.getCenter().lat,
+        halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
+        meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
+        pixelsPerMeter = map.getSize().x / meters,
+        metersPerPixel = 1 / (92 * 39.3701);
+      return Math.round(1 / (pixelsPerMeter * metersPerPixel));
+    }
+
+    function roundScale(scale) {
+      var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
+      return precision * Math.ceil(scale / precision);
+    }
+
     return $container[0];
   };
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index e157977d83..9ea4b0dfae 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -476,8 +476,7 @@ a.donate {
 
 .site-index #tabnav a#viewanchor,
 .site-edit #tabnav a#editanchor,
-.changeset-list #tabnav a#historyanchor,
-.site-export #tabnav a#exportanchor {
+.changeset-list #tabnav a#historyanchor {
   border-bottom: 1px solid #aaa;
   background: #9ed485;
   color: #000;
@@ -638,9 +637,19 @@ a.donate {
   .share-link {
     li {
       display: inline-block;
+      text-align: center;
       width: 50%;
     }
   }
+
+  #embed_html {
+    font-family: monospace;
+    font-size: small;
+  }
+
+  #mapnik_scale {
+    width: 100px;
+  }
 }
 
 .site-index .leaflet-top,
@@ -851,20 +860,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   margin: $lineheight/4;
 }
 
-.export_details input[type="text"]#export_html_text {
-  width: 100%;
-}
-
-#sidebar #marker_inputs li:last-child {
-  margin-bottom: $lineheight/2;
-}
-
-#export_osm,
-#export_mapnik,
-#export_osmarender {
-  display: none;
-}
-
 /* Rules for the main content area */
 
 #content {
diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb
index cdb16970fb..deccd805d5 100644
--- a/app/views/export/start.html.erb
+++ b/app/views/export/start.html.erb
@@ -1,6 +1,5 @@
-<%= form_tag :action => "finish" do %>
-
-  <h4><%= t'export.start.area_to_export' %></h4>
+<%= form_tag :controller => "export", :action => "finish" do %>
+  <%= hidden_field_tag 'format', 'osm' %>
 
   <div class="export_bounds inner12">
     <div class='export_area_inputs'>
@@ -14,22 +13,6 @@
     <a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a>
   </div>
 
-  <h4><%= t'export.start.format_to_export' %></h4>
-
-  <ul class="export_details inner12">
-    <li>
-      <%= radio_button_tag("format", "osm") %>
-      <label for='format_osm'><%= t'export.start.osm_xml_data' %></label>
-    </li>
-    <li>
-      <%= radio_button_tag("format", "mapnik") %>
-      <label for='format_mapnik'><%= t'export.start.map_image' %></label>
-    </li>
-    <li>
-      <%= radio_button_tag("format", "html") %>
-      <label for='format_html'><%= t'export.start.embeddable_html' %></label></li>
-  </ul>
-
   <div id="export_osm">
     <h4><%= t'export.start.licence' %></h4>
 
@@ -46,37 +29,7 @@
     </div>
   </div>
 
-  <div id="export_mapnik">
-    <h4><%= t'export.start.options' %></h4>
-
-    <ul class="export_details inner12">
-      <li><%= t'export.start.format' %> <%= select_tag("mapnik_format", options_for_select([["PNG", "png"], ["JPEG", "jpeg"], ["SVG", "svg"], ["PDF", "pdf"]], "png")) %></li>
-      <li><%= t'export.start.scale' %> 1 : <%= text_field_tag("mapnik_scale", nil) %> <p class="deemphasize export_hint">(<%= t'export.start.max' %> 1 : <span id="mapnik_max_scale"></span>)</p></li>
-      <li><%= t'export.start.image_size' %> <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span></li>
-    </ul>
-  </div>
-
-  <div id="export_html">
-    <h4><%= t'export.start.options' %></h4>
-
-    <div class="export_details inner12">
-      <ul id="marker_inputs" style="display:none">
-        <li><%= t'export.start.latitude' %> <input type="text" id="marker_lat"/></li>
-        <li><%= t'export.start.longitude' %> <input type="text" id="marker_lon"/></li>
-      </ul>
-      <a id="add_marker" class='button' href="#"><%= t'export.start.add_marker' %></a>
-    </div>
-
-    <h4><%= t'export.start.output' %></h4>
-
-    <div class="export_details inner12">
-      <input type="text" id="export_html_text"/>
-      <p class='deemphasize'><%= t'export.start.paste_html' %></p>
-    </div>
-  </div>
-
   <div class="inner12">
     <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
   </div>
-
 <% end %>
diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 0ba203fde1..44edfc6d12 100644
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -58,10 +58,13 @@
           </ul>
         </li>
         <li>
-          <h4><%= link_to t('layouts.gps_traces'), traces_path, {
-            :id => 'traceanchor',
-            :title => t('layouts.gps_traces_tooltip')
-          } %></h4>
+          <h4><%= t'layouts.data' %></h4>
+          <ul>
+            <li><%= link_to t('layouts.export_data'), export_path %></li>
+          </ul>
+          <ul>
+            <li><%= link_to t('layouts.gps_traces'), traces_path %></li>
+          </ul>
         </li>
         <%= yield :left_menu %>
       </ul>
@@ -123,12 +126,6 @@
           :title => t('javascripts.site.history_tooltip'),
           :class => 'geolink bbox'
         } %></li>
-        <li><%= link_to t('layouts.export'), export_path, {
-          :id => 'exportanchor',
-          :title => t('layouts.export_tooltip'),
-          :data => { :url => url_for(:controller => :export, :action => :start) },
-          :class => 'geolink llz layers'
-        } %></li>
       </ul>
     </div>
     <div id="editmenu" class="menu">
diff --git a/app/views/site/_sidebar.html.erb b/app/views/site/_sidebar.html.erb
index db5f44356c..cc3cf48150 100644
--- a/app/views/site/_sidebar.html.erb
+++ b/app/views/site/_sidebar.html.erb
@@ -4,5 +4,6 @@
     <a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
   </div>
   <div id="sidebar_content">
+    <%= render :template => 'export/start' if params[:export] %>
   </div>
 </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 06944ce4e3..a1cc91fdef 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -980,8 +980,8 @@ en:
     view_tooltip: View the map
     edit: Edit
     history: History
-    export: Export
-    export_tooltip: Export map data
+    data: Data
+    export_data: Export Data
     gps_traces: GPS Traces
     gps_traces_tooltip: Manage GPS traces
     user_diaries: User Diaries
@@ -2039,9 +2039,19 @@ en:
     share:
       title: "Share"
       cancel: "Cancel"
+      image: "Image"
       link: "Link"
       short_link: "Short Link"
       long_link: "Long Link"
+      embed: "Embeddable HTML"
+      custom_dimensions: "Set custom dimensions"
+      format: "Format"
+      scale: "Scale"
+      image_size: "Image will show standard layer at "
+      download: "Download"
+      short_url: "Short URL"
+      include_marker: "Include marker"
+      paste_html: "Paste HTML to embed in website"
     key:
       title: "Map Key"
       tooltip: "Map Key"

From f898058e76459562e8d54c61458eba0fb1476f35 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 10 Jul 2013 17:24:57 -0700
Subject: [PATCH 02/27] Add option to include marker in permalinks

---
 app/assets/javascripts/leaflet.share.js | 58 ++++++++++++++-----------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 7880abe140..d55b0bbd9f 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -44,6 +44,23 @@ L.OSM.share = function (options) {
       .text(I18n.t('javascripts.share.link'))
       .appendTo($linkSection);
 
+    var $form = $('<form>')
+      .attr('class', 'standard-form')
+      .appendTo($linkSection);
+
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<label>')
+          .attr('for', 'link_marker')
+          .append(
+            $('<input>')
+              .attr('id', 'link_marker')
+              .attr('type', 'checkbox')
+              .bind('change', toggleMarker))
+          .append(I18n.t('javascripts.share.include_marker')));
+
     var $shortLink, $longLink;
 
     $('<ul>')
@@ -65,10 +82,8 @@ L.OSM.share = function (options) {
       .text(I18n.t('javascripts.share.embed'))
       .appendTo($embedSection);
 
-    var $form = $('<form>')
+    $form = $('<form>')
       .attr('class', 'standard-form')
-      .attr('action', '/export/finish')
-      .attr('method', 'post')
       .appendTo($embedSection);
 
     $('<div>')
@@ -82,7 +97,7 @@ L.OSM.share = function (options) {
               .attr('id', 'embed_marker')
               .attr('type', 'checkbox')
               .bind('change', toggleMarker))
-          .append(I18n.t('javascripts.share.include_marker')))
+          .append(I18n.t('javascripts.share.include_marker')));
 
     $('<div>')
       .attr('class', 'form-row')
@@ -185,6 +200,7 @@ L.OSM.share = function (options) {
       .addTo(map);
 
     map.on('moveend layeradd layerremove', update);
+    marker.on('dragend', update);
 
     options.sidebar.addPane($ui);
 
@@ -222,40 +238,32 @@ L.OSM.share = function (options) {
     }
 
     function update() {
+      var bounds = map.getBounds();
+
+      $('#link_marker, #embed_marker')
+        .prop('checked', map.hasLayer(marker));
+
       // Link
 
-      $shortLink.attr('href', map.getShortUrl());
-      $longLink.attr('href', map.getUrl());
+      $shortLink.attr('href', map.getShortUrl(marker));
+      $longLink.attr('href', map.getUrl(marker));
 
       // Embed
 
-      var bounds = map.getBounds(),
-        center = bounds.getCenter(),
-        params = {
-          bbox: bounds.toBBoxString(),
-          layer: map.getMapBaseLayerId()
-        },
-        linkParams = {
-          lat: center.lat,
-          lon: center.lng,
-          zoom: map.getBoundsZoom(bounds),
-          layers: map.getLayersCode()
-        };
+      var params = {
+        bbox: bounds.toBBoxString(),
+        layer: map.getMapBaseLayerId()
+      };
 
       if (map.hasLayer(marker)) {
-        var m = marker.getLatLng();
-        params.marker = m.lat + ',' + m.lng;
-        linkParams.mlat = m.lat;
-        linkParams.mlon = m.lng;
+        params.marker = marker.getLatLng().lat + ',' + marker.getLatLng().lng;
       }
 
       $('#embed_html').val(
         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
           'http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params) +
           '" style="border: 1px solid black"></iframe><br/>' +
-          '<small><a href="' +
-          'http://' + OSM.SERVER_URL + '/?' + $.param(linkParams) +
-          '">' + I18n.t('export.start_rjs.view_larger_map') + '</a></small>');
+          '<small><a href="' + map.getUrl(marker) + '</a></small>');
 
       // Image
 

From 2aa391e8490dcc4bfcb6cdcf483ee3ce5d610851 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 10 Jul 2013 18:20:38 -0700
Subject: [PATCH 03/27] Link to sources for bulk downloads

---
 app/views/export/start.html.erb | 13 +++++++++++++
 config/locales/en.yml           | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb
index deccd805d5..0bc1ac5bb7 100644
--- a/app/views/export/start.html.erb
+++ b/app/views/export/start.html.erb
@@ -25,6 +25,19 @@
 
       <div class="export_details inner12">
         <p><%= t'export.start.too_large.body' %></p>
+        <dl>
+          <dt><a href="http://planet.openstreetmap.org/"><%= t'export.start.too_large.planet.title' %></a></dt>
+          <dd><%= t'export.start.too_large.planet.description' %></dd>
+
+          <dt><a href="http://download.geofabrik.de/"><%= t'export.start.too_large.geofabrik.title' %></a></dt>
+          <dd><%= t'export.start.too_large.geofabrik.description' %></dd>
+
+          <dt><a href="http://metro.teczno.com/"><%= t'export.start.too_large.metro.title' %></a></dt>
+          <dd><%= t'export.start.too_large.metro.description' %></dd>
+
+          <dt><a href="http://wiki.openstreetmap.org/wiki/Download"><%= t'export.start.too_large.other.title' %></a></dt>
+          <dd><%= t'export.start.too_large.other.description' %></dd>
+        </dl>
       </div>
     </div>
   </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index a1cc91fdef..97b856c92a 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -427,7 +427,19 @@ en:
       export_details: 'OpenStreetMap data is licensed under the <a href="http://opendatacommons.org/licenses/odbl/1.0/">Open Data Commons Open Database License</a> (ODbL).'
       too_large:
         heading: "Area Too Large"
-        body: "This area is too large to be exported as OpenStreetMap XML Data. Please zoom in or select a smaller area."
+        body: "This area is too large to be exported as OpenStreetMap XML Data. Please zoom in or select a smaller area, or use one of the following sources for bulk data downloads:"
+        planet:
+          title: "Planet OSM"
+          description: "Regularly-updated copies of the complete OpenStreetMap database"
+        geofabrik:
+          title: "Geofabrik Downloads"
+          description: "Regularly-updated extracts of continents, countries, and selected cities"
+        metro:
+          title: "Metro Extracts"
+          description: "Extracts for major world cities and their surrounding areas"
+        other:
+          title: "Other Sources"
+          description: "Additional sources listed on the OpenStreetMap wiki"
       options: "Options"
       format: "Format"
       scale: "Scale"

From 6dcd087abcf718fcaf9aca9283b6b39b9dbbcdcb Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 19 Jul 2013 12:18:25 -0700
Subject: [PATCH 04/27] Remove marker and filter when closed

---
 app/assets/javascripts/leaflet.share.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index d55b0bbd9f..a9fe4dccf9 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -204,6 +204,15 @@ L.OSM.share = function (options) {
 
     options.sidebar.addPane($ui);
 
+    $ui
+      .on('hide', hidden);
+
+    function hidden() {
+      map.removeLayer(marker);
+      locationFilter.disable();
+      update();
+    }
+
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();

From 669393a6cba616672f689124883e2612cdd0adc3 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 19 Jul 2013 12:18:35 -0700
Subject: [PATCH 05/27] Recenter marker when shown

---
 app/assets/javascripts/leaflet.share.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index a9fe4dccf9..b736b41c1c 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -226,6 +226,7 @@ L.OSM.share = function (options) {
 
     function toggleMarker() {
       if ($(this).is(':checked')) {
+        marker.setLatLng(map.getCenter());
         map.addLayer(marker);
       } else {
         map.removeLayer(marker);

From 1285f9d38c3aedbffddb7d2adf83d5aa943a6285 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 19 Jul 2013 12:18:42 -0700
Subject: [PATCH 06/27] Fix textarea resizing

---
 app/assets/stylesheets/common.css.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 9ea4b0dfae..ee36043264 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -643,6 +643,7 @@ a.donate {
   }
 
   #embed_html {
+    resize: vertical;
     font-family: monospace;
     font-size: small;
   }
@@ -1607,7 +1608,6 @@ textarea {
 textarea {
   padding: 5px;
   width: 100%;
-  height: 100% !important;
 }
 
 /* Rules for user images */

From f080d161e0d6bda68535176d0003f3dfb133a7b8 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 19 Jul 2013 12:23:40 -0700
Subject: [PATCH 07/27] Tighten vertical space

---
 app/assets/stylesheets/common.css.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index ee36043264..42966accd7 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -602,11 +602,14 @@ a.donate {
   }
 }
 
-.layers-ui {
-  ul, li:last-child {
+.layers-ui,
+.share-ui {
+  ul, li:last-child, p:last-child {
     margin-bottom: 0;
   }
+}
 
+.layers-ui {
   li {
     border-radius: 4px;
     overflow: hidden;

From 6edf63388591740a2e2fd69fa34e02418450a463 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 19 Jul 2013 15:04:55 -0700
Subject: [PATCH 08/27] Update location filter checkbox state correctly

---
 app/assets/javascripts/leaflet.share.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index b736b41c1c..1f13bf6096 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -253,6 +253,9 @@ L.OSM.share = function (options) {
       $('#link_marker, #embed_marker')
         .prop('checked', map.hasLayer(marker));
 
+      $('#image_filter')
+        .prop('checked', locationFilter.isEnabled());
+
       // Link
 
       $shortLink.attr('href', map.getShortUrl(marker));

From bf7b2cf38194380c56fbb419ced588a29c27f7b8 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 26 Jul 2013 18:17:36 -0700
Subject: [PATCH 09/27] Design adjustments to Link / HTML sharing

---
 app/assets/javascripts/leaflet.share.js | 75 ++++++++++++-------------
 app/assets/stylesheets/common.css.scss  | 14 +++--
 config/locales/en.yml                   |  2 +-
 3 files changed, 45 insertions(+), 46 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 1f13bf6096..9388bde658 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -34,7 +34,7 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
-    // Link
+    // Link / Embed
 
     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
@@ -63,45 +63,42 @@ L.OSM.share = function (options) {
 
     var $shortLink, $longLink;
 
-    $('<ul>')
-      .appendTo($linkSection)
-      .append($('<li>')
-        .append($longLink = $('<a>')
-          .text(I18n.t('javascripts.share.long_link'))))
-      .append($('<li>')
-        .append($shortLink = $('<a>')
-          .text(I18n.t('javascripts.share.short_link'))));
-
-    // Embeddable HTML
-
-    var $embedSection = $('<div>')
-      .attr('class', 'section share-html')
-      .appendTo($ui);
-
-    $('<h4>')
-      .text(I18n.t('javascripts.share.embed'))
-      .appendTo($embedSection);
-
-    $form = $('<form>')
-      .attr('class', 'standard-form')
-      .appendTo($embedSection);
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append($('<label>')
+        .attr('for', 'long_input')
+        .text(I18n.t('javascripts.share.long_link')))
+      .append($('<a>')
+        .attr('id', 'long_link')
+        .append($('<span>')
+          .attr('class', 'icon link')))
+      .append($('<input>')
+        .attr('id', 'long_input')
+        .attr('type', 'text')
+        .on('click', select));
 
     $('<div>')
       .attr('class', 'form-row')
       .appendTo($form)
-      .append(
-        $('<label>')
-          .attr('for', 'embed_marker')
-          .append(
-            $('<input>')
-              .attr('id', 'embed_marker')
-              .attr('type', 'checkbox')
-              .bind('change', toggleMarker))
-          .append(I18n.t('javascripts.share.include_marker')));
+      .append($('<label>')
+        .attr('for', 'short_input')
+        .text(I18n.t('javascripts.share.short_link')))
+      .append($('<a>')
+        .attr('id', 'short_link')
+        .append($('<span>')
+          .attr('class', 'icon link')))
+      .append($('<input>')
+        .attr('id', 'short_input')
+        .attr('type', 'text')
+        .on('click', select));
 
     $('<div>')
       .attr('class', 'form-row')
       .appendTo($form)
+      .append($('<label>')
+        .attr('for', 'embed_html')
+        .text(I18n.t('javascripts.share.embed')))
       .append(
         $('<textarea>')
           .attr('id', 'embed_html')
@@ -110,7 +107,7 @@ L.OSM.share = function (options) {
     $('<p>')
       .attr('class', 'deemphasize')
       .text(I18n.t('javascripts.share.paste_html'))
-      .appendTo($embedSection);
+      .appendTo($linkSection);
 
     // Image
 
@@ -250,18 +247,18 @@ L.OSM.share = function (options) {
     function update() {
       var bounds = map.getBounds();
 
-      $('#link_marker, #embed_marker')
+      $('#link_marker')
         .prop('checked', map.hasLayer(marker));
 
       $('#image_filter')
         .prop('checked', locationFilter.isEnabled());
 
-      // Link
-
-      $shortLink.attr('href', map.getShortUrl(marker));
-      $longLink.attr('href', map.getUrl(marker));
+      // Link / Embed
 
-      // Embed
+      $('#short_input').val(map.getShortUrl(marker));
+      $('#long_input').val(map.getUrl(marker));
+      $('#short_link').attr('href', map.getShortUrl(marker));
+      $('#long_link').attr('href', map.getUrl(marker));
 
       var params = {
         bbox: bounds.toBBoxString(),
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 42966accd7..94f3f84e2a 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -638,17 +638,19 @@ a.donate {
 
 .share-ui {
   .share-link {
-    li {
-      display: inline-block;
-      text-align: center;
-      width: 50%;
+    a {
+      margin-left: 5px;
+    }
+
+    input,
+    textarea {
+      font-family: monospace;
+      font-size: small;
     }
   }
 
   #embed_html {
     resize: vertical;
-    font-family: monospace;
-    font-size: small;
   }
 
   #mapnik_scale {
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 97b856c92a..8a11960e0c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2052,7 +2052,7 @@ en:
       title: "Share"
       cancel: "Cancel"
       image: "Image"
-      link: "Link"
+      link: "Link or HTML"
       short_link: "Short Link"
       long_link: "Long Link"
       embed: "Embeddable HTML"

From 3eb4f1938c789b39929c1a72fe0889f485618dbc Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 26 Jul 2013 20:19:51 -0700
Subject: [PATCH 10/27] Add "Center map on marker" option

---
 app/assets/javascripts/leaflet.share.js | 21 ++++++++++++++++++++-
 config/locales/en.yml                   |  1 +
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 9388bde658..4264e56161 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -61,7 +61,19 @@ L.OSM.share = function (options) {
               .bind('change', toggleMarker))
           .append(I18n.t('javascripts.share.include_marker')));
 
-    var $shortLink, $longLink;
+    $('<div>')
+      .attr('class', 'form-row')
+      .appendTo($form)
+      .append(
+        $('<label>')
+          .attr('for', 'center_marker')
+          .append(
+            $('<input>')
+              .attr('id', 'center_marker')
+              .attr('type', 'checkbox')
+              .prop('checked', true)
+              .bind('change', update))
+          .append(I18n.t('javascripts.share.center_marker')));
 
     $('<div>')
       .attr('class', 'form-row')
@@ -245,11 +257,18 @@ L.OSM.share = function (options) {
     }
 
     function update() {
+      if (map.hasLayer(marker) && $('#center_marker').is(':checked')) {
+        map.panTo(marker.getLatLng());
+      }
+
       var bounds = map.getBounds();
 
       $('#link_marker')
         .prop('checked', map.hasLayer(marker));
 
+      $('#center_marker')
+        .prop('disabled', !map.hasLayer(marker));
+
       $('#image_filter')
         .prop('checked', locationFilter.isEnabled());
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 8a11960e0c..ae6f801916 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2063,6 +2063,7 @@ en:
       download: "Download"
       short_url: "Short URL"
       include_marker: "Include marker"
+      center_marker: "Center map on marker"
       paste_html: "Paste HTML to embed in website"
     key:
       title: "Map Key"

From f17304e8ed8490f8c80bd86ea0d78538ca46f589 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 29 Jul 2013 11:30:58 -0700
Subject: [PATCH 11/27] Fix embed

---
 app/assets/javascripts/application.js   | 13 +++++++++++++
 app/assets/javascripts/embed.js.erb     | 18 +++++++++---------
 app/assets/javascripts/leaflet.share.js |  4 ++--
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index cbea58cc17..fc7cdb51c5 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -113,6 +113,19 @@ function cookieContent(map) {
   return [center.lng, center.lat, map.getZoom(), map.getLayersCode()].join('|');
 }
 
+function escapeHTML(string) {
+  var htmlEscapes = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;'
+  };
+  return string == null ? '' : (string + '').replace(/[&<>"']/g, function(match) {
+      return htmlEscapes[match];
+  });
+}
+
 /*
  * Forms which have been cached by rails may have the wrong
  * authenticity token, so patch up any forms with the correct
diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb
index 57572ca48f..50c294b41b 100644
--- a/app/assets/javascripts/embed.js.erb
+++ b/app/assets/javascripts/embed.js.erb
@@ -5,12 +5,11 @@ window.onload = function () {
   var query = (window.location.search || '?').substr(1),
       args  = {};
 
-  query.replace(/([^&=]+)=?([^&]*)(?:&+|$)/g, function(match, key, value) {
-    value = value.split(",");
-    if (value.length == 1)
-      value = value[0];
-    args[key] = value;
-  });
+  var pairs = query.split('&');
+  for (var i = 0; i < pairs.length; i++) {
+    var parts = pairs[i].split('=');
+    args[parts[0]] = decodeURIComponent(parts[1] || '');
+  }
 
   var map = L.map("map");
   map.attributionControl.setPrefix('');
@@ -26,7 +25,7 @@ window.onload = function () {
   }
 
   if (args.marker) {
-    L.marker(args.marker, {icon: L.icon({
+    L.marker(args.marker.split(','), {icon: L.icon({
       iconUrl: <%= asset_path('images/marker-icon.png').to_json %>,
       iconSize: new L.Point(25, 41),
       iconAnchor: new L.Point(12, 41),
@@ -36,8 +35,9 @@ window.onload = function () {
   }
 
   if (args.bbox) {
-    map.fitBounds([L.latLng(args.bbox[1], args.bbox[0]),
-                   L.latLng(args.bbox[3], args.bbox[2])])
+    var bbox = args.bbox.split(',');
+    map.fitBounds([L.latLng(bbox[1], bbox[0]),
+                   L.latLng(bbox[3], bbox[2])])
   } else {
     map.fitWorld();
   }
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 4264e56161..aef60d1cd9 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -290,9 +290,9 @@ L.OSM.share = function (options) {
 
       $('#embed_html').val(
         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
-          'http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params) +
+          escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
           '" style="border: 1px solid black"></iframe><br/>' +
-          '<small><a href="' + map.getUrl(marker) + '</a></small>');
+          '<small><a href="' + escapeHTML(map.getUrl(marker)) + '</a></small>');
 
       // Image
 

From c47b417f3ea4eda8fdfb190e109cb46136e2f345 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 30 Jul 2013 12:58:47 -0400
Subject: [PATCH 12/27] divide embed section from share section.

---
 app/assets/javascripts/leaflet.share.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index aef60d1cd9..4454f02bbd 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -34,7 +34,7 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
-    // Link / Embed
+    // Link
 
     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
@@ -105,6 +105,16 @@ L.OSM.share = function (options) {
         .attr('type', 'text')
         .on('click', select));
 
+    // Embed
+
+    var $embedSection = $('<div>')
+      .attr('class', 'section share-embed')
+      .appendTo($ui);
+
+    var $form = $('<form>')
+      .attr('class', 'standard-form')
+      .appendTo($embedSection);
+
     $('<div>')
       .attr('class', 'form-row')
       .appendTo($form)

From 8ef21285ab57e372cd4b2c1a9917faec77722c41 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 30 Jul 2013 13:01:10 -0400
Subject: [PATCH 13/27] consistent padding in sidebar menu.

---
 app/assets/stylesheets/common.css.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 94f3f84e2a..8d84f09554 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -306,7 +306,7 @@ table {
 .left_menu {
   left: 0px;
   margin: 0;
-  padding: $lineheight/4 $lineheight/2;
+  padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2;
   font-size: 12px;
   line-height: 1.25;
   list-style-type: none;
@@ -332,10 +332,6 @@ table {
     font-size: 12px;
     margin: 0;
   }
-
-  li:last-child h4 {
-    padding-top: 0;
-  }
 }
 
 /*

From dcbc42b1a485fdf39f5f11e37a628b383843e69b Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 30 Jul 2013 13:50:50 -0400
Subject: [PATCH 14/27] reversed color on map controls and prepped active
 toggle

---
 app/assets/images/sprite.png           | Bin 3427 -> 2934 bytes
 app/assets/images/sprite.svg           |  70 ++++++++++++++++++-------
 app/assets/stylesheets/common.css.scss |  23 ++++----
 3 files changed, 64 insertions(+), 29 deletions(-)

diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png
index 9f857f852b8a5c783b4d256474a14a46d5ab68d7..00c67777fca95d33253c82d59d61e4792a7fcc46 100644
GIT binary patch
literal 2934
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

literal 3427
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
RvJa6QVDD!4(k9^U{{UMUBzgb<

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index 2e1d309e4b..89f101690c 100644
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@@ -27,12 +27,12 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="5"
-     inkscape:cx="159.62972"
-     inkscape:cy="181.16738"
+     inkscape:zoom="1"
+     inkscape:cx="200.95282"
+     inkscape:cy="195.08379"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
-     showgrid="true"
+     showgrid="false"
      inkscape:window-width="1280"
      inkscape:window-height="756"
      inkscape:window-x="0"
@@ -122,7 +122,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -145,7 +145,7 @@
      id="layer1"
      transform="translate(0,-852.36218)">
     <path
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        d="m 24,860.36218 c 0,-1.82764 1,-4 3.75,-4 1.827643,0 2.75,2 2.75,2 0,0 0.922357,-2 2.75,-2 2.75,0 3.75,2.17236 3.75,4 0,5 -6.5,8 -6.5,8 0,0 -6.5,-3 -6.5,-8 z"
        id="path3843"
        inkscape:connector-curvature="0"
@@ -163,7 +163,7 @@
        sodipodi:nodetypes="cccccccccccccccccc"
        d="m 129,855.3622 -1.00001,1 0,2 1.00001,1 2.00002,0 1,-1 0,-2 -1.00002,-1 z m 2e-5,6 -1.00001,1 0,6 1.00001,1 1.99998,0 1.00004,-1 -3e-5,-6 -1,-1 z"
        id="path6912"
-       style="font-size:16.71258354px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate;font-family:Helvetica Neue"
+       style="font-size:16.71258354000000068px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:100%;letter-spacing:0px;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate;font-family:Helvetica Neue"
        inkscape:connector-curvature="0" />
     <path
        inkscape:export-ydpi="90"
@@ -172,9 +172,9 @@
        inkscape:connector-curvature="0"
        id="path6914"
        d="m 57,861.36216 -1,-1 -4,0 0,-4 -1,-0.99999 -1,0 -1,1 0,4 -4,0 -1,0.99999 0,1 1,1 4,0 0,3.99999 1,1.00002 1,0 1,-1.00001 0,-3.99999 4,-10e-6 1,-0.99998 0,-1.00002 z"
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
     <path
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
        d="m 65,860.36216 11,-2e-5 1,1.00002 0,1.00002 -1,0.99997 -11,3e-5 -1,-1.00003 0,-1 z"
        id="path6916"
        inkscape:connector-curvature="0"
@@ -190,20 +190,20 @@
        inkscape:connector-curvature="0"
        id="path6918"
        d="m 84,862.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z"
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
     <path
        inkscape:export-ydpi="90"
        inkscape:export-xdpi="90"
        inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png"
        id="path6920"
        d="m 155,854.3622 -1,1 0,2 -2,0 c -6,0 -6,7 -6,7 0,0 2,-4 6,-4 0.66667,0 1.33333,0 2,0 l 0,2 1,1 4,-4.5 -4,-4.5 z m -13,4 -1,1 0,9 1,1 10,0 1,-1 0,-2 0,-3 0,-1 -1,0 c -0.3202,-10e-5 -0.6603,0.073 -1,0.1875 l 0,2.8125 0,2 -5.5625,0 a 2.0002,2.0002 0 0 1 -0.90625,0 l -1.53125,0 0,-1.625 a 2.0002,2.0002 0 0 1 0,-0.625 l 0,-2.75 0,-2 1.53125,0 c 0.3433,-0.6691 0.79175,-1.3477 1.34375,-2 l -0.875,0 -3,0 z"
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
        inkscape:connector-curvature="0" />
     <path
        inkscape:export-ydpi="90"
        inkscape:export-xdpi="90"
        inkscape:export-filename="/Users/saman/work_repos/osm-redesign/renders/share-1.png"
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
        d="m 109.50003,855.3622 -6.50002,3 1e-5,1 6.49998,3 1.00002,0 6.49999,-3 1e-5,-1 -6.50001,-3 -0.99998,0 z m -5.40621,6.5 -1.09377,0.5 -3e-5,1 6.49999,3 1,0 6.50001,-3 0,-1 -1.0937,-0.5 -5.40631,2.5 -0.99998,0 -5.40621,-2.5 z m 0,4 -1.09379,0.5 -2e-5,1 6.50001,3 1.00001,0 6.5,-3 -10e-6,-1 -1.0937,-0.5 -5.40631,2.5 -0.99999,0 -5.4062,-2.5 z"
        id="path6922"
        inkscape:connector-curvature="0" />
@@ -214,7 +214,7 @@
        inkscape:connector-curvature="0"
        id="path6924"
        d="m 170,853.3622 -1,1 0,1 -1,0 -1,1 0,2 7,0 0,-2 -1,-1 -1,0 0,-1 -1,-1 -1,0 z m -5,3 -1,1 0,11 1,1 11,0 1,-1 0,-11 -1,-1 -1,0 0,1 0,2 0,8 -9,0 0,-8 0,-2 0,-1 -1,0 z m 3,4 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 5,0 0,-1 -5,0 z m 0,2 0,1 3,0 0,-1 -3,0 z"
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
     <path
        inkscape:export-ydpi="90"
        inkscape:export-xdpi="90"
@@ -223,12 +223,6 @@
        id="path10739"
        d="m 11.5,855.36218 c 3.0376,0 5.5,2.46243 5.5,5.5 0,3.03757 -2.4624,5.5 -5.5,5.5 -1.0061,0 -1.9387,-0.27827 -2.75,-0.75 l -3.75,3.75 -1,0 -1,-1 0,-1 3.75,-3.75 C 6.2783,862.80084 6,861.86831 6,860.86218 c 0,-3.03757 2.4624,-5.5 5.5,-5.5 z m 0.5,2 -1,0 -2,1 -1,2 0,1 1,2 2,1 1,0 2,-1 1,-2 0,-1 -1,-2 -2,-1 z"
        style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
-    <path
-       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate"
-       d="m 192.00001,854.36218 -2,2 3,0 0,0 3,3 -4.50001,4.5 -2,-2 -1.5,1.5 2.5,2.5 2,0 5.50001,-5.5 0,-2 -4,-4 z m -3.50001,3.5 -5.5,5.5 0,2 4,4 2,0 2,-2 -3,0 0,0 -3,-3 4.5,-4.5 2,2 1.5,-1.5 -2.5,-2.5 z"
-       id="path10871"
-       inkscape:connector-curvature="0"
-       sodipodi:nodetypes="cccccccccccccccccccccccccccc" />
     <path
        inkscape:export-ydpi="90"
        inkscape:export-xdpi="90"
@@ -244,7 +238,7 @@
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="cccccccccccc" />
     <path
-       style="color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        d="m 244,864.36218 0,-7 1,-1 10,0 1,1 0,7 -1,1 -3,0 -2,3 -2,-3 -3,0 z"
        id="path11741"
        inkscape:connector-curvature="0"
@@ -258,5 +252,41 @@
        id="path6918-2"
        d="m 84,882.36218 0,-2.00001 10,-3.99999 2,1e-5 0,1.99998 -4,10 -2,10e-6 0,-6 z"
        style="color:#000000;fill:#70cd8f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter6591-2);enable-background:accumulate" />
+    <path
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 183,864.36218 0,-4 2,-2 2,0 -2,2 0,4 2,2 -2,0 z"
+       id="path4118"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccc" />
+    <path
+       sodipodi:nodetypes="ccccccccc"
+       inkscape:connector-curvature="0"
+       id="path4120"
+       d="m 196,864.36218 0,-4 -2,-2 -2,0 2,2 0,4 -1,2 1,0 z"
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <path
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 185,858.36218 5,0 0,2 -5,0 z"
+       id="rect4122"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 194,866.36218 -5,0 0,-2 5,0 z"
+       id="rect4126"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       d="m 190,858.36218 2,2 0,3 -2,0 z"
+       id="path4130"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="path4132"
+       d="m 189,866.36218 -2,-2 0,-3 2,0 z"
+       style="color:#000000;fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
   </g>
 </svg>
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 8d84f09554..7c6e8095a6 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -531,9 +531,10 @@ a.donate {
   display: block;
   height: 40px;
   width: 40px;
-  background-color: white;
-  background-color: rgba(255,255,255,.8);
-  border-radius: 4px;
+  background-color: #333;
+  background-color: rgba(0,0,0,.6);
+  -bottom: 1px solid #333; 
+  border-radius: 4px 0 0 4px;
   margin-bottom: 10px;
   outline: none;
 }
@@ -541,23 +542,26 @@ a.donate {
 .leaflet-control .zoomin,
 .control-layers .control-button {
   margin-bottom: 0px;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 0 0 0;
 }
 
 .site .leaflet-control .zoomout,
 .control-key .control-button {
-  margin-bottom: 0px;
-  border-radius: 0px;
+  margin-bottom: 0;
+  border-radius: 0;
 }
 
-.leaflet-control .zoomout,
 .control-locate .control-button,
 .control-share .control-button {
-  border-radius: 0px 0px 4px 4px;
+  border-radius: 0 0 0 4px;
 }
 
 .leaflet-control .control-button:hover {
-  background-color: white;
+  background-color: black;
+}
+
+.leaflet-control .control-button.active {
+  background-color: #9ed485;
 }
 
 .leaflet-control .control-button .icon {
@@ -658,6 +662,7 @@ a.donate {
 .site-export .leaflet-top {
   top: $lineheight/2 !important;
   .leaflet-control {
+    margin-right: 0px !important;
     margin-top: 0px !important;
   }
 }

From f1a6755060d80bde27576ef716701c35da93ee69 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 30 Jul 2013 13:44:49 -0700
Subject: [PATCH 15/27] Always center map on marker

Not centering is of dubious usefulness, and doesn't work
at all with a short link.
---
 app/assets/javascripts/leaflet.share.js | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 4454f02bbd..62572cf695 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -61,20 +61,6 @@ L.OSM.share = function (options) {
               .bind('change', toggleMarker))
           .append(I18n.t('javascripts.share.include_marker')));
 
-    $('<div>')
-      .attr('class', 'form-row')
-      .appendTo($form)
-      .append(
-        $('<label>')
-          .attr('for', 'center_marker')
-          .append(
-            $('<input>')
-              .attr('id', 'center_marker')
-              .attr('type', 'checkbox')
-              .prop('checked', true)
-              .bind('change', update))
-          .append(I18n.t('javascripts.share.center_marker')));
-
     $('<div>')
       .attr('class', 'form-row')
       .appendTo($form)
@@ -267,7 +253,7 @@ L.OSM.share = function (options) {
     }
 
     function update() {
-      if (map.hasLayer(marker) && $('#center_marker').is(':checked')) {
+      if (map.hasLayer(marker)) {
         map.panTo(marker.getLatLng());
       }
 
@@ -276,9 +262,6 @@ L.OSM.share = function (options) {
       $('#link_marker')
         .prop('checked', map.hasLayer(marker));
 
-      $('#center_marker')
-        .prop('disabled', !map.hasLayer(marker));
-
       $('#image_filter')
         .prop('checked', locationFilter.isEnabled());
 

From a3d69ee264f234ee85990b20e421b7cee8baa669 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Tue, 30 Jul 2013 14:02:34 -0700
Subject: [PATCH 16/27] Put link next to input and make it non-navigable

---
 app/assets/javascripts/leaflet.share.js | 22 ++++++++++++----------
 app/assets/stylesheets/common.css.scss  |  5 +++++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 62572cf695..15e4a72298 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -67,14 +67,15 @@ L.OSM.share = function (options) {
       .append($('<label>')
         .attr('for', 'long_input')
         .text(I18n.t('javascripts.share.long_link')))
-      .append($('<a>')
-        .attr('id', 'long_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'long_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
 
     $('<div>')
       .attr('class', 'form-row')
@@ -82,14 +83,15 @@ L.OSM.share = function (options) {
       .append($('<label>')
         .attr('for', 'short_input')
         .text(I18n.t('javascripts.share.short_link')))
-      .append($('<a>')
-        .attr('id', 'short_link')
-        .append($('<span>')
-          .attr('class', 'icon link')))
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
-        .on('click', select));
+        .on('click', select))
+      .append($('<a>')
+        .attr('id', 'short_link')
+        .on('click', function() { return false; })
+        .append($('<span>')
+          .attr('class', 'icon link')));
 
     // Embed
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 7c6e8095a6..bd313fe334 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -638,6 +638,11 @@ a.donate {
 
 .share-ui {
   .share-link {
+    #long_input,
+    #short_input {
+      width: 190px;
+    }
+
     a {
       margin-left: 5px;
     }

From 98cd01c40dde8ddf41d9f2c50329004840aa9856 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 12:19:59 -0700
Subject: [PATCH 17/27] Toggle between Link / Short Link / HTML

---
 app/assets/javascripts/leaflet.share.js | 56 +++++++++++++------------
 app/assets/stylesheets/common.css.scss  | 27 ++++++++++++
 config/locales/en.yml                   |  4 +-
 3 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 15e4a72298..a32dfc20bb 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -34,7 +34,7 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
-    // Link
+    // Link / Embed
 
     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
@@ -62,11 +62,31 @@ L.OSM.share = function (options) {
           .append(I18n.t('javascripts.share.include_marker')));
 
     $('<div>')
-      .attr('class', 'form-row')
+      .attr('class', 'share-tabs')
       .appendTo($form)
       .append($('<label>')
+        .attr('class', 'active')
         .attr('for', 'long_input')
         .text(I18n.t('javascripts.share.long_link')))
+      .append($('<label>')
+        .attr('for', 'short_input')
+        .text(I18n.t('javascripts.share.short_link')))
+      .append($('<label>')
+        .attr('for', 'embed_html')
+        .text(I18n.t('javascripts.share.embed')))
+      .on('click', 'label', function() {
+        var id = '#' + $(this).attr('for');
+        $linkSection.find('.share-tabs label')
+          .removeClass('active');
+        $(this).addClass('active');
+        $linkSection.find('.share-tab').hide();
+        $linkSection.find('.share-tab:has(' + id + ')').show();
+      });
+
+    $('<div>')
+      .attr('class', 'form-row share-tab')
+      .css('display', 'block')
+      .appendTo($form)
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
@@ -78,11 +98,8 @@ L.OSM.share = function (options) {
           .attr('class', 'icon link')));
 
     $('<div>')
-      .attr('class', 'form-row')
+      .attr('class', 'form-row share-tab')
       .appendTo($form)
-      .append($('<label>')
-        .attr('for', 'short_input')
-        .text(I18n.t('javascripts.share.short_link')))
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
@@ -93,31 +110,18 @@ L.OSM.share = function (options) {
         .append($('<span>')
           .attr('class', 'icon link')));
 
-    // Embed
-
-    var $embedSection = $('<div>')
-      .attr('class', 'section share-embed')
-      .appendTo($ui);
-
-    var $form = $('<form>')
-      .attr('class', 'standard-form')
-      .appendTo($embedSection);
-
     $('<div>')
-      .attr('class', 'form-row')
+      .attr('class', 'form-row share-tab')
       .appendTo($form)
-      .append($('<label>')
-        .attr('for', 'embed_html')
-        .text(I18n.t('javascripts.share.embed')))
       .append(
         $('<textarea>')
           .attr('id', 'embed_html')
-          .on('click', select));
-
-    $('<p>')
-      .attr('class', 'deemphasize')
-      .text(I18n.t('javascripts.share.paste_html'))
-      .appendTo($linkSection);
+          .on('click', select))
+      .append(
+        $('<p>')
+          .attr('class', 'deemphasize')
+          .text(I18n.t('javascripts.share.paste_html'))
+          .appendTo($linkSection));
 
     // Image
 
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index bd313fe334..acd195a3dc 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -637,6 +637,33 @@ a.donate {
 }
 
 .share-ui {
+  .share-tabs {
+    margin-bottom: 10px;
+
+    label {
+      background-color: $lightblue;
+      padding: 5px 10px;
+    }
+
+    label:first-child {
+      border-right: 1px solid #fff;
+      border-radius: 4px 0 0 4px;
+    }
+
+    label:last-child {
+      border-left: 1px solid #fff;
+      border-radius: 0 4px 4px 0;
+    }
+
+    label.active {
+      background-color: $blue;
+    }
+  }
+
+  .share-tab {
+    display: none;
+  }
+
   .share-link {
     #long_input,
     #short_input {
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ae6f801916..7d417fecc3 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2053,9 +2053,9 @@ en:
       cancel: "Cancel"
       image: "Image"
       link: "Link or HTML"
+      long_link: "Link"
       short_link: "Short Link"
-      long_link: "Long Link"
-      embed: "Embeddable HTML"
+      embed: "HTML"
       custom_dimensions: "Set custom dimensions"
       format: "Format"
       scale: "Scale"

From 95ce2515d1cfe4f84d8368c5b67195ac7f6eeed0 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 12:24:26 -0700
Subject: [PATCH 18/27] Tweak labels

---
 app/assets/javascripts/leaflet.share.js | 2 --
 app/assets/stylesheets/common.css.scss  | 6 ++++++
 config/locales/en.yml                   | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index a32dfc20bb..58879475bc 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -157,7 +157,6 @@ L.OSM.share = function (options) {
       .appendTo($form)
       .append(
         $('<label>')
-          .attr('class', 'standard-label')
           .attr('for', 'mapnik_format')
           .text(I18n.t('javascripts.share.format')))
       .append($('<select>')
@@ -172,7 +171,6 @@ L.OSM.share = function (options) {
       .attr('class', 'form-row')
       .appendTo($form)
       .append($('<label>')
-        .attr('class', 'standard-label')
         .attr('for', 'mapnik_scale')
         .text(I18n.t('javascripts.share.scale')))
       .append('1 : ')
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index acd195a3dc..0db2c5302e 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -681,6 +681,12 @@ a.donate {
     }
   }
 
+  .share-image {
+    label {
+      margin-right: 10px;
+    }
+  }
+
   #embed_html {
     resize: vertical;
   }
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 7d417fecc3..aabe978f54 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2057,8 +2057,8 @@ en:
       short_link: "Short Link"
       embed: "HTML"
       custom_dimensions: "Set custom dimensions"
-      format: "Format"
-      scale: "Scale"
+      format: "Format:"
+      scale: "Scale:"
       image_size: "Image will show standard layer at "
       download: "Download"
       short_url: "Short URL"

From a125ee829a5df5c4947c951b39c9f49a0b40e65a Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 12:43:51 -0700
Subject: [PATCH 19/27] Include object in share link

---
 app/assets/javascripts/browse.js             |  4 +-
 app/assets/javascripts/index.js              |  4 +-
 app/assets/javascripts/leaflet.extend.js.erb | 64 ++++++++++++++++++--
 app/assets/javascripts/map.js.erb            | 40 ------------
 4 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/app/assets/javascripts/browse.js b/app/assets/javascripts/browse.js
index 023dc878dd..5d24121830 100644
--- a/app/assets/javascripts/browse.js
+++ b/app/assets/javascripts/browse.js
@@ -57,8 +57,8 @@ $(document).ready(function () {
       object.version = params.version - 1;
     }
 
-    addObjectToMap(object, map, {
-      zoom: true, 
+    map.addObject(object, {
+      zoom: true,
       callback: function(extent) {
         $("#loading").hide();
         $("#browse_map .geolink").show();
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 19e1f16de8..489a29c87e 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -136,7 +136,7 @@ $(document).ready(function () {
   }
 
   if (params.object) {
-    addObjectToMap(params.object, map, { zoom: params.object_zoom });
+    map.addObject(params.object, { zoom: params.object_zoom });
   }
 
   $("body").on("click", "a.set_position", setPositionLink(map));
@@ -195,7 +195,7 @@ function setPositionLink(map) {
       }
 
       if (data.type && data.id) {
-        addObjectToMap(data, map, { zoom: true, style: { opacity: 0.2, fill: false } });
+        map.addObject(data, { zoom: true, style: { opacity: 0.2, fill: false } });
       }
 
       map.markerLayer.clearLayers();
diff --git a/app/assets/javascripts/leaflet.extend.js.erb b/app/assets/javascripts/leaflet.extend.js.erb
index a50df013e5..a645ed253b 100644
--- a/app/assets/javascripts/leaflet.extend.js.erb
+++ b/app/assets/javascripts/leaflet.extend.js.erb
@@ -37,6 +37,10 @@ L.extend(L.Map.prototype, {
       params.mlon = marker.getLatLng().lng.toFixed(precision);
     }
 
+    if (this._object) {
+      params[this._object.type] = this._object.id;
+    }
+
     var url = 'http://' + OSM.SERVER_URL + '/',
       query = querystring.stringify(params),
       hash = OSM.formatHash(this);
@@ -50,7 +54,8 @@ L.extend(L.Map.prototype, {
   getShortUrl: function(marker) {
     var zoom = this.getZoom(),
       latLng = marker && this.hasLayer(marker) ? marker.getLatLng() : this.getCenter(),
-      str = '',
+      str = window.location.hostname.match(/^www\.openstreetmap\.org/i) ?
+        'http://osm.org/go/' : 'http://' + window.location.hostname + '/go/',
       char_array = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_~",
       x = Math.round((latLng.lng + 180.0) * ((1 << 30) / 90.0)),
       y = Math.round((latLng.lat + 90.0) * ((1 << 30) / 45.0)),
@@ -83,12 +88,63 @@ L.extend(L.Map.prototype, {
       return (x << 1) | y;
     }
 
+    var params = {};
+
     if (marker && this.hasLayer(marker)) {
-      str += '?m'
+      params.m = '';
+    }
+
+    if (this._object) {
+      params[this._object.type] = this._object.id;
+    }
+
+    var query = querystring.stringify(params);
+    if (query) {
+      str += '?' + query;
     }
 
-    return (window.location.hostname.match(/^www\.openstreetmap\.org/i) ?
-            'http://osm.org/go/' : 'http://' + window.location.hostname + '/go/') + str;
+    return str;
+  },
+
+  addObject: function(object, options) {
+    this._object = object;
+
+    if (this._objectLoader) this._objectLoader.abort();
+    if (this._objectLayer) this.removeLayer(this._objectLayer);
+
+    var map = this;
+    this._objectLoader = $.ajax({
+      url: OSM.apiUrl(object),
+      dataType: "xml",
+      success: function (xml) {
+        map._objectLayer = new L.OSM.DataLayer(null, {
+          styles: {
+            node: options.style,
+            way: options.style,
+            area: options.style
+          }
+        });
+
+        map._objectLayer.interestingNode = function (node, ways, relations) {
+          if (object.type === "node") {
+            return true;
+          } else if (object.type === "relation") {
+            for (var i = 0; i < relations.length; i++)
+              if (relations[i].members.indexOf(node) != -1)
+                return true;
+          } else {
+            return false;
+          }
+        };
+
+        map._objectLayer.addData(xml);
+
+        if (options.zoom) map.fitBounds(map._objectLayer.getBounds());
+        if (options.callback) options.callback(map._objectLayer.getBounds());
+
+        map._objectLayer.addTo(map);
+      }
+    });
   }
 });
 
diff --git a/app/assets/javascripts/map.js.erb b/app/assets/javascripts/map.js.erb
index 6d26763f89..98299070d2 100644
--- a/app/assets/javascripts/map.js.erb
+++ b/app/assets/javascripts/map.js.erb
@@ -1,5 +1,3 @@
-var objectLoader;
-
 function getUserIcon(url) {
   return L.icon({
     iconUrl: url || <%= asset_path('marker-red.png').to_json %>,
@@ -10,41 +8,3 @@ function getUserIcon(url) {
     shadowSize: [41, 41]
   });
 }
-
-function addObjectToMap(object, map, options) {
-  if (objectLoader) objectLoader.abort();
-  if (map.objectLayer) map.removeLayer(map.objectLayer);
-
-  objectLoader = $.ajax({
-    url: OSM.apiUrl(object),
-    dataType: "xml",
-    success: function (xml) {
-      map.objectLayer = new L.OSM.DataLayer(null, {
-        styles: {
-          node: options.style,
-          way: options.style,
-          area: options.style
-        }
-      });
-
-      map.objectLayer.interestingNode = function (node, ways, relations) {
-        if (object.type === "node") {
-          return true;
-        } else if (object.type === "relation") {
-          for (var i = 0; i < relations.length; i++)
-            if (relations[i].members.indexOf(node) != -1)
-              return true;
-        } else {
-          return false;
-        }
-      };
-
-      map.objectLayer.addData(xml);
-
-      if (options.zoom) map.fitBounds(map.objectLayer.getBounds());
-      if (options.callback) options.callback(map.objectLayer.getBounds());
-
-      map.objectLayer.addTo(map);
-    }
-  });
-}

From fa9b4a5f6a00fd862ce3230a64d6c6c89c7fbb6c Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 13:56:51 -0700
Subject: [PATCH 20/27] Add/remove active class on map UI buttons

---
 app/assets/javascripts/index/notes.js.erb |  8 ++++----
 app/assets/javascripts/leaflet.key.js     |  4 ++--
 app/assets/javascripts/leaflet.layers.js  |  4 ++--
 app/assets/javascripts/leaflet.share.js   |  4 ++--
 app/assets/javascripts/leaflet.sidebar.js | 12 ++++++++++--
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/index/notes.js.erb b/app/assets/javascripts/index/notes.js.erb
index 93b60c3e7a..63576c06ca 100644
--- a/app/assets/javascripts/index/notes.js.erb
+++ b/app/assets/javascripts/index/notes.js.erb
@@ -190,7 +190,7 @@ function initializeNotes(map, params) {
       notes[feature.properties.id] = updateMarker(marker, feature);
       newNote = null;
 
-      addNoteButton.removeClass("disabled").addClass("geolink");
+      addNoteButton.removeClass("active").addClass("geolink");
     }
   }
 
@@ -223,9 +223,9 @@ function initializeNotes(map, params) {
     e.preventDefault();
     e.stopPropagation();
 
-    if (addNoteButton.hasClass("disabled")) return;
+    if (addNoteButton.hasClass("active")) return;
 
-    addNoteButton.removeClass("geolink").addClass("disabled");
+    addNoteButton.removeClass("geolink").addClass("active");
 
     map.addLayer(noteLayer);
 
@@ -262,7 +262,7 @@ function initializeNotes(map, params) {
     newNote.addTo(noteLayer).bindPopup(popupContent[0], popupOptions()).openPopup();
 
     newNote.on("remove", function (e) {
-      addNoteButton.removeClass("disabled").addClass("geolink");
+      addNoteButton.removeClass("active").addClass("geolink");
     }).on("dragstart", function (e) {
       $(newNote).stopTime("removenote");
     }).on("dragend", function (e) {
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index c5124e39d6..1c219d9538 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -5,7 +5,7 @@ L.OSM.key = function (options) {
     var $container = $('<div>')
       .attr('class', 'control-key');
 
-    $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', I18n.t('javascripts.key.tooltip'))
@@ -51,7 +51,7 @@ L.OSM.key = function (options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     function update() {
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index edcbfbd4dd..a364588c1d 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -7,7 +7,7 @@ L.OSM.layers = function(options) {
     var $container = $('<div>')
       .attr('class', 'control-layers');
 
-    var link = $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', 'Layers')
@@ -156,7 +156,7 @@ L.OSM.layers = function(options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     return $container[0];
diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 58879475bc..6dd420cbef 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -10,7 +10,7 @@ L.OSM.share = function (options) {
     var $container = $('<div>')
       .attr('class', 'control-share');
 
-    $('<a>')
+    var button = $('<a>')
       .attr('class', 'control-button')
       .attr('href', '#')
       .attr('title', 'Share')
@@ -230,7 +230,7 @@ L.OSM.share = function (options) {
       marker.setLatLng(map.getCenter());
 
       update();
-      options.sidebar.togglePane($ui);
+      options.sidebar.togglePane($ui, button);
     }
 
     function toggleMarker() {
diff --git a/app/assets/javascripts/leaflet.sidebar.js b/app/assets/javascripts/leaflet.sidebar.js
index 8c4dee308a..db9e7aef25 100644
--- a/app/assets/javascripts/leaflet.sidebar.js
+++ b/app/assets/javascripts/leaflet.sidebar.js
@@ -2,6 +2,7 @@ L.OSM.sidebar = function(selector) {
   var control = {},
     sidebar = $(selector),
     current = $(),
+    currentButton  = $(),
     map;
 
   control.addTo = function (_) {
@@ -15,17 +16,21 @@ L.OSM.sidebar = function(selector) {
       .appendTo(sidebar);
   };
 
-  control.togglePane = function(pane) {
+  control.togglePane = function(pane, button) {
     current
       .hide()
       .trigger('hide');
 
+    currentButton
+      .removeClass('active');
+
     if (current === pane) {
       $(sidebar).hide();
-      current = $();
+      current = currentButton = $();
     } else {
       $(sidebar).show();
       current = pane;
+      currentButton = button || $();
     }
 
     map.invalidateSize({pan: false, animate: false});
@@ -33,6 +38,9 @@ L.OSM.sidebar = function(selector) {
     current
       .show()
       .trigger('show');
+
+    currentButton
+      .addClass('active');
   };
 
   return control;

From 48775da938fcfa29902b1d18fdde80aadc17c249 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 14:07:28 -0700
Subject: [PATCH 21/27] Make the toggles themselves permalinks

---
 app/assets/javascripts/leaflet.share.js | 36 ++++++++++++-------------
 app/assets/stylesheets/common.css.scss  | 22 ++++++---------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index 6dd420cbef..d43bc8ad26 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -64,23 +64,31 @@ L.OSM.share = function (options) {
     $('<div>')
       .attr('class', 'share-tabs')
       .appendTo($form)
-      .append($('<label>')
+      .append($('<a>')
         .attr('class', 'active')
         .attr('for', 'long_input')
+        .attr('id', 'long_link')
         .text(I18n.t('javascripts.share.long_link')))
-      .append($('<label>')
+      .append($('<a>')
         .attr('for', 'short_input')
+        .attr('id', 'short_link')
         .text(I18n.t('javascripts.share.short_link')))
-      .append($('<label>')
+      .append($('<a>')
         .attr('for', 'embed_html')
+        .attr('href', '#')
         .text(I18n.t('javascripts.share.embed')))
-      .on('click', 'label', function() {
+      .on('click', 'a', function(e) {
+        e.preventDefault();
         var id = '#' + $(this).attr('for');
-        $linkSection.find('.share-tabs label')
+        $linkSection.find('.share-tabs a')
           .removeClass('active');
         $(this).addClass('active');
-        $linkSection.find('.share-tab').hide();
-        $linkSection.find('.share-tab:has(' + id + ')').show();
+        $linkSection.find('.share-tab')
+          .hide();
+        $linkSection.find('.share-tab:has(' + id + ')')
+          .show()
+          .find('input, textarea')
+          .select();
       });
 
     $('<div>')
@@ -90,12 +98,7 @@ L.OSM.share = function (options) {
       .append($('<input>')
         .attr('id', 'long_input')
         .attr('type', 'text')
-        .on('click', select))
-      .append($('<a>')
-        .attr('id', 'long_link')
-        .on('click', function() { return false; })
-        .append($('<span>')
-          .attr('class', 'icon link')));
+        .on('click', select));
 
     $('<div>')
       .attr('class', 'form-row share-tab')
@@ -103,12 +106,7 @@ L.OSM.share = function (options) {
       .append($('<input>')
         .attr('id', 'short_input')
         .attr('type', 'text')
-        .on('click', select))
-      .append($('<a>')
-        .attr('id', 'short_link')
-        .on('click', function() { return false; })
-        .append($('<span>')
-          .attr('class', 'icon link')));
+        .on('click', select));
 
     $('<div>')
       .attr('class', 'form-row share-tab')
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 0db2c5302e..19ad55d316 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -640,22 +640,24 @@ a.donate {
   .share-tabs {
     margin-bottom: 10px;
 
-    label {
+    a {
+      color: #fff;
+      text-decoration: none;
       background-color: $lightblue;
       padding: 5px 10px;
     }
 
-    label:first-child {
+    a:first-child {
       border-right: 1px solid #fff;
       border-radius: 4px 0 0 4px;
     }
 
-    label:last-child {
+    a:last-child {
       border-left: 1px solid #fff;
       border-radius: 0 4px 4px 0;
     }
 
-    label.active {
+    a.active {
       background-color: $blue;
     }
   }
@@ -665,17 +667,9 @@ a.donate {
   }
 
   .share-link {
-    #long_input,
-    #short_input {
-      width: 190px;
-    }
-
-    a {
-      margin-left: 5px;
-    }
-
-    input,
+    input[type=text],
     textarea {
+      width: 100%;
       font-family: monospace;
       font-size: small;
     }

From 160f7b26e808f1288508aeadaeba9df6282637f6 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 14:11:56 -0700
Subject: [PATCH 22/27] Fix map control style on non-main page maps

---
 app/assets/stylesheets/common.css.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 19ad55d316..c90aa91450 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -551,6 +551,7 @@ a.donate {
   border-radius: 0;
 }
 
+.leaflet-control .zoomout, // For non-main page maps
 .control-locate .control-button,
 .control-share .control-button {
   border-radius: 0 0 0 4px;
@@ -690,8 +691,7 @@ a.donate {
   }
 }
 
-.site-index .leaflet-top,
-.site-export .leaflet-top {
+.leaflet-top.leaflet-right {
   top: $lineheight/2 !important;
   .leaflet-control {
     margin-right: 0px !important;

From 21ad851612156ce977cfefc59c90898fff72266a Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Wed, 31 Jul 2013 15:10:29 -0700
Subject: [PATCH 23/27] Reset filter bounds whenever it's enabled

---
 app/assets/javascripts/leaflet.share.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index d43bc8ad26..d58b62313b 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -243,10 +243,7 @@ L.OSM.share = function (options) {
 
     function toggleFilter() {
       if ($(this).is(':checked')) {
-        if (!locationFilter.getBounds().isValid()) {
-          locationFilter.setBounds(map.getBounds().pad(-0.2));
-        }
-
+        locationFilter.setBounds(map.getBounds().pad(-0.2));
         locationFilter.enable();
       } else {
         locationFilter.disable();

From 49b0dd4af534300899b54a1ad3cb373b803e922f Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 5 Aug 2013 08:37:51 -0700
Subject: [PATCH 24/27] Fix heart icon color

---
 app/assets/images/sprite.png | Bin 2934 -> 2955 bytes
 app/assets/images/sprite.svg |   8 ++++----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/images/sprite.png b/app/assets/images/sprite.png
index 00c67777fca95d33253c82d59d61e4792a7fcc46..108c38c87a2f0ba77dde89462fd5722b42e6cc61 100644
GIT binary patch
literal 2955
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
VL!l6ewd`>QxH)?|)n7pV`WM)hfh7O{

literal 2934
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

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index 89f101690c..dea2cccc1b 100644
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@@ -13,7 +13,7 @@
    height="200"
    id="svg2"
    version="1.1"
-   inkscape:version="0.48.2 r9819"
+   inkscape:version="0.48.4 r9939"
    inkscape:export-filename="/Users/tmcw/src/openstreetmap-website/app/assets/images/sprite.png"
    inkscape:export-xdpi="90"
    inkscape:export-ydpi="90"
@@ -27,8 +27,8 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="200.95282"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="82.865988"
      inkscape:cy="195.08379"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
@@ -145,7 +145,7 @@
      id="layer1"
      transform="translate(0,-852.36218)">
     <path
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
        d="m 24,860.36218 c 0,-1.82764 1,-4 3.75,-4 1.827643,0 2.75,2 2.75,2 0,0 0.922357,-2 2.75,-2 2.75,0 3.75,2.17236 3.75,4 0,5 -6.5,8 -6.5,8 0,0 -6.5,-3 -6.5,-8 z"
        id="path3843"
        inkscape:connector-curvature="0"

From a89d75d3d8824c2a4c2c3567083afc986c3b18a6 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 5 Aug 2013 12:27:37 -0700
Subject: [PATCH 25/27] Recenter marker on map pan/zoom

---
 app/assets/javascripts/leaflet.share.js | 23 +++++++++++++++++++++--
 vendor/assets/leaflet/leaflet.js        | 19 +++++++++++++++----
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js
index d58b62313b..441acfd746 100644
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -206,8 +206,9 @@ L.OSM.share = function (options) {
       .on('change', update)
       .addTo(map);
 
+    marker.on('dragend', movedMarker);
+    map.on('move', movedMap);
     map.on('moveend layeradd layerremove', update);
-    marker.on('dragend', update);
 
     options.sidebar.addPane($ui);
 
@@ -216,6 +217,7 @@ L.OSM.share = function (options) {
 
     function hidden() {
       map.removeLayer(marker);
+      map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
       locationFilter.disable();
       update();
     }
@@ -235,8 +237,10 @@ L.OSM.share = function (options) {
       if ($(this).is(':checked')) {
         marker.setLatLng(map.getCenter());
         map.addLayer(marker);
+        map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
       } else {
         map.removeLayer(marker);
+        map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
       }
       update();
     }
@@ -251,11 +255,26 @@ L.OSM.share = function (options) {
       update();
     }
 
-    function update() {
+    function movedMap() {
+      marker.setLatLng(map.getCenter());
+      update();
+    }
+
+    function movedMarker() {
       if (map.hasLayer(marker)) {
+        map.off('move', movedMap);
+        map.on('moveend', updateOnce);
         map.panTo(marker.getLatLng());
       }
+    }
 
+    function updateOnce() {
+      map.off('moveend', updateOnce);
+      map.on('move', movedMap);
+      update();
+    }
+
+    function update() {
       var bounds = map.getBounds();
 
       $('#link_marker')
diff --git a/vendor/assets/leaflet/leaflet.js b/vendor/assets/leaflet/leaflet.js
index 794496b351..17fbc626bb 100644
--- a/vendor/assets/leaflet/leaflet.js
+++ b/vendor/assets/leaflet/leaflet.js
@@ -6765,15 +6765,22 @@ L.Map.mergeOptions({
 
 L.Map.DoubleClickZoom = L.Handler.extend({
 	addHooks: function () {
-		this._map.on('dblclick', this._onDoubleClick);
+		this._map.on('dblclick', this._onDoubleClick, this);
 	},
 
 	removeHooks: function () {
-		this._map.off('dblclick', this._onDoubleClick);
+		this._map.off('dblclick', this._onDoubleClick, this);
 	},
 
 	_onDoubleClick: function (e) {
-		this.setZoomAround(e.containerPoint, this._zoom + 1);
+		var map = this._map,
+		    zoom = map.getZoom() + 1;
+
+		if (map.options.doubleClickZoom === 'center') {
+			map.setZoom(zoom);
+		} else {
+			map.setZoomAround(e.containerPoint, zoom);
+		}
 	}
 });
 
@@ -6833,7 +6840,11 @@ L.Map.ScrollWheelZoom = L.Handler.extend({
 
 		if (!delta) { return; }
 
-		map.setZoomAround(this._lastMousePos, zoom + delta);
+		if (map.options.scrollWheelZoom === 'center') {
+			map.setZoom(zoom + delta);
+		} else {
+			map.setZoomAround(this._lastMousePos, zoom + delta);
+		}
 	}
 });
 

From 406e93de958e2c88b4fe5a5ff58ad6c6c0b16539 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 5 Aug 2013 14:30:50 -0700
Subject: [PATCH 26/27] Port fix for Leaflet issue #1919

---
 vendor/assets/leaflet/leaflet.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/vendor/assets/leaflet/leaflet.js b/vendor/assets/leaflet/leaflet.js
index 17fbc626bb..b972941d97 100644
--- a/vendor/assets/leaflet/leaflet.js
+++ b/vendor/assets/leaflet/leaflet.js
@@ -1752,6 +1752,7 @@ L.Map = L.Class.extend({
 
 		var oldSize = this.getSize();
 		this._sizeChanged = true;
+		this._initialCenter = null;
 
 		if (this.options.maxBounds) {
 			this.setMaxBounds(this.options.maxBounds);
@@ -1825,7 +1826,7 @@ L.Map = L.Class.extend({
 	getCenter: function () { // (Boolean) -> LatLng
 		this._checkIfLoaded();
 
-		if (!this._moved()) {
+		if (this._initialCenter && !this._moved()) {
 			return this._initialCenter;
 		}
 		return this.layerPointToLatLng(this._getCenterLayerPoint());

From 34e251c225c7903b64f1fda2b594dd1c70aeeb93 Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 5 Aug 2013 16:22:49 -0700
Subject: [PATCH 27/27] Disable map key on non-default layers

---
 app/assets/javascripts/index.js        | 22 ++++++-------------
 app/assets/javascripts/leaflet.key.js  | 13 ++++++++++-
 app/assets/stylesheets/common.css.scss | 30 +++++++++++++++-----------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 489a29c87e..4724351ce6 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -48,7 +48,12 @@ $(document).ready(function () {
     })
   ];
 
-  layers[0].addTo(map);
+  for (var i = layers.length - 1; i >= 0; i--) {
+    if (i === 0 || params.layers.indexOf(layers[i].options.code) >= 0) {
+      map.addLayer(layers[i]);
+      break;
+    }
+  }
 
   map.noteLayer = new L.LayerGroup();
   map.noteLayer.options = {code: 'N'};
@@ -116,21 +121,6 @@ $(document).ready(function () {
     }).addTo(map);
   }
 
-  if (params.layers) {
-    var foundLayer = false;
-    for (var i = 0; i < layers.length; i++) {
-      if (params.layers.indexOf(layers[i].options.code) >= 0) {
-        map.addLayer(layers[i]);
-        foundLayer = true;
-      } else {
-        map.removeLayer(layers[i]);
-      }
-    }
-    if (!foundLayer) {
-      map.addLayer(layers[0]);
-    }
-  }
-
   if (params.marker) {
     L.marker([params.mlat, params.mlon], {icon: getUserIcon()}).addTo(map.markerLayer);
   }
diff --git a/app/assets/javascripts/leaflet.key.js b/app/assets/javascripts/leaflet.key.js
index 1c219d9538..d88ce5d6e2 100644
--- a/app/assets/javascripts/leaflet.key.js
+++ b/app/assets/javascripts/leaflet.key.js
@@ -39,6 +39,10 @@ L.OSM.key = function (options) {
       .on('show', shown)
       .on('hide', hidden);
 
+    map.on('baselayerchange', updateButton);
+
+    updateButton();
+
     function shown() {
       map.on('zoomend baselayerchange', update);
       $section.load('/key', update);
@@ -51,7 +55,14 @@ L.OSM.key = function (options) {
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();
-      options.sidebar.togglePane($ui, button);
+      if (!button.hasClass('disabled')) {
+        options.sidebar.togglePane($ui, button);
+      }
+    }
+
+    function updateButton() {
+      var layer = map.getMapBaseLayerId();
+      button.toggleClass('disabled', layer !== 'mapnik');
     }
 
     function update() {
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index c90aa91450..df5edbf7ea 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -537,6 +537,24 @@ a.donate {
   border-radius: 4px 0 0 4px;
   margin-bottom: 10px;
   outline: none;
+
+  &:hover {
+    background-color: black;
+  }
+
+  &.active {
+    background-color: #9ed485;
+  }
+
+  &.disabled {
+    background-color: #333;
+    background-color: rgba(0,0,0,.5);
+    cursor: default;
+  }
+
+  .icon {
+    margin: 10px;
+  }
 }
 
 .leaflet-control .zoomin,
@@ -557,18 +575,6 @@ a.donate {
   border-radius: 0 0 0 4px;
 }
 
-.leaflet-control .control-button:hover {
-  background-color: black;
-}
-
-.leaflet-control .control-button.active {
-  background-color: #9ed485;
-}
-
-.leaflet-control .control-button .icon {
-  margin: 10px;
-}
-
 /* Rules for the home page */
 
 .site-export #map,