X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/36fac06bd5ae1b9c26e44945c41053e0ce6829f1..56b2fdf5c9915b02c8bf051e4f82927ae72c8c41:/app/assets/javascripts/leaflet.share.js diff --git a/app/assets/javascripts/leaflet.share.js b/app/assets/javascripts/leaflet.share.js index 9c3d94218..d4c829532 100644 --- a/app/assets/javascripts/leaflet.share.js +++ b/app/assets/javascripts/leaflet.share.js @@ -1,51 +1,358 @@ -//= require templates/map/share - -L.Control.Share = L.Control.extend({ - options: { - position: 'topright', - title: 'Share' - }, - - onAdd: function (map) { - var className = 'leaflet-control-locate', - classNames = className + ' leaflet-control-zoom leaflet-bar leaflet-control', - container = L.DomUtil.create('div', classNames); - - var self = this; - this._layer = new L.LayerGroup(); - this._layer.addTo(map); - this._event = undefined; - - var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container); - link.href = '#'; - link.title = this.options.title; - - this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container); - - L.DomEvent - .on(link, 'click', L.DomEvent.stopPropagation) - .on(link, 'click', L.DomEvent.preventDefault) - .on(link, 'click', this.toggle, this) - .on(link, 'dblclick', L.DomEvent.stopPropagation); - - return container; - }, - - toggle: function() { - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - - if ($(this._uiPane).is(':visible')) { - $(this._uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - } else { - $(this._uiPane) - .show() - .html(JST["templates/map/share"]()); - controlContainer.css({paddingRight: '200px'}); - } - } -}); - -L.control.share = function(options) { - return new L.Control.Share(options); +L.OSM.share = function (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 = $('
') + .attr('class', 'deemphasize') + .text(I18n.t('javascripts.share.paste_html')) + .appendTo($linkSection)); + + // Image + + var $imageSection = $('
') + .attr('class', 'deemphasize') + .html(I18n.t('javascripts.share.image_size') + ' x ') + .appendTo($form); + + $('') + .attr('type', 'submit') + .attr('value', I18n.t('javascripts.share.download')) + .appendTo($form); + + locationFilter + .on('change', update) + .addTo(map); + + marker.on('dragend', movedMarker); + map.on('move', movedMap); + map.on('moveend layeradd layerremove', update); + + options.sidebar.addPane($ui); + + $ui + .on('hide', hidden); + + function hidden() { + map.removeLayer(marker); + map.options.scrollWheelZoom = map.options.doubleClickZoom = true; + locationFilter.disable(); + update(); + } + + function toggle(e) { + e.stopPropagation(); + e.preventDefault(); + + $('#mapnik_scale').val(getScale()); + marker.setLatLng(map.getCenter()); + + update(); + options.sidebar.togglePane($ui, button); + $('.leaflet-control .control-button').tooltip('hide'); + } + + function toggleMarker() { + 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(); + } + + function toggleFilter() { + if ($(this).is(':checked')) { + locationFilter.setBounds(map.getBounds().pad(-0.2)); + locationFilter.enable(); + } else { + locationFilter.disable(); + } + 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') + .prop('checked', map.hasLayer(marker)); + + $('#image_filter') + .prop('checked', locationFilter.isEnabled()); + + // Link / 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(), + layer: map.getMapBaseLayerId() + }; + + if (map.hasLayer(marker)) { + var latLng = marker.getLatLng().wrap(); + params.marker = latLng.lat + ',' + latLng.lng; + } + + $('#embed_html').val( + '' + + '' + + escapeHTML(I18n.t('javascripts.share.view_larger_map')) + ''); + + // 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]; + }; + + return control; };