"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.
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() {
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();
enableFilter();
validateControls();
- mapnikSizeChanged();
}
function enableFilter() {
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() + "&layer=" + layerName;
- var markerUrl = "";
-
- if ($("#marker_lat").val() && $("#marker_lon").val()) {
- markerUrl = "&mlat=" + $("#marker_lat").val() + "&mlon=" + $("#marker_lon").val();
- url += "&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+'&lon='+center.lng+'&zoom='+zoom+'&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);
}
}
}
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>')
$('<h4>')
.text(I18n.t('javascripts.share.title')));
+ // Link
+
var $linkSection = $('<div>')
.attr('class', 'section share-link')
.appendTo($ui);
.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);
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];
};
.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;
.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,
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 {
-<%= 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'>
<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>
</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 %>
</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>
: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">
<a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
</div>
<div id="sidebar_content">
+ <%= render :template => 'export/start' if params[:export] %>
</div>
</div>
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
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"
projects / rails.git / commitdiff