libs/js/jquery-geo-1.0a4/js/jquery.geo.shingled.js

   1 (function ($, undefined) {
   2   $.geo._serviceTypes.shingled = (function () {
   3     return {
   4       create: function (map, serviceContainer, service, index) {
   5         var serviceState = $.data(service, "geoServiceState");
   6
   7         if ( !serviceState ) {
   8           serviceState = {
   9             loadCount: 0
  10           };
  11
  12           var scHtml = '<div data-geo-service="shingled" style="position:absolute; left:0; top:0; width:16px; height:16px; margin:0; padding:0;"></div>';
  13
  14           serviceContainer.append(scHtml);
  15
  16           serviceState.serviceContainer = serviceContainer.children(":last");
  17           $.data(service, "geoServiceState", serviceState);
  18         }
  19
  20         return serviceState.serviceContainer;
  21       },
  22
  23       destroy: function (map, serviceContainer, service) {
  24         var serviceState = $.data(service, "geoServiceState");
  25
  26         serviceState.serviceContainer.remove();
  27
  28         $.removeData(service, "geoServiceState");
  29       },
  30
  31       interactivePan: function (map, service, dx, dy) {
  32         var serviceState = $.data(service, "geoServiceState");
  33
  34         if ( serviceState ) {
  35           this._cancelUnloaded(map, service);
  36
  37           var serviceContainer = serviceState.serviceContainer,
  38               pixelSize = map._pixelSize,
  39               scaleContainer = serviceContainer.children("[data-pixelSize='" + pixelSize + "']"),
  40               panContainer = scaleContainer.children("div");
  41
  42           if ( !panContainer.length ) {
  43             scaleContainer.children("img").wrap('<div style="position:absolute; left:0; top:0; width:100%; height:100%;"></div>');
  44             panContainer = scaleContainer.children("div");
  45           }
  46
  47           panContainer.css( {
  48             left: function (index, value) {
  49               return parseInt(value) + dx;
  50             },
  51             top: function (index, value) {
  52               return parseInt(value) + dy;
  53             }
  54           } );
  55
  56           // until pan/zoom rewrite, remove all containers not in this scale
  57           serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
  58         }
  59       },
  60
  61       interactiveScale: function (map, service, center, pixelSize) {
  62         var serviceState = $.data(service, "geoServiceState");
  63
  64         if ( serviceState ) {
  65           this._cancelUnloaded(map, service);
  66
  67           var serviceContainer = serviceState.serviceContainer,
  68
  69               contentBounds = map._getContentBounds(),
  70               mapWidth = contentBounds["width"],
  71               mapHeight = contentBounds["height"],
  72
  73               halfWidth = mapWidth / 2,
  74               halfHeight = mapHeight / 2,
  75
  76               bbox = [center[0] - halfWidth, center[1] - halfHeight, center[0] + halfWidth, center[1] + halfHeight];
  77
  78           serviceContainer.children().each(function (i) {
  79             var $scaleContainer = $(this),
  80                 scalePixelSize = $scaleContainer.attr("data-pixelSize"),
  81                 ratio = scalePixelSize / pixelSize;
  82
  83             $scaleContainer.css( {
  84               width: mapWidth * ratio,
  85               height: mapHeight * ratio } ).children("img").each(function (i) {
  86               var $img = $(this),
  87                   imgCenter = $img.data("center"),
  88                   x = (Math.round((imgCenter[0] - center[0]) / scalePixelSize) - halfWidth) * ratio,
  89                   y = (Math.round((center[1] - imgCenter[1]) / scalePixelSize) - halfHeight) * ratio;
  90
  91               $img.css({ left: x + "px", top: y + "px" });
  92             });
  93           });
  94         }
  95       },
  96
  97       refresh: function (map, service) {
  98         var serviceState = $.data(service, "geoServiceState");
  99
 100         this._cancelUnloaded(map, service);
 101
 102         if ( serviceState && service && service.style.visibility === "visible" && !( serviceState.serviceContainer.is( ":hidden" ) ) ) {
 103
 104           var bbox = map._getBbox(),
 105               pixelSize = map._pixelSize,
 106
 107               serviceObj = this,
 108               serviceContainer = serviceState.serviceContainer,
 109
 110               contentBounds = map._getContentBounds(),
 111               mapWidth = contentBounds["width"],
 112               mapHeight = contentBounds["height"],
 113
 114               halfWidth = mapWidth / 2,
 115               halfHeight = mapHeight / 2,
 116
 117               scaleContainer = serviceContainer.children('[data-pixelSize="' + pixelSize + '"]'),
 118
 119               opacity = service.style.opacity,
 120
 121               $img;
 122
 123           if ( !scaleContainer.size() ) {
 124             serviceContainer.append('<div style="position:absolute; left:' + halfWidth + 'px; top:' + halfHeight + 'px; width:' + mapWidth + 'px; height:' + mapHeight + 'px; margin:0; padding:0;" data-pixelSize="' + pixelSize + '"></div>');
 125             scaleContainer = serviceContainer.children(":last");
 126           }
 127
 128           scaleContainer.children("img").each(function (i) {
 129             var $thisimg = $(this),
 130                 imgCenter = $thisimg.data("center"),
 131                 center = map._getCenter(),
 132                 x = Math.round((imgCenter[0] - center[0]) / pixelSize) - halfWidth,
 133                 y = Math.round((center[1] - imgCenter[1]) / pixelSize) - halfHeight;
 134
 135             $thisimg.css({ left: x + "px", top: y + "px" });
 136           });
 137
 138           if (opacity < 1) {
 139             serviceContainer.find("img").attr("data-keepAlive", "0");
 140           }
 141
 142           var urlProp = ( service.hasOwnProperty("src") ? "src" : "getUrl" ),
 143               urlArgs = {
 144                 bbox: bbox,
 145                 width: mapWidth,
 146                 height: mapHeight,
 147                 zoom: map._getZoom(),
 148                 tile: null,
 149                 index: 0
 150               },
 151               isFunc = $.isFunction( service[ urlProp ] ),
 152               imageUrl;
 153
 154
 155           if ( isFunc ) {
 156             imageUrl = service[ urlProp ]( urlArgs );
 157           } else {
 158             $.template( "geoSrc", service[ urlProp ] );
 159             imageUrl = $.render( urlArgs, "geoSrc" );
 160           }
 161
 162           serviceState.loadCount++;
 163           //this._map._requestQueued();
 164
 165           scaleContainer.append('<img style="position:absolute; left:-' + halfWidth + 'px; top:-' + halfHeight + 'px; width:100%; height:100%; margin:0; padding:0; -khtml-user-select:none; -moz-user-select:none; -webkit-user-select:none; user-select:none; display:none;" unselectable="on" />');
 166           $img = scaleContainer.children(":last").data("center", map._getCenter());
 167
 168           if ( typeof imageUrl === "string" ) {
 169             serviceObj._loadImage( $img, imageUrl, pixelSize, serviceState, serviceContainer, opacity );
 170           } else {
 171             // assume Deferred
 172             imageUrl.done( function( url ) {
 173               serviceObj._loadImage( $img, url, pixelSize, serviceState, serviceContainer, opacity );
 174             } ).fail( function( ) {
 175               $img.remove( );
 176               serviceState.loadCount--;
 177             } );
 178           }
 179
 180         }
 181       },
 182
 183       resize: function (map, service) {
 184         var serviceState = $.data(service, "geoServiceState");
 185
 186         if ( serviceState && service && service.style.visibility === "visible" ) {
 187           this._cancelUnloaded(map, service);
 188
 189           var serviceContainer = serviceState.serviceContainer,
 190
 191               contentBounds = map._getContentBounds(),
 192               mapWidth = contentBounds["width"],
 193               mapHeight = contentBounds["height"],
 194
 195               halfWidth = mapWidth / 2,
 196               halfHeight = mapHeight / 2,
 197
 198               scaleContainer = serviceContainer.children();
 199
 200           scaleContainer.attr("data-pixelSize", "0");
 201           scaleContainer.css({
 202             left: halfWidth + 'px',
 203             top: halfHeight + 'px'
 204           });
 205         }
 206       },
 207
 208       opacity: function ( map, service ) {
 209         var serviceState = $.data( service, "geoServiceState" );
 210         serviceState.serviceContainer.find( "img" ).stop( true ).fadeTo( "fast", service.style.opacity );
 211       },
 212
 213       toggle: function (map, service) {
 214         var serviceState = $.data(service, "geoServiceState");
 215         serviceState.serviceContainer.css("display", service.style.visibility === "visible" ? "block" : "none");
 216       },
 217
 218       _cancelUnloaded: function (map, service) {
 219         var serviceState = $.data(service, "geoServiceState");
 220
 221         if (serviceState && serviceState.loadCount > 0) {
 222           serviceState.serviceContainer.find("img:hidden").remove();
 223           while (serviceState.loadCount > 0) {
 224             serviceState.loadCount--;
 225           }
 226         }
 227       },
 228
 229       _loadImage: function ( $img, url, pixelSize, serviceState, serviceContainer, opacity ) {
 230         $img.load(function (e) {
 231           if (opacity < 1) {
 232             $(e.target).fadeTo(0, opacity);
 233           } else {
 234             $(e.target).show();
 235           }
 236
 237           serviceState.loadCount--;
 238
 239           if (serviceState.loadCount <= 0) {
 240             serviceContainer.children(':not([data-pixelSize="' + pixelSize + '"])').remove();
 241
 242             var panContainer = serviceContainer.find('[data-pixelSize="' + pixelSize + '"]>div');
 243             if (panContainer.size() > 0) {
 244               var panContainerPos = panContainer.position();
 245
 246               panContainer.children("img").each(function (i) {
 247                 var $thisimg = $(this),
 248                     x = panContainerPos.left + parseInt($thisimg.css("left")),
 249                     y = panContainerPos.top + parseInt($thisimg.css("top"));
 250
 251                 $thisimg.css({ left: x + "px", top: y + "px" });
 252               }).unwrap();
 253
 254               panContainer.remove();
 255             }
 256
 257             serviceState.loadCount = 0;
 258           }
 259         }).error(function (e) {
 260           $(e.target).remove();
 261           serviceState.loadCount--;
 262
 263           if (serviceState.loadCount <= 0) {
 264             serviceContainer.children(":not([data-pixelSize='" + pixelSize + "'])").remove();
 265             serviceState.loadCount = 0;
 266           }
 267         }).attr("src", url);
 268       }
 269     }
 270   })();
 271 })(jQuery);
 272