js/tbl_gis_visualization.js

   1 /**
   2  * @fileoverview    functions used for visualizing GIS data
   3  *
   4  * @requires    jquery
   5  * @requires    jquery/jquery.svg.js
   6  * @requires    jquery/jquery.mousewheel.js
   7  * @requires    jquery/jquery.event.drag-2.0.min.js
   8  */
   9
  10 var x = 0;
  11 var default_x = 0;
  12 var y = 0;
  13 var default_y = 0;
  14 var scale = 1;
  15 var svg;
  16
  17 /**
  18  * Zooms and pans the visualization.
  19  */
  20 function zoomAndPan() {
  21     var g = svg.getElementById('groupPanel');
  22
  23     g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
  24     var id;
  25     var circle;
  26     $('circle.vector').each(function() {
  27         id = $(this).attr('id');
  28         circle = svg.getElementById(id);
  29         svg.change(circle, {
  30             r : (3 / scale),
  31             "stroke-width" : (2 / scale)
  32         });
  33     });
  34
  35     var line;
  36     $('polyline.vector').each(function() {
  37         id = $(this).attr('id');
  38         line = svg.getElementById(id);
  39         svg.change(line, {
  40             "stroke-width" : (2 / scale)
  41         });
  42     });
  43
  44     var polygon;
  45     $('path.vector').each(function() {
  46         id = $(this).attr('id');
  47         polygon = svg.getElementById(id);
  48         svg.change(polygon, {
  49             "stroke-width" : (0.5 / scale)
  50         });
  51     });
  52 }
  53
  54 /**
  55  * Initially loads either SVG or OSM visualization based on the choice.
  56  */
  57 function selectVisualization() {
  58     if ($('#choice').prop('checked') != true) {
  59         $('#openlayersmap').hide();
  60     } else {
  61         $('#placeholder').hide();
  62     }
  63     $('.choice').show();
  64 }
  65
  66 /**
  67  * Adds necessary styles to the div that coontains the openStreetMap.
  68  */
  69 function styleOSM() {
  70     var $placeholder = $('#placeholder');
  71     var cssObj = {
  72         'border' : '1px solid #aaa',
  73         'width' : $placeholder.width(),
  74         'height' : $placeholder.height(),
  75         'float' : 'right'
  76     };
  77     $('#openlayersmap').css(cssObj);
  78 }
  79
  80 /**
  81  * Loads the SVG element and make a reference to it.
  82  */
  83 function loadSVG() {
  84     var $placeholder = $('#placeholder');
  85
  86     $placeholder.svg({
  87         onLoad: function(svg_ref) {
  88             svg = svg_ref;
  89         }
  90     });
  91
  92     // Removes the second SVG element unnecessarily added due to the above command
  93     $placeholder.find('svg:nth-child(2)').remove();
  94 }
  95
  96 /**
  97  * Adds controllers for zooming and panning.
  98  */
  99 function addZoomPanControllers() {
 100     var $placeholder = $('#placeholder');
 101     if ($("#placeholder svg").length > 0) {
 102         var pmaThemeImage = $('#pmaThemeImage').attr('value');
 103         // add panning arrows
 104         $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder);
 105         $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder);
 106         $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder);
 107         $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder);
 108         // add zooming controls
 109         $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder);
 110         $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder);
 111         $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder);
 112     }
 113 }
 114
 115 /**
 116  * Resizes the GIS visualization to fit into the space available.
 117  */
 118 function resizeGISVisualization() {
 119     var $placeholder = $('#placeholder');
 120
 121     // Hide inputs for width and height
 122     $("input[name='visualizationSettings[width]']").parents('tr').remove();
 123     $("input[name='visualizationSettings[height]']").parents('tr').remove();
 124
 125     var old_width = $placeholder.width();
 126     var extraPadding = 100;
 127     var leftWidth = $('.gis_table').width();
 128     var windowWidth = document.documentElement.clientWidth;
 129     var visWidth = windowWidth - extraPadding - leftWidth;
 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 default_x and center the svg.
 136     default_x = (visWidth - old_width) / 2;
 137     x = default_x;
 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 /**
 160  * Ajax handlers for GIS visualization page
 161  *
 162  * Actions Ajaxified here:
 163  *
 164  * Zooming in and zooming out on mousewheel movement.
 165  * Panning the visualization on dragging.
 166  * Zooming in on double clicking.
 167  * Zooming out on clicking the zoom out button.
 168  * Panning on clicking the arrow buttons.
 169  * Displaying tooltips for GIS objects.
 170  */
 171 $(document).ready(function() {
 172
 173     // If we are in GIS visualization, initialize it
 174     if ($('.gis_table').length > 0) {
 175         initGISVisualization();
 176     }
 177
 178     $('#choice').live('click', function() {
 179         if ($(this).prop('checked') == false) {
 180             $('#placeholder').show();
 181             $('#openlayersmap').hide();
 182         } else {
 183             $('#placeholder').hide();
 184             $('#openlayersmap').show();
 185         }
 186     });
 187
 188     $('#placeholder').live('mousewheel', function(event, delta) {
 189         if (delta > 0) {
 190             //zoom in
 191             scale *= 1.5;
 192             // zooming in keeping the position under mouse pointer unmoved.
 193             x = event.layerX - (event.layerX - x) * 1.5;
 194             y = event.layerY - (event.layerY - y) * 1.5;
 195             zoomAndPan();
 196         } else {
 197             //zoom out
 198             scale /= 1.5;
 199             // zooming out keeping the position under mouse pointer unmoved.
 200             x = event.layerX - (event.layerX - x) / 1.5;
 201             y = event.layerY - (event.layerY - y) / 1.5;
 202             zoomAndPan();
 203         }
 204         return true;
 205     });
 206
 207     var dragX = 0; var dragY = 0;
 208     $('svg').live('dragstart', function(event, dd) {
 209         $('#placeholder').addClass('placeholderDrag');
 210         dragX = Math.round(dd.offsetX);
 211         dragY = Math.round(dd.offsetY);
 212     });
 213
 214     $('svg').live('mouseup', function(event) {
 215         $('#placeholder').removeClass('placeholderDrag');
 216     });
 217
 218     $('svg').live('drag', function(event, dd) {
 219         newX = Math.round(dd.offsetX);
 220         x +=  newX - dragX;
 221         dragX = newX;
 222         newY = Math.round(dd.offsetY);
 223         y +=  newY - dragY;
 224         dragY = newY;
 225         zoomAndPan();
 226     });
 227
 228     $('#placeholder').live('dblclick', function(event) {
 229         scale *= 1.5;
 230         // zooming in keeping the position under mouse pointer unmoved.
 231         x = event.layerX - (event.layerX - x) * 1.5;
 232         y = event.layerY - (event.layerY - y) * 1.5;
 233         zoomAndPan();
 234     });
 235
 236     $('#zoom_in').live('click', function(e) {
 237         e.preventDefault();
 238         //zoom in
 239         scale *= 1.5;
 240
 241         width = $('#placeholder svg').attr('width');
 242         height = $('#placeholder svg').attr('height');
 243         // zooming in keeping the center unmoved.
 244         x = width / 2 - (width / 2 - x) * 1.5;
 245         y = height / 2 - (height / 2 - y) * 1.5;
 246         zoomAndPan();
 247     });
 248
 249     $('#zoom_world').live('click', function(e) {
 250         e.preventDefault();
 251         scale = 1;
 252         x = default_x;
 253         y = default_y;
 254         zoomAndPan();
 255     });
 256
 257     $('#zoom_out').live('click', function(e) {
 258         e.preventDefault();
 259         //zoom out
 260         scale /= 1.5;
 261
 262         width = $('#placeholder svg').attr('width');
 263         height = $('#placeholder svg').attr('height');
 264         // zooming out keeping the center unmoved.
 265         x = width / 2 - (width / 2 - x) / 1.5;
 266         y = height / 2 - (height / 2 - y) / 1.5;
 267         zoomAndPan();
 268     });
 269
 270     $('#left_arrow').live('click', function(e) {
 271         e.preventDefault();
 272         x += 100;
 273         zoomAndPan();
 274     });
 275
 276     $('#right_arrow').live('click', function(e) {
 277         e.preventDefault();
 278         x -= 100;
 279         zoomAndPan();
 280     });
 281
 282     $('#up_arrow').live('click', function(e) {
 283         e.preventDefault();
 284         y += 100;
 285         zoomAndPan();
 286     });
 287
 288     $('#down_arrow').live('click', function(e) {
 289         e.preventDefault();
 290         y -= 100;
 291         zoomAndPan();
 292     });
 293
 294     /**
 295      * Detect the mousemove event and show tooltips.
 296      */
 297     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
 298             + '.geometrycollection').live('mousemove', function(event) {
 299         contents = $.trim($(this).attr('name'));
 300         $("#tooltip").remove();
 301         if (contents != '') {
 302             $('<div id="tooltip">' + contents + '</div>').css({
 303                 position : 'absolute',
 304                 display : 'none',
 305                 top : event.pageY + 10,
 306                 left : event.pageX + 10,
 307                 border : '1px solid #fdd',
 308                 padding : '2px',
 309                 'background-color' : '#fee',
 310                 opacity : 0.80
 311             }).appendTo("body").fadeIn(200);
 312         }
 313     });
 314
 315     /**
 316      * Detect the mouseout event and hide tooltips.
 317      */
 318     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
 319             + '.geometrycollection').live('mouseout', function(event) {
 320         $("#tooltip").remove();
 321     });
 322 });