js/tbl_gis_visualization.js

   1 /* vim: set expandtab sw=4 ts=4 sts=4: */
   2 /**
   3  * @fileoverview    functions used for visualizing GIS data
   4  *
   5  * @requires    jquery
   6  * @requires    jquery/jquery.svg.js
   7  * @requires    jquery/jquery.mousewheel.js
   8  * @requires    jquery/jquery.event.drag-2.2.js
   9  */
  10
  11 // Constants
  12 var zoomFactor = 1.5;
  13 var defaultX = 0;
  14 var defaultY = 0;
  15
  16 // Variables
  17 var x;
  18 var y;
  19 var scale = 1;
  20
  21 var svg;
  22
  23 /**
  24  * Zooms and pans the visualization.
  25  */
  26 function zoomAndPan()
  27 {
  28     var g = svg.getElementById('groupPanel');
  29
  30     g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
  31     var id;
  32     var circle;
  33     $('circle.vector').each(function () {
  34         id = $(this).attr('id');
  35         circle = svg.getElementById(id);
  36         svg.change(circle, {
  37             r : (3 / scale),
  38             "stroke-width" : (2 / scale)
  39         });
  40     });
  41
  42     var line;
  43     $('polyline.vector').each(function () {
  44         id = $(this).attr('id');
  45         line = svg.getElementById(id);
  46         svg.change(line, {
  47             "stroke-width" : (2 / scale)
  48         });
  49     });
  50
  51     var polygon;
  52     $('path.vector').each(function () {
  53         id = $(this).attr('id');
  54         polygon = svg.getElementById(id);
  55         svg.change(polygon, {
  56             "stroke-width" : (0.5 / scale)
  57         });
  58     });
  59 }
  60
  61 /**
  62  * Initially loads either SVG or OSM visualization based on the choice.
  63  */
  64 function selectVisualization() {
  65     if ($('#choice').prop('checked') !== true) {
  66         $('#openlayersmap').hide();
  67     } else {
  68         $('#placeholder').hide();
  69     }
  70 }
  71
  72 /**
  73  * Adds necessary styles to the div that coontains the openStreetMap.
  74  */
  75 function styleOSM() {
  76     var $placeholder = $('#placeholder');
  77     var cssObj = {
  78         'border' : '1px solid #aaa',
  79         'width' : $placeholder.width(),
  80         'height' : $placeholder.height(),
  81         'float' : 'right'
  82     };
  83     $('#openlayersmap').css(cssObj);
  84 }
  85
  86 /**
  87  * Loads the SVG element and make a reference to it.
  88  */
  89 function loadSVG() {
  90     var $placeholder = $('#placeholder');
  91
  92     $placeholder.svg({
  93         onLoad: function (svg_ref) {
  94             svg = svg_ref;
  95         }
  96     });
  97
  98     // Removes the second SVG element unnecessarily added due to the above command
  99     $placeholder.find('svg:nth-child(2)').remove();
 100 }
 101
 102 /**
 103  * Adds controllers for zooming and panning.
 104  */
 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);
 118     }
 119 }
 120
 121 /**
 122  * Resizes the GIS visualization to fit into the space available.
 123  */
 124 function resizeGISVisualization() {
 125     var $placeholder = $('#placeholder');
 126     var old_width = $placeholder.width();
 127     var visWidth = $('#div_view_options').width() - 48;
 128
 129     // Assign new value for width
 130     $placeholder.width(visWidth);
 131     $('svg').attr('width', visWidth);
 132
 133     // Assign the offset created due to resizing to defaultX and center the svg.
 134     defaultX = (visWidth - old_width) / 2;
 135     x = defaultX;
 136     y = 0;
 137     scale = 1;
 138 }
 139
 140 /**
 141  * Initialize the GIS visualization.
 142  */
 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
 149     styleOSM();
 150     // Draws openStreetMap with openLayers
 151     drawOpenLayers();
 152     // Loads the SVG element and make a reference to it
 153     loadSVG();
 154     // Adds controllers for zooming and panning
 155     addZoomPanControllers();
 156     zoomAndPan();
 157 }
 158
 159 function getRelativeCoords(e) {
 160     var position = $('#placeholder').offset();
 161     return {
 162         x : e.pageX - position.left,
 163         y : e.pageY - position.top
 164     };
 165 }
 166
 167 /**
 168  * Ajax handlers for GIS visualization page
 169  *
 170  * Actions Ajaxified here:
 171  *
 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.
 178  */
 179
 180 /**
 181  * Unbind all event handlers before tearing down a page
 182  */
 183 AJAX.registerTeardown('tbl_gis_visualization.js', function () {
 184     $('#choice').die('click');
 185     $('#placeholder').die('mousewheel');
 186     $('svg').die('dragstart');
 187     $('svg').die('mouseup');
 188     $('svg').die('drag');
 189     $('#placeholder').die('dblclick');
 190     $('#zoom_in').die('click');
 191     $('#zoom_world').die('click');
 192     $('#zoom_out').die('click');
 193     $('#left_arrow').die('click');
 194     $('#right_arrow').die('click');
 195     $('#up_arrow').die('click');
 196     $('#down_arrow').die('click');
 197     $('.vector').unbind('mousemove').unbind('mouseout');
 198 });
 199
 200 AJAX.registerOnload('tbl_gis_visualization.js', function () {
 201
 202     // If we are in GIS visualization, initialize it
 203     if ($('table.gis_table').length > 0) {
 204         initGISVisualization();
 205     }
 206
 207     $('#choice').live('click', function () {
 208         if ($(this).prop('checked') === false) {
 209             $('#placeholder').show();
 210             $('#openlayersmap').hide();
 211         } else {
 212             $('#placeholder').hide();
 213             $('#openlayersmap').show();
 214         }
 215     });
 216
 217     $('#placeholder').live('mousewheel', function (event, delta) {
 218         var relCoords = getRelativeCoords(event);
 219         if (delta > 0) {
 220             //zoom in
 221             scale *= zoomFactor;
 222             // zooming in keeping the position under mouse pointer unmoved.
 223             x = relCoords.x - (relCoords.x - x) * zoomFactor;
 224             y = relCoords.y - (relCoords.y - y) * zoomFactor;
 225             zoomAndPan();
 226         } else {
 227             //zoom out
 228             scale /= zoomFactor;
 229             // zooming out keeping the position under mouse pointer unmoved.
 230             x = relCoords.x - (relCoords.x - x) / zoomFactor;
 231             y = relCoords.y - (relCoords.y - y) / zoomFactor;
 232             zoomAndPan();
 233         }
 234         return true;
 235     });
 236
 237     var dragX = 0;
 238     var dragY = 0;
 239
 240     $('svg').live('dragstart', function (event, dd) {
 241         $('#placeholder').addClass('placeholderDrag');
 242         dragX = Math.round(dd.offsetX);
 243         dragY = Math.round(dd.offsetY);
 244     });
 245
 246     $('svg').live('mouseup', function (event) {
 247         $('#placeholder').removeClass('placeholderDrag');
 248     });
 249
 250     $('svg').live('drag', function (event, dd) {
 251         newX = Math.round(dd.offsetX);
 252         x +=  newX - dragX;
 253         dragX = newX;
 254         newY = Math.round(dd.offsetY);
 255         y +=  newY - dragY;
 256         dragY = newY;
 257         zoomAndPan();
 258     });
 259
 260     $('#placeholder').live('dblclick', function (event) {
 261         scale *= zoomFactor;
 262         // zooming in keeping the position under mouse pointer unmoved.
 263         var relCoords = getRelativeCoords(event);
 264         x = relCoords.x - (relCoords.x - x) * zoomFactor;
 265         y = relCoords.y - (relCoords.y - y) * zoomFactor;
 266         zoomAndPan();
 267     });
 268
 269     $('#zoom_in').live('click', function (e) {
 270         e.preventDefault();
 271         //zoom in
 272         scale *= zoomFactor;
 273
 274         width = $('#placeholder svg').attr('width');
 275         height = $('#placeholder svg').attr('height');
 276         // zooming in keeping the center unmoved.
 277         x = width / 2 - (width / 2 - x) * zoomFactor;
 278         y = height / 2 - (height / 2 - y) * zoomFactor;
 279         zoomAndPan();
 280     });
 281
 282     $('#zoom_world').live('click', function (e) {
 283         e.preventDefault();
 284         scale = 1;
 285         x = defaultX;
 286         y = defaultY;
 287         zoomAndPan();
 288     });
 289
 290     $('#zoom_out').live('click', function (e) {
 291         e.preventDefault();
 292         //zoom out
 293         scale /= zoomFactor;
 294
 295         width = $('#placeholder svg').attr('width');
 296         height = $('#placeholder svg').attr('height');
 297         // zooming out keeping the center unmoved.
 298         x = width / 2 - (width / 2 - x) / zoomFactor;
 299         y = height / 2 - (height / 2 - y) / zoomFactor;
 300         zoomAndPan();
 301     });
 302
 303     $('#left_arrow').live('click', function (e) {
 304         e.preventDefault();
 305         x += 100;
 306         zoomAndPan();
 307     });
 308
 309     $('#right_arrow').live('click', function (e) {
 310         e.preventDefault();
 311         x -= 100;
 312         zoomAndPan();
 313     });
 314
 315     $('#up_arrow').live('click', function (e) {
 316         e.preventDefault();
 317         y += 100;
 318         zoomAndPan();
 319     });
 320
 321     $('#down_arrow').live('click', function (e) {
 322         e.preventDefault();
 323         y -= 100;
 324         zoomAndPan();
 325     });
 326
 327     /**
 328      * Detect the mousemove event and show tooltips.
 329      */
 330     $('.vector').bind('mousemove', function (event) {
 331         var contents = $.trim(escapeHtml($(this).attr('name')));
 332         $("#tooltip").remove();
 333         if (contents !== '') {
 334             $('<div id="tooltip">' + contents + '</div>').css({
 335                 position : 'absolute',
 336                 top : event.pageY + 10,
 337                 left : event.pageX + 10,
 338                 border : '1px solid #fdd',
 339                 padding : '2px',
 340                 'background-color' : '#fee',
 341                 opacity : 0.90
 342             }).appendTo("body").fadeIn(200);
 343         }
 344     });
 345
 346     /**
 347      * Detect the mouseout event and hide tooltips.
 348      */
 349     $('.vector').bind('mouseout', function (event) {
 350         $("#tooltip").remove();
 351     });
 352 });