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.

diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js
index 47830f8beea33111284db05b264eebdaeb694650..aec35ed2b19cfcfb1b5852f364e25a904b39a050 100644 (file)
--- a/app/assets/javascripts/index/export.js
+++ b/app/assets/javascripts/index/export.js
@@ -1,61 +1,32 @@
 function initializeExport(map) {
 function initializeExport(map) {

-  $("#exportanchor").click(function (e) {
-    $.ajax({ url: $(this).data('url'), success: function (sidebarHtml) {
-      startExport(sidebarHtml);
-    }});
-    e.preventDefault();
-  });
-

   if (window.location.pathname == "/export") {
   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);
 
     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_title").html(I18n.t('export.start_rjs.export'));

-    $("#sidebar_content").html(sidebarHtml);

 
     $("#maxlat,#minlon,#maxlon,#minlat").change(boundsChanged);
 
     $("#drag_box").click(enableFilter);
 
 
     $("#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();
 
     openSidebar();
 

-    if (map.getMapBaseLayerId() == "mapnik") {
-      $("#format_mapnik").prop("checked", true);
-    }
-

     setBounds(map.getBounds());
     setBounds(map.getBounds());

-    formatChanged();
-
-    $("body").removeClass("site-index").addClass("site-export");

 
     $("#sidebar").one("closed", function () {
 
     $("#sidebar").one("closed", function () {

-      $("body").removeClass("site-export").addClass("site-index");
-

       map.removeLayer(locationFilter);
       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() {
     });
 
     function getBounds() {


@@ -63,22 +34,6 @@ function initializeExport(map) {
                             L.latLng($("#maxlat").val(), $("#maxlon").val()));
     }
 
                             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();
 
     function boundsChanged() {
       var bounds = getBounds();
 


@@ -87,7 +42,6 @@ function initializeExport(map) {
 
       enableFilter();
       validateControls();
 
       enableFilter();
       validateControls();

-      mapnikSizeChanged();

     }
 
     function enableFilter() {
     }
 
     function enableFilter() {


@@ -99,186 +53,21 @@ function initializeExport(map) {
       locationFilter.enable();
     }
 
       locationFilter.enable();
     }
 

-    function filterChanged() {
-      setBounds(locationFilter.getBounds());
+    function update() {
+      setBounds(locationFilter.isEnabled() ? locationFilter.getBounds() : map.getBounds());

       validateControls();
     }
 
       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());
     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));
       $("#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() {
     }
 
     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 bea877e6686c0da8be68412fd808cc5c55f1e5e4..7880abe14060817337ffef359c850ff44ea3a561 100644 (file)
--- a/app/assets/javascripts/leaflet.share.js
+++ b/app/assets/javascripts/leaflet.share.js
@@ -1,5 +1,10 @@
 L.OSM.share = function (options) {
 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>')
 
   control.onAdd = function (map) {
     var $container = $('<div>')


@@ -29,6 +34,8 @@ L.OSM.share = function (options) {
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 
         $('<h4>')
           .text(I18n.t('javascripts.share.title')));
 

+    // Link
+

     var $linkSection = $('<div>')
       .attr('class', 'section share-link')
       .appendTo($ui);
     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'))));
 
         .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);
     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();
     function toggle(e) {
       e.stopPropagation();
       e.preventDefault();

+
+      $('#mapnik_scale').val(getScale());
+      marker.setLatLng(map.getCenter());
+
+      update();

       options.sidebar.togglePane($ui);
       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() {
       update();
     }
 
     function update() {

+      // Link
+

       $shortLink.attr('href', map.getShortUrl());
       $longLink.attr('href', map.getUrl());
       $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 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];
   };
 
     return $container[0];
   };
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index e157977d839a415ade02b8f8942bc47a4e11df84..9ea4b0dfae28e84fb352cd88d5a51eed51079633 100644 (file)
--- 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,
 
 .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;
   border-bottom: 1px solid #aaa;
   background: #9ed485;
   color: #000;


@@ -638,9 +637,19 @@ a.donate {
   .share-link {
     li {
       display: inline-block;
   .share-link {
     li {
       display: inline-block;

+      text-align: center;

       width: 50%;
     }
   }
       width: 50%;
     }
   }

+
+  #embed_html {
+    font-family: monospace;
+    font-size: small;
+  }
+
+  #mapnik_scale {
+    width: 100px;
+  }

 }
 
 .site-index .leaflet-top,
 }
 
 .site-index .leaflet-top,


@@ -851,20 +860,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   margin: $lineheight/4;
 }
 
   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 {
 /* Rules for the main content area */
 
 #content {

diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb
index cdb16970fb02787e67dc411e668f3918932f80b9..deccd805d5cdbdf5acf3ce66901ff252bceb6ed2 100644 (file)
--- 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'>
 
   <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>
 
     <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>
 
   <div id="export_osm">
     <h4><%= t'export.start.licence' %></h4>
 


@@ -46,37 +29,7 @@
     </div>
   </div>
 
     </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>
   <div class="inner12">
     <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
   </div>

-

 <% end %>
 <% end %>

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 0ba203fde18a1c0e4b0c9b31a551a51ebdd11ca9..44edfc6d129aa7f6273192b49dddcbec969975b1 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -58,10 +58,13 @@
           </ul>
         </li>
         <li>
           </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>
         </li>
         <%= yield :left_menu %>
       </ul>


@@ -123,12 +126,6 @@
           :title => t('javascripts.site.history_tooltip'),
           :class => 'geolink bbox'
         } %></li>
           :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">
       </ul>
     </div>
     <div id="editmenu" class="menu">

diff --git a/app/views/site/_sidebar.html.erb b/app/views/site/_sidebar.html.erb
index db5f44356c1292d4959268d9bec54b385a995b7e..cc3cf48150e228d24a70270802297aa8ae6f0e0e 100644 (file)
--- 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">
     <a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
   </div>
   <div id="sidebar_content">

+    <%= render :template => 'export/start' if params[:export] %>

   </div>
 </div>
   </div>
 </div>

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 06944ce4e3ee70bd0b0f7c0e87ab2ed279e12be5..a1cc91fdefe6e9e84d6beb0826298cb37c6c8d2e 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -980,8 +980,8 @@ en:
     view_tooltip: View the map
     edit: Edit
     history: History
     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
     gps_traces: GPS Traces
     gps_traces_tooltip: Manage GPS traces
     user_diaries: User Diaries


@@ -2039,9 +2039,19 @@ en:
     share:
       title: "Share"
       cancel: "Cancel"
     share:
       title: "Share"
       cancel: "Cancel"

+      image: "Image"

       link: "Link"
       short_link: "Short Link"
       long_link: "Long Link"
       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"
     key:
       title: "Map Key"
       tooltip: "Map Key"