1 /* vim: set expandtab sw=4 ts=4 sts=4: */
3 * @fileoverview functions used for visualizing GIS data
6 * @requires jquery/jquery.svg.js
7 * @requires jquery/jquery.mousewheel.js
8 * @requires jquery/jquery.event.drag-2.2.js
24 * Zooms and pans the visualization.
28 var g = svg.getElementById('groupPanel');
30 g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
33 $('circle.vector').each(function () {
34 id = $(this).attr('id');
35 circle = svg.getElementById(id);
38 "stroke-width" : (2 / scale)
43 $('polyline.vector').each(function () {
44 id = $(this).attr('id');
45 line = svg.getElementById(id);
47 "stroke-width" : (2 / scale)
52 $('path.vector').each(function () {
53 id = $(this).attr('id');
54 polygon = svg.getElementById(id);
56 "stroke-width" : (0.5 / scale)
62 * Initially loads either SVG or OSM visualization based on the choice.
64 function selectVisualization() {
65 if ($('#choice').prop('checked') !== true) {
66 $('#openlayersmap').hide();
68 $('#placeholder').hide();
73 * Adds necessary styles to the div that coontains the openStreetMap.
76 var $placeholder = $('#placeholder');
78 'border' : '1px solid #aaa',
79 'width' : $placeholder.width(),
80 'height' : $placeholder.height(),
83 $('#openlayersmap').css(cssObj);
87 * Loads the SVG element and make a reference to it.
90 var $placeholder = $('#placeholder');
93 onLoad: function (svg_ref) {
98 // Removes the second SVG element unnecessarily added due to the above command
99 $placeholder.find('svg:nth-child(2)').remove();
103 * Adds controllers for zooming and panning.
105 function addZoomPanControllers() {
106 var $placeholder = $('#placeholder');
107 if ($("#placeholder svg").length > 0) {
108 var pmaThemeImage = $('#pmaThemeImage').val();
109 // add panning arrows
110 $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder);
111 $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder);
112 $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder);
113 $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder);
114 // add zooming controls
115 $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder);
116 $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder);
117 $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder);
122 * Resizes the GIS visualization to fit into the space available.
124 function resizeGISVisualization() {
125 var $placeholder = $('#placeholder');
126 var old_width = $placeholder.width();
127 var visWidth = $('#div_view_options').width() - 48;
129 // Assign new value for width
130 $placeholder.width(visWidth);
131 $('svg').attr('width', visWidth);
133 // Assign the offset created due to resizing to defaultX and center the svg.
134 defaultX = (visWidth - old_width) / 2;
141 * Initialize the GIS visualization.
143 function initGISVisualization() {
144 // Loads either SVG or OSM visualization based on the choice
145 selectVisualization();
146 // Resizes the GIS visualization to fit into the space available
147 resizeGISVisualization();
148 // Adds necessary styles to the div that coontains the openStreetMap
150 // Draws openStreetMap with openLayers
152 // Loads the SVG element and make a reference to it
154 // Adds controllers for zooming and panning
155 addZoomPanControllers();
159 function getRelativeCoords(e) {
160 var position = $('#placeholder').offset();
162 x : e.pageX - position.left,
163 y : e.pageY - position.top
168 * Ajax handlers for GIS visualization page
170 * Actions Ajaxified here:
172 * Zooming in and zooming out on mousewheel movement.
173 * Panning the visualization on dragging.
174 * Zooming in on double clicking.
175 * Zooming out on clicking the zoom out button.
176 * Panning on clicking the arrow buttons.
177 * Displaying tooltips for GIS objects.
181 * Unbind all event handlers before tearing down a page
183 AJAX.registerTeardown('tbl_gis_visualization.js', function () {
184 $(document).off('click', '#choice');
185 $(document).off('mousewheel', '#placeholder');
186 $(document).off('dragstart', 'svg');
187 $(document).off('mouseup', 'svg');
188 $(document).off('drag', 'svg');
189 $(document).off('dblclick', '#placeholder');
190 $(document).off('click', '#zoom_in');
191 $(document).off('click', '#zoom_world');
192 $(document).off('click', '#zoom_out');
193 $(document).off('click', '#left_arrow');
194 $(document).off('click', '#right_arrow');
195 $(document).off('click', '#up_arrow');
196 $(document).off('click', '#down_arrow');
197 $('.vector').unbind('mousemove').unbind('mouseout');
200 AJAX.registerOnload('tbl_gis_visualization.js', function () {
202 // If we are in GIS visualization, initialize it
203 if ($('#gis_div').length > 0) {
204 initGISVisualization();
207 $(document).on('click', '#choice', function () {
208 if ($(this).prop('checked') === false) {
209 $('#placeholder').show();
210 $('#openlayersmap').hide();
212 $('#placeholder').hide();
213 $('#openlayersmap').show();
217 $(document).on('mousewheel', '#placeholder', function (event, delta) {
218 event.preventDefault();
219 var relCoords = getRelativeCoords(event);
223 // zooming in keeping the position under mouse pointer unmoved.
224 x = relCoords.x - (relCoords.x - x) * zoomFactor;
225 y = relCoords.y - (relCoords.y - y) * zoomFactor;
230 // zooming out keeping the position under mouse pointer unmoved.
231 x = relCoords.x - (relCoords.x - x) / zoomFactor;
232 y = relCoords.y - (relCoords.y - y) / zoomFactor;
241 $(document).on('dragstart', 'svg', function (event, dd) {
242 $('#placeholder').addClass('placeholderDrag');
243 dragX = Math.round(dd.offsetX);
244 dragY = Math.round(dd.offsetY);
247 $(document).on('mouseup', 'svg', function (event) {
248 $('#placeholder').removeClass('placeholderDrag');
251 $(document).on('drag', 'svg', function (event, dd) {
252 var newX = Math.round(dd.offsetX);
255 var newY = Math.round(dd.offsetY);
261 $(document).on('dblclick', '#placeholder', function (event) {
263 // zooming in keeping the position under mouse pointer unmoved.
264 var relCoords = getRelativeCoords(event);
265 x = relCoords.x - (relCoords.x - x) * zoomFactor;
266 y = relCoords.y - (relCoords.y - y) * zoomFactor;
270 $(document).on('click', '#zoom_in', function (e) {
275 width = $('#placeholder svg').attr('width');
276 height = $('#placeholder svg').attr('height');
277 // zooming in keeping the center unmoved.
278 x = width / 2 - (width / 2 - x) * zoomFactor;
279 y = height / 2 - (height / 2 - y) * zoomFactor;
283 $(document).on('click', '#zoom_world', function (e) {
291 $(document).on('click', '#zoom_out', function (e) {
296 width = $('#placeholder svg').attr('width');
297 height = $('#placeholder svg').attr('height');
298 // zooming out keeping the center unmoved.
299 x = width / 2 - (width / 2 - x) / zoomFactor;
300 y = height / 2 - (height / 2 - y) / zoomFactor;
304 $(document).on('click', '#left_arrow', function (e) {
310 $(document).on('click', '#right_arrow', function (e) {
316 $(document).on('click', '#up_arrow', function (e) {
322 $(document).on('click', '#down_arrow', function (e) {
329 * Detect the mousemove event and show tooltips.
331 $('.vector').bind('mousemove', function (event) {
332 var contents = $.trim(escapeHtml($(this).attr('name')));
333 $("#tooltip").remove();
334 if (contents !== '') {
335 $('<div id="tooltip">' + contents + '</div>').css({
336 position : 'absolute',
337 top : event.pageY + 10,
338 left : event.pageX + 10,
339 border : '1px solid #fdd',
341 'background-color' : '#fee',
343 }).appendTo("body").fadeIn(200);
348 * Detect the mouseout event and hide tooltips.
350 $('.vector').bind('mouseout', function (event) {
351 $("#tooltip").remove();