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