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    vendor/jquery/jquery.svg.js
   7  * @requires    vendor/jquery/jquery.mousewheel.js
   8  * @requires    vendor/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     var g = svg.getElementById('groupPanel');
  28     if (!g) {
  29         return;
  30     }
  31
  32     g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
  33     var id;
  34     var circle;
  35     $('circle.vector').each(function () {
  36         id = $(this).attr('id');
  37         circle = svg.getElementById(id);
  38         $(svg).change(circle, {
  39             r : (3 / scale),
  40             'stroke-width' : (2 / scale)
  41         });
  42     });
  43
  44     var line;
  45     $('polyline.vector').each(function () {
  46         id = $(this).attr('id');
  47         line = svg.getElementById(id);
  48         $(svg).change(line, {
  49             'stroke-width' : (2 / scale)
  50         });
  51     });
  52
  53     var polygon;
  54     $('path.vector').each(function () {
  55         id = $(this).attr('id');
  56         polygon = svg.getElementById(id);
  57         $(svg).change(polygon, {
  58             'stroke-width' : (0.5 / scale)
  59         });
  60     });
  61 }
  62
  63 /**
  64  * Initially loads either SVG or OSM visualization based on the choice.
  65  */
  66 function selectVisualization () {
  67     if ($('#choice').prop('checked') !== true) {
  68         $('#openlayersmap').hide();
  69     } else {
  70         $('#placeholder').hide();
  71     }
  72 }
  73
  74 /**
  75  * Adds necessary styles to the div that coontains the openStreetMap.
  76  */
  77 function styleOSM () {
  78     var $placeholder = $('#placeholder');
  79     var cssObj = {
  80         'border' : '1px solid #aaa',
  81         'width' : $placeholder.width(),
  82         'height' : $placeholder.height(),
  83         'float' : 'right'
  84     };
  85     $('#openlayersmap').css(cssObj);
  86 }
  87
  88 /**
  89  * Loads the SVG element and make a reference to it.
  90  */
  91 function loadSVG () {
  92     var $placeholder = $('#placeholder');
  93
  94     $placeholder.svg({
  95         onLoad: function (svg_ref) {
  96             svg = svg_ref;
  97         }
  98     });
  99
 100     // Removes the second SVG element unnecessarily added due to the above command
 101     $placeholder.find('svg:nth-child(2)').remove();
 102 }
 103
 104 /**
 105  * Adds controllers for zooming and panning.
 106  */
 107 function addZoomPanControllers () {
 108     var $placeholder = $('#placeholder');
 109     if ($('#placeholder').find('svg').length > 0) {
 110         var pmaThemeImage = $('#pmaThemeImage').val();
 111         // add panning arrows
 112         $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder);
 113         $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder);
 114         $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder);
 115         $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder);
 116         // add zooming controls
 117         $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder);
 118         $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder);
 119         $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder);
 120     }
 121 }
 122
 123 /**
 124  * Resizes the GIS visualization to fit into the space available.
 125  */
 126 function resizeGISVisualization () {
 127     var $placeholder = $('#placeholder');
 128     var old_width = $placeholder.width();
 129     var visWidth = $('#div_view_options').width() - 48;
 130
 131     // Assign new value for width
 132     $placeholder.width(visWidth);
 133     $('svg').attr('width', visWidth);
 134
 135     // Assign the offset created due to resizing to defaultX and center the svg.
 136     defaultX = (visWidth - old_width) / 2;
 137     x = defaultX;
 138     y = 0;
 139     scale = 1;
 140 }
 141
 142 /**
 143  * Initialize the GIS visualization.
 144  */
 145 function initGISVisualization () {
 146     // Loads either SVG or OSM visualization based on the choice
 147     selectVisualization();
 148     // Resizes the GIS visualization to fit into the space available
 149     resizeGISVisualization();
 150     if (typeof OpenLayers !== 'undefined') {
 151         // Configure OpenLayers
 152         OpenLayers._getScriptLocation = function () {
 153             return './js/vendor/openlayers/';
 154         };
 155         // Adds necessary styles to the div that coontains the openStreetMap
 156         styleOSM();
 157         // Draws openStreetMap with openLayers
 158         drawOpenLayers();
 159     }
 160     // Loads the SVG element and make a reference to it
 161     loadSVG();
 162     // Adds controllers for zooming and panning
 163     addZoomPanControllers();
 164     zoomAndPan();
 165 }
 166
 167 function getRelativeCoords (e) {
 168     var position = $('#placeholder').offset();
 169     return {
 170         x : e.pageX - position.left,
 171         y : e.pageY - position.top
 172     };
 173 }
 174
 175 /**
 176  * Ajax handlers for GIS visualization page
 177  *
 178  * Actions Ajaxified here:
 179  *
 180  * Zooming in and zooming out on mousewheel movement.
 181  * Panning the visualization on dragging.
 182  * Zooming in on double clicking.
 183  * Zooming out on clicking the zoom out button.
 184  * Panning on clicking the arrow buttons.
 185  * Displaying tooltips for GIS objects.
 186  */
 187
 188 /**
 189  * Unbind all event handlers before tearing down a page
 190  */
 191 AJAX.registerTeardown('tbl_gis_visualization.js', function () {
 192     $(document).off('click', '#choice');
 193     $(document).off('mousewheel', '#placeholder');
 194     $(document).off('dragstart', 'svg');
 195     $(document).off('mouseup', 'svg');
 196     $(document).off('drag', 'svg');
 197     $(document).off('dblclick', '#placeholder');
 198     $(document).off('click', '#zoom_in');
 199     $(document).off('click', '#zoom_world');
 200     $(document).off('click', '#zoom_out');
 201     $(document).off('click', '#left_arrow');
 202     $(document).off('click', '#right_arrow');
 203     $(document).off('click', '#up_arrow');
 204     $(document).off('click', '#down_arrow');
 205     $('.vector').off('mousemove').off('mouseout');
 206 });
 207
 208 AJAX.registerOnload('tbl_gis_visualization.js', function () {
 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').on('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').on('mouseout', function (event) {
 363         $('#tooltip').remove();
 364     });
 365 });