[Mapbender-commits] r4970 - trunk/mapbender/http/javascripts

[svn_mapbender at osgeo.org]

Author: christoph
Date: 2009-11-10 12:27:44 -0500 (Tue, 10 Nov 2009)
New Revision: 4970

Modified:
   trunk/mapbender/http/javascripts/map_obj.js
Log:
slippy

Modified: trunk/mapbender/http/javascripts/map_obj.js
===================================================================
--- trunk/mapbender/http/javascripts/map_obj.js	2009-11-09 17:08:22 UTC (rev 4969)
+++ trunk/mapbender/http/javascripts/map_obj.js	2009-11-10 17:27:44 UTC (rev 4970)
@@ -980,9 +980,15 @@
 //			console.log("new");
 	        var newMapRequest = "";
 	        for (var i = 0; i < idArray.length; i++) {
-	            newMapRequest += getLayerHtmlCode(idArray[i]);
+	            newMapRequest += getLayerHtmlCode(idArray[i], requestCnt);
 	        }
-			var $currentRequest = $("<div id='" + that.elementName + "_request_" + (requestCnt) + "'></div>").hide().append($(newMapRequest));
+			var $currentRequest = $(
+				"<div id='" + that.elementName + "_request_" + (requestCnt) + 
+				"'></div>").hide().css({
+					position: "absolute",
+					top: "0px",
+					left: "0px"
+				}).append($(newMapRequest));
 			
 	        $("#" + that.elementName + "_maps").append($currentRequest);
 			for (var i = 0; i < requestCnt; i++) {
@@ -1021,7 +1027,7 @@
                 new Mb_notice(currentWms.title + " is not visible, will not be requested.");
                 continue;
             }
-            myMapId.push(that.elementName + "_map_" + ii);
+            myMapId.push(that.elementName + "_request_" + index + "_map_" + ii);
             mapUrlArray.push(that.getMapUrl(ii));
             visibleWms.push(ii);
         }
@@ -1044,26 +1050,59 @@
 	var doAnimation = false;
 	
 	var animateMaps = function (index) {
-//		console.log(that.oldExtentPix);
-//		
+		$("#" + that.elementName + "_request_" + index).css().show();
+		
 		if (doAnimation) {
+
+			$("#" + that.elementName + "_request_" + (index - 1)).css().show();
+				
+			//
+			// hide new images until complete, but perform pan animation
+			//
 			$("#" + that.elementName + "_request_" + index).children().children().css({
 				visibility: "hidden"
 			}).load(function () {
 				this.style.visibility = "visible";
 			});
+
+			//
+			// animate new images (zoom)
+			//
+			var newWidth = that.oldExtentPix.max.x - that.oldExtentPix.min.x;
+			var newHeight = that.oldExtentPix.min.y - that.oldExtentPix.max.y;
+			if (newWidth !== that.width || newHeight !== that.height) {
+				var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
+				currentMapImg.css({
+					width: newWidth,
+					height: newHeight				
+				}).animate(
+					{
+						width: that.width + "px",
+						height: that.height + "px"
+					}, "normal", "linear", function () {
+						// TODO: deactive corresponding old image
+					}
+				);
+			}
+
+			//
+			// animate new images (pan & zoom)
+			//
 			$("#" + that.elementName + "_request_" + index).css({
 				position: "absolute",
 				top: that.oldExtentPix.max.y,
 				left: that.oldExtentPix.min.x
-			}).show().animate({
+			}).animate(
+				{
 					left: "0px",
 					top: "0px"
-				}, {
-					duration: "slow"
-				});
+				}, "normal", "linear"
+			);
 	
+
+			//
 			// animate previous request div and images
+			//
 			var oldLLPix = that.convertRealToPixel(that.oldExtent.min);
 			var oldURPix = that.convertRealToPixel(that.oldExtent.max);
 			
@@ -1071,21 +1110,36 @@
 			var top = oldURPix.y;
 			var width = oldURPix.x - oldLLPix.x;
 			var height = oldLLPix.y - oldURPix.y;
-	
-			$("#" + that.elementName + "_request_" + (index-1)).css({
-				position: "absolute",
-				top: "0px",
-				left: "0px"
-			}).show().animate({
-				left: left + "px",
-				top: top + "px"
-			}, {
-				duration: "slow"
-			});
+			
+			// zoom
+			if (width !== that.width || height !== that.height) {
+				// zoom
+				var oldMapImg = $("#" + that.elementName + "_request_" + (index-1) + " div img");
+				oldMapImg.css({
+					position: "absolute"
+				}).animate(
+					{
+						width: width + "px",
+						height: height + "px"
+					}, 
+					"normal",
+					"linear"
+				);
+			}
+
+			// pan & zoom
+			$("#" + that.elementName + "_request_" + (index - 1)).animate(
+				{
+					left: left + "px",
+					top: top + "px"
+				}, 
+				"normal", 
+				"linear"
+			);
+
+
+
 		}
-		else {
-			$("#" + that.elementName + "_request_" + index).show();
-		}
 	};
 	
     this.setMapRequest = function(){
@@ -1124,11 +1178,11 @@
 		this.history.forward(false);
     };
     
-    var getLayerHtmlCode = function(ii){
+    var getLayerHtmlCode = function(ii, requestCnt){
         var currentWms = that.wms[ii];
         
-        var myDivId = that.elementName + "_div_" + ii;
-        var myMapId = that.elementName + "_map_" + ii;
+        var myDivId = that.elementName + "_request_" + requestCnt + "_div_" + ii;
+        var myMapId = that.elementName + "_request_" + requestCnt + "_map_" + ii;
         var ts = mb_timestamp();
         
         //disable Layer which are out of scale
@@ -1162,7 +1216,7 @@
         
         var newMapRequest = "<div id='" + myDivId + "' ";
         newMapRequest += "style=\"position:absolute; top:0px; left:0px; ";
-        //		newMapRequest += "style=\"";
+        //newMapRequest += "style=\"";
         newMapRequest += "z-index:" + (2 * ii + 20) + ";" + opacityString + "\">";
         newMapRequest += imageString;
         newMapRequest += "</div>";