]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.share.js
Undo commenting out code
[rails.git] / app / assets / javascripts / leaflet.share.js
1 L.OSM.share = function (options) {
2   var control = L.control(options),
3     marker = L.marker([0, 0], {draggable: true}),
4     locationFilter = new L.LocationFilter({
5       enableButton: false,
6       adjustButton: false
7     });
8
9   control.onAdd = function (map) {
10     var $container = $('<div>')
11       .attr('class', 'control-share');
12
13     var button = $('<a>')
14       .attr('class', 'control-button')
15       .attr('href', '#')
16       .attr('title', I18n.t('javascripts.share.title'))
17       .html('<span class="icon share"></span>')
18       .on('click', toggle)
19       .appendTo($container);
20
21     var $ui = $('<div>')
22       .attr('class', 'share-ui');
23
24     $('<div>')
25       .attr('class', 'sidebar_heading')
26       .appendTo($ui)
27       .append(
28         $('<span>')
29           .text(I18n.t('javascripts.close'))
30           .attr('class', 'icon close')
31           .bind('click', toggle))
32       .append(
33         $('<h4>')
34           .text(I18n.t('javascripts.share.title')));
35
36     // Link / Embed
37
38     var $linkSection = $('<div>')
39       .attr('class', 'section share-link')
40       .appendTo($ui);
41
42     $('<h4>')
43       .text(I18n.t('javascripts.share.link'))
44       .appendTo($linkSection);
45
46     var $form = $('<form>')
47       .attr('class', 'standard-form')
48       .appendTo($linkSection);
49
50     $('<div>')
51       .attr('class', 'form-row')
52       .appendTo($form)
53       .append(
54         $('<label>')
55           .attr('for', 'link_marker')
56           .append(
57             $('<input>')
58               .attr('id', 'link_marker')
59               .attr('type', 'checkbox')
60               .bind('change', toggleMarker))
61           .append(I18n.t('javascripts.share.include_marker')));
62
63     $('<div>')
64       .attr('class', 'share-tabs')
65       .appendTo($form)
66       .append($('<a>')
67         .attr('class', 'active')
68         .attr('for', 'long_input')
69         .attr('id', 'long_link')
70         .text(I18n.t('javascripts.share.long_link')))
71       .append($('<a>')
72         .attr('for', 'short_input')
73         .attr('id', 'short_link')
74         .text(I18n.t('javascripts.share.short_link')))
75       .append($('<a>')
76         .attr('for', 'embed_html')
77         .attr('href', '#')
78         .text(I18n.t('javascripts.share.embed')))
79       .on('click', 'a', function(e) {
80         e.preventDefault();
81         var id = '#' + $(this).attr('for');
82         $linkSection.find('.share-tabs a')
83           .removeClass('active');
84         $(this).addClass('active');
85         $linkSection.find('.share-tab')
86           .hide();
87         $linkSection.find('.share-tab:has(' + id + ')')
88           .show()
89           .find('input, textarea')
90           .select();
91       });
92
93     $('<div>')
94       .attr('class', 'form-row share-tab')
95       .css('display', 'block')
96       .appendTo($form)
97       .append($('<input>')
98         .attr('id', 'long_input')
99         .attr('type', 'text')
100         .on('click', select));
101
102     $('<div>')
103       .attr('class', 'form-row share-tab')
104       .appendTo($form)
105       .append($('<input>')
106         .attr('id', 'short_input')
107         .attr('type', 'text')
108         .on('click', select));
109
110     $('<div>')
111       .attr('class', 'form-row share-tab')
112       .appendTo($form)
113       .append(
114         $('<textarea>')
115           .attr('id', 'embed_html')
116           .on('click', select))
117       .append(
118         $('<p>')
119           .attr('class', 'deemphasize')
120           .text(I18n.t('javascripts.share.paste_html'))
121           .appendTo($linkSection));
122
123     // Image
124
125     var $imageSection = $('<div>')
126       .attr('class', 'section share-image')
127       .appendTo($ui);
128
129     $('<h4>')
130       .text(I18n.t('javascripts.share.image'))
131       .appendTo($imageSection);
132
133     $form = $('<form>')
134       .attr('class', 'standard-form')
135       .attr('action', '/export/finish')
136       .attr('method', 'post')
137       .appendTo($imageSection);
138
139     $('<div>')
140       .attr('class', 'form-row')
141       .appendTo($form)
142       .append(
143         $('<label>')
144           .attr('for', 'image_filter')
145           .append(
146             $('<input>')
147               .attr('id', 'image_filter')
148               .attr('type', 'checkbox')
149               .bind('change', toggleFilter))
150           .append(I18n.t('javascripts.share.custom_dimensions')));
151
152     $('<div>')
153       .attr('class', 'form-row')
154       .appendTo($form)
155       .append(
156         $('<label>')
157           .attr('for', 'mapnik_format')
158           .text(I18n.t('javascripts.share.format')))
159       .append($('<select>')
160         .attr('name', 'mapnik_format')
161         .attr('id', 'mapnik_format')
162         .append($('<option>').val('png').text('PNG').prop('selected', true))
163         .append($('<option>').val('jpeg').text('JPEG'))
164         .append($('<option>').val('svg').text('SVG'))
165         .append($('<option>').val('pdf').text('PDF')));
166
167     $('<div>')
168       .attr('class', 'form-row')
169       .appendTo($form)
170       .append($('<label>')
171         .attr('for', 'mapnik_scale')
172         .text(I18n.t('javascripts.share.scale')))
173       .append('1 : ')
174       .append($('<input>')
175         .attr('name', 'mapnik_scale')
176         .attr('id', 'mapnik_scale')
177         .attr('type', 'text')
178         .on('change', update));
179
180     ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
181       $('<input>')
182         .attr('id', 'mapnik_' + name)
183         .attr('name', name)
184         .attr('type', 'hidden')
185         .appendTo($form);
186     });
187
188     $('<input>')
189       .attr('name', 'format')
190       .attr('value', 'mapnik')
191       .attr('type', 'hidden')
192       .appendTo($form);
193
194     $('<p>')
195       .attr('class', 'deemphasize')
196       .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
197       .appendTo($form);
198
199     $('<input>')
200       .attr('type', 'submit')
201       .attr('value', I18n.t('javascripts.share.download'))
202       .appendTo($form);
203
204     locationFilter
205       .on('change', update)
206       .addTo(map);
207
208     marker.on('dragend', movedMarker);
209     map.on('move', movedMap);
210     map.on('moveend layeradd layerremove', update);
211
212     options.sidebar.addPane($ui);
213
214     $ui
215       .on('hide', hidden);
216
217     function hidden() {
218       map.removeLayer(marker);
219       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
220       locationFilter.disable();
221       update();
222     }
223
224     function toggle(e) {
225       e.stopPropagation();
226       e.preventDefault();
227
228       $('#mapnik_scale').val(getScale());
229       marker.setLatLng(map.getCenter());
230
231       update();
232       options.sidebar.togglePane($ui, button);
233     }
234
235     function toggleMarker() {
236       if ($(this).is(':checked')) {
237         marker.setLatLng(map.getCenter());
238         map.addLayer(marker);
239         map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
240       } else {
241         map.removeLayer(marker);
242         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
243       }
244       update();
245     }
246
247     function toggleFilter() {
248       if ($(this).is(':checked')) {
249         locationFilter.setBounds(map.getBounds().pad(-0.2));
250         locationFilter.enable();
251       } else {
252         locationFilter.disable();
253       }
254       update();
255     }
256
257     function movedMap() {
258       marker.setLatLng(map.getCenter());
259       update();
260     }
261
262     function movedMarker() {
263       if (map.hasLayer(marker)) {
264         map.off('move', movedMap);
265         map.on('moveend', updateOnce);
266         map.panTo(marker.getLatLng());
267       }
268     }
269
270     function updateOnce() {
271       map.off('moveend', updateOnce);
272       map.on('move', movedMap);
273       update();
274     }
275
276     function update() {
277       var bounds = map.getBounds();
278
279       $('#link_marker')
280         .prop('checked', map.hasLayer(marker));
281
282       $('#image_filter')
283         .prop('checked', locationFilter.isEnabled());
284
285       // Link / Embed
286
287       $('#short_input').val(map.getShortUrl(marker));
288       $('#long_input').val(map.getUrl(marker));
289       $('#short_link').attr('href', map.getShortUrl(marker));
290       $('#long_link').attr('href', map.getUrl(marker));
291
292       var params = {
293         bbox: bounds.toBBoxString(),
294         layer: map.getMapBaseLayerId()
295       };
296
297       if (map.hasLayer(marker)) {
298         var latLng = marker.getLatLng().wrap();
299         params.marker = latLng.lat + ',' + latLng.lng;
300       }
301
302       $('#embed_html').val(
303         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
304           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
305           '" style="border: 1px solid black"></iframe><br/>' +
306           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '">' +
307           escapeHTML(I18n.t('javascripts.share.view_larger_map')) + '</a></small>');
308
309       // Image
310
311       if (locationFilter.isEnabled()) {
312         bounds = locationFilter.getBounds();
313       }
314
315       var scale = $("#mapnik_scale").val(),
316         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
317                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
318         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
319
320       $('#mapnik_minlon').val(bounds.getWest());
321       $('#mapnik_minlat').val(bounds.getSouth());
322       $('#mapnik_maxlon').val(bounds.getEast());
323       $('#mapnik_maxlat').val(bounds.getNorth());
324
325       if (scale < maxScale) {
326         scale = roundScale(maxScale);
327         $("#mapnik_scale").val(scale);
328       }
329
330       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
331       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
332     }
333
334     function select() {
335       $(this).select();
336     }
337
338     function getScale() {
339       var bounds = map.getBounds(),
340         centerLat = bounds.getCenter().lat,
341         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
342         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
343         pixelsPerMeter = map.getSize().x / meters,
344         metersPerPixel = 1 / (92 * 39.3701);
345       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
346     }
347
348     function roundScale(scale) {
349       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
350       return precision * Math.ceil(scale / precision);
351     }
352
353     return $container[0];
354   };
355
356   return control;
357 };