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