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 y = 0;
  12 var scale = 1;
  13 var svg;
  14
  15 /**
  16  * Zooms and pans the visualization.
  17  */
  18 function zoomAndPan() {
  19     var g = svg.getElementById('groupPanel');
  20
  21     g.setAttribute('transform', 'translate(' + x + ', ' + y + ') scale(' + scale + ')');
  22     var id;
  23     var circle;
  24     $('circle.vector').each(function() {
  25         id = $(this).attr('id');
  26         circle = svg.getElementById(id);
  27         svg.change(circle, {
  28             r : (3 / scale),
  29             "stroke-width" : (2 / scale)
  30         });
  31     });
  32
  33     var line;
  34     $('polyline.vector').each(function() {
  35         id = $(this).attr('id');
  36         line = svg.getElementById(id);
  37         svg.change(line, {
  38             "stroke-width" : (2 / scale)
  39         });
  40     });
  41
  42     var polygon;
  43     $('path.vector').each(function() {
  44         id = $(this).attr('id');
  45         polygon = svg.getElementById(id);
  46         svg.change(polygon, {
  47             "stroke-width" : (0.5 / scale)
  48         });
  49     });
  50 }
  51
  52 /**
  53  * Ajax handlers for GIS visualization page
  54  *
  55  * Actions Ajaxified here:
  56  *
  57  * Zooming in and zooming out on mousewheel movement.
  58  * Panning the visualization on dragging.
  59  * Zooming in on double clicking.
  60  * Zooming out on clicking the zoom out button.
  61  * Panning on clicking the arrow buttons.
  62  * Displaying tooltips for GIS objects.
  63  */
  64 $(document).ready(function() {
  65     var $placeholder = $('#placeholder');
  66     var $openlayersmap = $('#openlayersmap');
  67
  68    if ($('#choice').prop('checked') != true) {
  69         $openlayersmap.hide();
  70     } else {
  71         $placeholder.hide();
  72     }
  73
  74     var cssObj = {
  75         'border' : '1px solid #aaa',
  76         'width' : $placeholder.width(),
  77         'height' : $placeholder.height(),
  78         'float' : 'right'
  79     };
  80     $openlayersmap.css(cssObj);
  81     drawOpenLayers();
  82
  83     $('.choice').show();
  84     $('#choice').bind('click', function() {
  85         if ($(this).prop('checked') == false) {
  86             $placeholder.show();
  87             $openlayersmap.hide();
  88         } else {
  89             $placeholder.hide();
  90             $openlayersmap.show();
  91         }
  92     });
  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     if ($("#placeholder svg").length > 0) {
 104         var pmaThemeImage = $('#pmaThemeImage').attr('value');
 105         // add panning arrows
 106         $('<img class="button" id="left_arrow" src="' + pmaThemeImage + 'west-mini.png">').appendTo($placeholder);
 107         $('<img class="button" id="right_arrow" src="' + pmaThemeImage + 'east-mini.png">').appendTo($placeholder);
 108         $('<img class="button" id="up_arrow" src="' + pmaThemeImage + 'north-mini.png">').appendTo($placeholder);
 109         $('<img class="button" id="down_arrow" src="' + pmaThemeImage + 'south-mini.png">').appendTo($placeholder);
 110         // add zooming controls
 111         $('<img class="button" id="zoom_in" src="' + pmaThemeImage + 'zoom-plus-mini.png">').appendTo($placeholder);
 112         $('<img class="button" id="zoom_world" src="' + pmaThemeImage + 'zoom-world-mini.png">').appendTo($placeholder);
 113         $('<img class="button" id="zoom_out" src="' + pmaThemeImage + 'zoom-minus-mini.png">').appendTo($placeholder);
 114     }
 115
 116     $('#placeholder').live('mousewheel', function(event, delta) {
 117         if (delta > 0) {
 118             //zoom in
 119             scale *= 1.5;
 120             // zooming in keeping the position under mouse pointer unmoved.
 121             x = event.layerX - (event.layerX - x) * 1.5;
 122             y = event.layerY - (event.layerY - y) * 1.5;
 123             zoomAndPan();
 124         } else {
 125             //zoom out
 126             scale /= 1.5;
 127             // zooming out keeping the position under mouse pointer unmoved.
 128             x = event.layerX - (event.layerX - x) / 1.5;
 129             y = event.layerY - (event.layerY - y) / 1.5;
 130             zoomAndPan();
 131         }
 132         return true;
 133     });
 134
 135     var dragX = 0; var dragY = 0;
 136     $('svg').live('dragstart', function(event, dd) {
 137         $placeholder.addClass('placeholderDrag');
 138         dragX = Math.round(dd.offsetX);
 139         dragY = Math.round(dd.offsetY);
 140     });
 141
 142     $('svg').live('mouseup', function(event) {
 143         $placeholder.removeClass('placeholderDrag');
 144     });
 145
 146     $('svg').live('drag', function(event, dd) {
 147         newX = Math.round(dd.offsetX);
 148         x +=  newX - dragX;
 149         dragX = newX;
 150         newY = Math.round(dd.offsetY);
 151         y +=  newY - dragY;
 152         dragY = newY;
 153         zoomAndPan();
 154     });
 155
 156     $('#placeholder').live('dblclick', function(event) {
 157         scale *= 1.5;
 158         // zooming in keeping the position under mouse pointer unmoved.
 159         x = event.layerX - (event.layerX - x) * 1.5;
 160         y = event.layerY - (event.layerY - y) * 1.5;
 161         zoomAndPan();
 162     });
 163
 164     $('#zoom_in').live('click', function(e) {
 165         e.preventDefault();
 166         //zoom in
 167         scale *= 1.5;
 168
 169         width = $('#placeholder svg').attr('width');
 170         height = $('#placeholder svg').attr('height');
 171         // zooming in keeping the center unmoved.
 172         x = width / 2 - (width / 2 - x) * 1.5;
 173         y = height / 2 - (height / 2 - y) * 1.5;
 174         zoomAndPan();
 175     });
 176
 177     $('#zoom_world').live('click', function(e) {
 178         e.preventDefault();
 179         scale = 1;
 180         x = 0;
 181         y = 0;
 182         zoomAndPan();
 183     });
 184
 185     $('#zoom_out').live('click', function(e) {
 186         e.preventDefault();
 187         //zoom out
 188         scale /= 1.5;
 189
 190         width = $('#placeholder svg').attr('width');
 191         height = $('#placeholder svg').attr('height');
 192         // zooming out keeping the center unmoved.
 193         x = width / 2 - (width / 2 - x) / 1.5;
 194         y = height / 2 - (height / 2 - y) / 1.5;
 195         zoomAndPan();
 196     });
 197
 198     $('#left_arrow').live('click', function(e) {
 199         e.preventDefault();
 200         x += 100;
 201         zoomAndPan();
 202     });
 203
 204     $('#right_arrow').live('click', function(e) {
 205         e.preventDefault();
 206         x -= 100;
 207         zoomAndPan();
 208     });
 209
 210     $('#up_arrow').live('click', function(e) {
 211         e.preventDefault();
 212         y += 100;
 213         zoomAndPan();
 214     });
 215
 216     $('#down_arrow').live('click', function(e) {
 217         e.preventDefault();
 218         y -= 100;
 219         zoomAndPan();
 220     });
 221
 222     /**
 223      * Detect the mousemove event and show tooltips.
 224      */
 225     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
 226             + '.geometrycollection').live('mousemove', function(event) {
 227         contents = $(this).attr('name');
 228         $("#tooltip").remove();
 229         if (contents != '') {
 230             $('<div id="tooltip">' + contents + '</div>').css({
 231                 position : 'absolute',
 232                 display : 'none',
 233                 top : event.pageY + 10,
 234                 left : event.pageX + 10,
 235                 border : '1px solid #fdd',
 236                 padding : '2px',
 237                 'background-color' : '#fee',
 238                 opacity : 0.80
 239             }).appendTo("body").fadeIn(200);
 240         }
 241     });
 242
 243     /**
 244      * Detect the mouseout event and hide tooltips.
 245      */
 246     $('.polygon, .multipolygon, .point, .multipoint, .linestring, .multilinestring, '
 247             + '.geometrycollection').live('mouseout', function(event) {
 248         $("#tooltip").remove();
 249     });
 250 });