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     $(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');
 198 });
 199
 200 AJAX.registerOnload('tbl_gis_visualization.js', function () {
 201
 202     // If we are in GIS visualization, initialize it
 203     if ($('#gis_div').length > 0) {
 204         initGISVisualization();
 205     }
 206
 207     $(document).on('click', '#choice', 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     $(document).on('mousewheel', '#placeholder', function (event, delta) {
 218         event.preventDefault();
 219         var relCoords = getRelativeCoords(event);
 220         if (delta > 0) {
 221             //zoom in
 222             scale *= zoomFactor;
 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;
 226             zoomAndPan();
 227         } else {
 228             //zoom out
 229             scale /= 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;
 233             zoomAndPan();
 234         }
 235         return true;
 236     });
 237
 238     var dragX = 0;
 239     var dragY = 0;
 240
 241     $(document).on('dragstart', 'svg', function (event, dd) {
 242         $('#placeholder').addClass('placeholderDrag');
 243         dragX = Math.round(dd.offsetX);
 244         dragY = Math.round(dd.offsetY);
 245     });
 246
 247     $(document).on('mouseup', 'svg', function (event) {
 248         $('#placeholder').removeClass('placeholderDrag');
 249     });
 250
 251     $(document).on('drag', 'svg', function (event, dd) {
 252         newX = Math.round(dd.offsetX);
 253         x +=  newX - dragX;
 254         dragX = newX;
 255         newY = Math.round(dd.offsetY);
 256         y +=  newY - dragY;
 257         dragY = newY;
 258         zoomAndPan();
 259     });
 260
 261     $(document).on('dblclick', '#placeholder', function (event) {
 262         scale *= zoomFactor;
 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;
 267         zoomAndPan();
 268     });
 269
 270     $(document).on('click', '#zoom_in', function (e) {
 271         e.preventDefault();
 272         //zoom in
 273         scale *= zoomFactor;
 274
 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;
 280         zoomAndPan();
 281     });
 282
 283     $(document).on('click', '#zoom_world', function (e) {
 284         e.preventDefault();
 285         scale = 1;
 286         x = defaultX;
 287         y = defaultY;
 288         zoomAndPan();
 289     });
 290
 291     $(document).on('click', '#zoom_out', function (e) {
 292         e.preventDefault();
 293         //zoom out
 294         scale /= zoomFactor;
 295
 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;
 301         zoomAndPan();
 302     });
 303
 304     $(document).on('click', '#left_arrow', function (e) {
 305         e.preventDefault();
 306         x += 100;
 307         zoomAndPan();
 308     });
 309
 310     $(document).on('click', '#right_arrow', function (e) {
 311         e.preventDefault();
 312         x -= 100;
 313         zoomAndPan();
 314     });
 315
 316     $(document).on('click', '#up_arrow', function (e) {
 317         e.preventDefault();
 318         y += 100;
 319         zoomAndPan();
 320     });
 321
 322     $(document).on('click', '#down_arrow', function (e) {
 323         e.preventDefault();
 324         y -= 100;
 325         zoomAndPan();
 326     });
 327
 328     /**
 329      * Detect the mousemove event and show tooltips.
 330      */
 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',
 340                 padding : '2px',
 341                 'background-color' : '#fee',
 342                 opacity : 0.90
 343             }).appendTo("body").fadeIn(200);
 344         }
 345     });
 346
 347     /**
 348      * Detect the mouseout event and hide tooltips.
 349      */
 350     $('.vector').bind('mouseout', function (event) {
 351         $("#tooltip").remove();
 352     });
 353 });