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.
This commit is contained in:
John Firebaugh
parent
b8f126bcf6
commit
438e8be102
7 changed files with 276 additions and 298 deletions
|
|
@ -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() + "&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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue