]> git.openstreetmap.org Git - rails.git/blob - app/assets/javascripts/leaflet.share.js
Enebale I18n for embedded maps
[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     // Geo URI
124
125     var $geoUriSection = $('<div>')
126       .attr('class', 'section share-geo-uri')
127       .appendTo($ui);
128
129     $('<h4>')
130       .text(I18n.t('javascripts.share.geo_uri'))
131       .appendTo($geoUriSection);
132
133     $('<div>')
134       .appendTo($geoUriSection)
135       .append($('<a>')
136         .attr('id', 'geo_uri'));
137
138     // Image
139
140     var $imageSection = $('<div>')
141       .attr('class', 'section share-image')
142       .appendTo($ui);
143
144     $('<h4>')
145       .text(I18n.t('javascripts.share.image'))
146       .appendTo($imageSection);
147
148     $form = $('<form>')
149       .attr('class', 'standard-form')
150       .attr('action', '/export/finish')
151       .attr('method', 'post')
152       .appendTo($imageSection);
153
154     $('<div>')
155       .attr('class', 'form-row')
156       .appendTo($form)
157       .append(
158         $('<label>')
159           .attr('for', 'image_filter')
160           .append(
161             $('<input>')
162               .attr('id', 'image_filter')
163               .attr('type', 'checkbox')
164               .bind('change', toggleFilter))
165           .append(I18n.t('javascripts.share.custom_dimensions')));
166
167     $('<div>')
168       .attr('class', 'form-row')
169       .appendTo($form)
170       .append(
171         $('<label>')
172           .attr('for', 'mapnik_format')
173           .text(I18n.t('javascripts.share.format')))
174       .append($('<select>')
175         .attr('name', 'mapnik_format')
176         .attr('id', 'mapnik_format')
177         .append($('<option>').val('png').text('PNG').prop('selected', true))
178         .append($('<option>').val('jpeg').text('JPEG'))
179         .append($('<option>').val('svg').text('SVG'))
180         .append($('<option>').val('pdf').text('PDF')));
181
182     $('<div>')
183       .attr('class', 'form-row')
184       .appendTo($form)
185       .append($('<label>')
186         .attr('for', 'mapnik_scale')
187         .text(I18n.t('javascripts.share.scale')))
188       .append('1 : ')
189       .append($('<input>')
190         .attr('name', 'mapnik_scale')
191         .attr('id', 'mapnik_scale')
192         .attr('type', 'text')
193         .on('change', update));
194
195     ['minlon', 'minlat', 'maxlon', 'maxlat'].forEach(function(name) {
196       $('<input>')
197         .attr('id', 'mapnik_' + name)
198         .attr('name', name)
199         .attr('type', 'hidden')
200         .appendTo($form);
201     });
202
203     $('<input>')
204       .attr('name', 'format')
205       .attr('value', 'mapnik')
206       .attr('type', 'hidden')
207       .appendTo($form);
208
209     $('<p>')
210       .attr('class', 'deemphasize')
211       .html(I18n.t('javascripts.share.image_size') + ' <span id="mapnik_image_width"></span> x <span id="mapnik_image_height"></span>')
212       .appendTo($form);
213
214     $('<input>')
215       .attr('type', 'submit')
216       .attr('value', I18n.t('javascripts.share.download'))
217       .appendTo($form);
218
219     locationFilter
220       .on('change', update)
221       .addTo(map);
222
223     marker.on('dragend', movedMarker);
224     map.on('move', movedMap);
225     map.on('moveend layeradd layerremove', update);
226
227     options.sidebar.addPane($ui);
228
229     $ui
230       .on('hide', hidden);
231
232     function hidden() {
233       map.removeLayer(marker);
234       map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
235       locationFilter.disable();
236       update();
237     }
238
239     function toggle(e) {
240       e.stopPropagation();
241       e.preventDefault();
242
243       $('#mapnik_scale').val(getScale());
244       marker.setLatLng(map.getCenter());
245
246       update();
247       options.sidebar.togglePane($ui, button);
248       $('.leaflet-control .control-button').tooltip('hide');
249     }
250
251     function toggleMarker() {
252       if ($(this).is(':checked')) {
253         marker.setLatLng(map.getCenter());
254         map.addLayer(marker);
255         map.options.scrollWheelZoom = map.options.doubleClickZoom = 'center';
256       } else {
257         map.removeLayer(marker);
258         map.options.scrollWheelZoom = map.options.doubleClickZoom = true;
259       }
260       update();
261     }
262
263     function toggleFilter() {
264       if ($(this).is(':checked')) {
265         locationFilter.setBounds(map.getBounds().pad(-0.2));
266         locationFilter.enable();
267       } else {
268         locationFilter.disable();
269       }
270       update();
271     }
272
273     function movedMap() {
274       marker.setLatLng(map.getCenter());
275       update();
276     }
277
278     function movedMarker() {
279       if (map.hasLayer(marker)) {
280         map.off('move', movedMap);
281         map.on('moveend', updateOnce);
282         map.panTo(marker.getLatLng());
283       }
284     }
285
286     function updateOnce() {
287       map.off('moveend', updateOnce);
288       map.on('move', movedMap);
289       update();
290     }
291
292     function escapeHTML(string) {
293       var htmlEscapes = {
294         '&': '&amp;',
295         '<': '&lt;',
296         '>': '&gt;',
297         '"': '&quot;',
298         "'": '&#x27;'
299       };
300       return string === null ? '' : (string + '').replace(/[&<>"']/g, function(match) {
301         return htmlEscapes[match];
302       });
303     }
304
305     function update() {
306       var bounds = map.getBounds();
307
308       $('#link_marker')
309         .prop('checked', map.hasLayer(marker));
310
311       $('#image_filter')
312         .prop('checked', locationFilter.isEnabled());
313
314       // Link / Embed
315
316       $('#short_input').val(map.getShortUrl(marker));
317       $('#long_input').val(map.getUrl(marker));
318       $('#short_link').attr('href', map.getShortUrl(marker));
319       $('#long_link').attr('href', map.getUrl(marker));
320
321       var params = {
322         bbox: bounds.toBBoxString(),
323         layer: map.getMapBaseLayerId()
324       };
325
326       if (map.hasLayer(marker)) {
327         var latLng = marker.getLatLng().wrap();
328         params.marker = latLng.lat + ',' + latLng.lng;
329       }
330
331       $('#embed_html').val(
332         '<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' +
333           escapeHTML('http://' + OSM.SERVER_URL + '/export/embed.html?' + $.param(params)) +
334           '" style="border: 1px solid black"></iframe><br/>' +
335           '<small><a href="' + escapeHTML(map.getUrl(marker)) + '">' +
336           escapeHTML(I18n.t('javascripts.share.view_larger_map')) + '</a></small>');
337
338       // Geo URI
339
340       $('#geo_uri')
341         .attr('href', map.getGeoUri(marker))
342         .html(map.getGeoUri(marker));
343
344       // Image
345
346       if (locationFilter.isEnabled()) {
347         bounds = locationFilter.getBounds();
348       }
349
350       var scale = $("#mapnik_scale").val(),
351         size = L.bounds(L.CRS.EPSG3857.project(bounds.getSouthWest()),
352                         L.CRS.EPSG3857.project(bounds.getNorthEast())).getSize(),
353         maxScale = Math.floor(Math.sqrt(size.x * size.y / 0.3136));
354
355       $('#mapnik_minlon').val(bounds.getWest());
356       $('#mapnik_minlat').val(bounds.getSouth());
357       $('#mapnik_maxlon').val(bounds.getEast());
358       $('#mapnik_maxlat').val(bounds.getNorth());
359
360       if (scale < maxScale) {
361         scale = roundScale(maxScale);
362         $("#mapnik_scale").val(scale);
363       }
364
365       $("#mapnik_image_width").text(Math.round(size.x / scale / 0.00028));
366       $("#mapnik_image_height").text(Math.round(size.y / scale / 0.00028));
367     }
368
369     function select() {
370       $(this).select();
371     }
372
373     function getScale() {
374       var bounds = map.getBounds(),
375         centerLat = bounds.getCenter().lat,
376         halfWorldMeters = 6378137 * Math.PI * Math.cos(centerLat * Math.PI / 180),
377         meters = halfWorldMeters * (bounds.getEast() - bounds.getWest()) / 180,
378         pixelsPerMeter = map.getSize().x / meters,
379         metersPerPixel = 1 / (92 * 39.3701);
380       return Math.round(1 / (pixelsPerMeter * metersPerPixel));
381     }
382
383     function roundScale(scale) {
384       var precision = 5 * Math.pow(10, Math.floor(Math.LOG10E * Math.log(scale)) - 2);
385       return precision * Math.ceil(scale / precision);
386     }
387
388     return $container[0];
389   };
390
391   return control;
392 };