Translation update done using Pootle.
[phpmyadmin/madhuracj.git] / js / tbl_gis_visualization.js
blob0a84189c49858c13562b0ed276adca2c28bda85a
1 /**
2  * @fileoverview    functions used for visualizing GIS data
3  *
4  * @requires    jquery
5  * @requires    jquery/jquery.svg.js
6  * @requires    jquery/jquery.mousewheel.js
7  * @requires    jquery/jquery.event.drag-2.0.min.js
8  */
10 var x = 0;
11 var default_x = 0;
12 var y = 0;
13 var default_y = 0;
14 var scale = 1;
15 var svg;
17 /**
18  * Zooms and pans the visualization.
19  */
20 function zoomAndPan()
22     var g = svg.getElementById('groupPanel');
24     g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
25     var id;
26     var circle;
27     $('circle.vector').each(function() {
28         id = $(this).attr('id');
29         circle = svg.getElementById(id);
30         svg.change(circle, {
31             r : (3 / scale),
32             "stroke-width" : (2 / scale)
33         });
34     });
36     var line;
37     $('polyline.vector').each(function() {
38         id = $(this).attr('id');
39         line = svg.getElementById(id);
40         svg.change(line, {
41             "stroke-width" : (2 / scale)
42         });
43     });
45     var polygon;
46     $('path.vector').each(function() {
47         id = $(this).attr('id');
48         polygon = svg.getElementById(id);
49         svg.change(polygon, {
50             "stroke-width" : (0.5 / scale)
51         });
52     });
55 /**
56  * Initially loads either SVG or OSM visualization based on the choice.
57  */
58 function selectVisualization() {
59     if ($('#choice').prop('checked') != true) {
60         $('#openlayersmap').hide();
61     } else {
62         $('#placeholder').hide();
63     }
64     $('.choice').show();
67 /**
68  * Adds necessary styles to the div that coontains the openStreetMap.
69  */
70 function styleOSM() {
71     var $placeholder = $('#placeholder');
72     var cssObj = {
73         'border' : '1px solid #aaa',
74         'width' : $placeholder.width(),
75         'height' : $placeholder.height(),
76         'float' : 'right'
77     };
78     $('#openlayersmap').css(cssObj);
81 /**
82  * Loads the SVG element and make a reference to it.
83  */
84 function loadSVG() {
85     var $placeholder = $('#placeholder');
87     $placeholder.svg({
88         onLoad: function(svg_ref) {
89             svg = svg_ref;
90         }
91     });
93     // Removes the second SVG element unnecessarily added due to the above command
94     $placeholder.find('svg:nth-child(2)').remove();
97 /**
98  * Adds controllers for zooming and panning.
99  */
100 function addZoomPanControllers() {
101     var $placeholder = $('#placeholder');
102     if ($("#placeholder svg").length > 0) {
103         var pmaThemeImage = $('#pmaThemeImage').attr('value');
104         // add panning arrows
105         $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder);
106         $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder);
107         $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder);
108         $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder);
109         // add zooming controls
110         $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder);
111         $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder);
112         $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder);
113     }
117  * Resizes the GIS visualization to fit into the space available.
118  */
119 function resizeGISVisualization() {
120     var $placeholder = $('#placeholder');
122     // Hide inputs for width and height
123     $("input[name='visualizationSettings[width]']").parents('tr').remove();
124     $("input[name='visualizationSettings[height]']").parents('tr').remove();
126     var old_width = $placeholder.width();
127     var extraPadding = 100;
128     var leftWidth = $('.gis_table').width();
129     var windowWidth = document.documentElement.clientWidth;
130     var visWidth = windowWidth - extraPadding - leftWidth;
132     // Assign new value for width
133     $placeholder.width(visWidth);
134     $('svg').attr('width', visWidth);
136     // Assign the offset created due to resizing to default_x and center the svg.
137     default_x = (visWidth - old_width) / 2;
138     x = default_x;
142  * Initialize the GIS visualization.
143  */
144 function initGISVisualization() {
145     // Loads either SVG or OSM visualization based on the choice
146     selectVisualization();
147     // Resizes the GIS visualization to fit into the space available
148     resizeGISVisualization();
149     // Adds necessary styles to the div that coontains the openStreetMap
150     styleOSM();
151     // Draws openStreetMap with openLayers
152     drawOpenLayers();
153     // Loads the SVG element and make a reference to it
154     loadSVG();
155     // Adds controllers for zooming and panning
156     addZoomPanControllers();
157     zoomAndPan();
161  * Ajax handlers for GIS visualization page
163  * Actions Ajaxified here:
165  * Zooming in and zooming out on mousewheel movement.
166  * Panning the visualization on dragging.
167  * Zooming in on double clicking.
168  * Zooming out on clicking the zoom out button.
169  * Panning on clicking the arrow buttons.
170  * Displaying tooltips for GIS objects.
171  */
172 $(document).ready(function() {
174     // If we are in GIS visualization, initialize it
175     if ($('.gis_table').length > 0) {
176         initGISVisualization();
177     }
178     
179     $('#choice').live('click', function() {
180         if ($(this).prop('checked') == false) {
181             $('#placeholder').show();
182             $('#openlayersmap').hide();
183         } else {
184             $('#placeholder').hide();
185             $('#openlayersmap').show();
186         }
187     });
188     
189     $('#placeholder').live('mousewheel', function(event, delta) {
190         if (delta > 0) {
191             //zoom in
192             scale *= 1.5;
193             // zooming in keeping the position under mouse pointer unmoved.
194             x = event.layerX - (event.layerX - x) * 1.5;
195             y = event.layerY - (event.layerY - y) * 1.5;
196             zoomAndPan();
197         } else {
198             //zoom out
199             scale /= 1.5;
200             // zooming out keeping the position under mouse pointer unmoved.
201             x = event.layerX - (event.layerX - x) / 1.5;
202             y = event.layerY - (event.layerY - y) / 1.5;
203             zoomAndPan();
204         }
205         return true;
206     });
208     var dragX = 0; var dragY = 0;
209     $('svg').live('dragstart', function(event, dd) {
210         $('#placeholder').addClass('placeholderDrag');
211         dragX = Math.round(dd.offsetX);
212         dragY = Math.round(dd.offsetY);
213     });
215     $('svg').live('mouseup', function(event) {
216         $('#placeholder').removeClass('placeholderDrag');
217     });
219     $('svg').live('drag', function(event, dd) {
220         newX = Math.round(dd.offsetX);
221         x +=  newX - dragX;
222         dragX = newX;
223         newY = Math.round(dd.offsetY);
224         y +=  newY - dragY;
225         dragY = newY;
226         zoomAndPan();
227     });
229     $('#placeholder').live('dblclick', function(event) {
230         scale *= 1.5;
231         // zooming in keeping the position under mouse pointer unmoved.
232         x = event.layerX - (event.layerX - x) * 1.5;
233         y = event.layerY - (event.layerY - y) * 1.5;
234         zoomAndPan();
235     });
237     $('#zoom_in').live('click', function(e) {
238         e.preventDefault();
239         //zoom in
240         scale *= 1.5;
242         width = $('#placeholder svg').attr('width');
243         height = $('#placeholder svg').attr('height');
244         // zooming in keeping the center unmoved.
245         x = width / 2 - (width / 2 - x) * 1.5;
246         y = height / 2 - (height / 2 - y) * 1.5;
247         zoomAndPan();
248     });
250     $('#zoom_world').live('click', function(e) {
251         e.preventDefault();
252         scale = 1;
253         x = default_x;
254         y = default_y;
255         zoomAndPan();
256     });
258     $('#zoom_out').live('click', function(e) {
259         e.preventDefault();
260         //zoom out
261         scale /= 1.5;
263         width = $('#placeholder svg').attr('width');
264         height = $('#placeholder svg').attr('height');
265         // zooming out keeping the center unmoved.
266         x = width / 2 - (width / 2 - x) / 1.5;
267         y = height / 2 - (height / 2 - y) / 1.5;
268         zoomAndPan();
269     });
271     $('#left_arrow').live('click', function(e) {
272         e.preventDefault();
273         x += 100;
274         zoomAndPan();
275     });
277     $('#right_arrow').live('click', function(e) {
278         e.preventDefault();
279         x -= 100;
280         zoomAndPan();
281     });
283     $('#up_arrow').live('click', function(e) {
284         e.preventDefault();
285         y += 100;
286         zoomAndPan();
287     });
289     $('#down_arrow').live('click', function(e) {
290         e.preventDefault();
291         y -= 100;
292         zoomAndPan();
293     });
295     /**
296      * Detect the mousemove event and show tooltips.
297      */
298     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
299             + '.geometrycollection').live('mousemove', function(event) {
300         contents = $.trim($(this).attr('name'));
301         $("#tooltip").remove();
302         if (contents != '') {
303             $('<div id="tooltip">' + contents + '</div>').css({
304                 position : 'absolute',
305                 display : 'none',
306                 top : event.pageY + 10,
307                 left : event.pageX + 10,
308                 border : '1px solid #fdd',
309                 padding : '2px',
310                 'background-color' : '#fee',
311                 opacity : 0.80
312             }).appendTo("body").fadeIn(200);
313         }
314     });
316     /**
317      * Detect the mouseout event and hide tooltips.
318      */
319     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
320             + '.geometrycollection').live('mouseout', function(event) {
321         $("#tooltip").remove();
322     });