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