Ticket #102: loading-panel.patch

File loading-panel.patch, 8.7 kB (added by openlayers, 1 year ago)
Loading panel patch

examples/loadingPanel.html

old	new
	1	<html>
	2	<head>
	3	<script src="../lib/OpenLayers.js"></script>
	4	<style type="text/css">
	5	ul, li { padding-left: 0px; margin-left: 0px; }
	6	</style>
	7	<title>World Map Query</title>
	8	</head>
	9	<body>
	10	<a id='permalink' href="">Permalink</a><br />
	11	<div style="float:right;width:28%">
	12	<h1 style="font-size:1.3em;">CIA Factbook</h1>
	13	<p style='font-size:.8em;'>Click a country to see statistics about the country below.</p>
	14	<div id="nodeList">
	15	</div>
	16	</div>
	17	<div id="map" style="width:70%; height:90%"></div>
	18	<script defer="defer" type="text/javascript">
	19	OpenLayers.ProxyHost = "/dev/examples/proxy.cgi?url=";
	20	//OpenLayers.Event.observe(window, 'load', loadingDone, false);
	21
	22	var map = new OpenLayers.Map('map', {'maxResolution':'auto'});
	23
	24
	25	// Loading DIV
	26	var control = new OpenLayers.Control();
	27	OpenLayers.Util.extend(control, {
	28	draw: function () {
	29	if (this.div == null) {
	30	var viewSize = this.map.getSize();
	31
	32	msgW = Math.max(viewSize.w, 300);
	33	msgH = Math.max(viewSize.h, 200);
	34	var size = new OpenLayers.Size(msgW, msgH);
	35
	36	var centerPx = new OpenLayers.Pixel(viewSize.w/2, viewSize.h/2);
	37
	38	var topLeft = centerPx.add(-size.w/2, -size.h/2);
	39
	40	this.div = OpenLayers.Util.createDiv(this.name + "_warning1",
	41	topLeft,
	42	size,
	43	null,
	44	null,
	45	null,
	46	"auto");
	47
	48	this.div.style.backgroundColor = "transparent";
	49
	50	//msgW = Math.min(viewSize.w, 300);
	51	//msgH = Math.min(viewSize.h, 200);
	52	var size2 = new OpenLayers.Size(msgW, msgH);
	53	var centerPx2 = centerPx.add(-msgW/2, -msgH/2);
	54	var div2 = OpenLayers.Util.createDiv(this.name + "_warning2",
	55	centerPx2,
	56	size2,
	57	null,
	58	null,
	59	null,
	60	"auto",
	61	.75);
	62
	63	//div2.style.padding = "7px";
	64	div2.style.backgroundColor = "white";
	65
	66
	67	//div2.style.opacity = "0.75";
	68	//div2.style.filter = "alpha(opacity=75)";
	69	div2.innerHTML = "<img src='../img/loading.gif' width='"+msgW+"' height='"+msgH+"'/>";
	70
	71
	72	//OpenLayers.Rico.Corner.changeOpacity(div2, 0.75);
	73
	74	this.div.appendChild(div2);
	75
	76	}
	77
	78	return this.div;
	79	},
	80
	81	minimizeControl: function(e) {
	82
	83	this.div.style.width = "0px";
	84	this.div.style.height = "0px";
	85
	86	if (e != null) {
	87	OpenLayers.Event.stop(e);
	88	}
	89	},
	90
	91	maximizeControl: function(e) {
	92	var viewSize = this.map.getSize();
	93
	94	msgW = Math.max(viewSize.w, 300);
	95	msgH = Math.max(viewSize.h, 200);
	96
	97	this.div.style.width = msgW;
	98	this.div.style.height = msgH;
	99
	100	if (e != null) {
	101	OpenLayers.Event.stop(e);
	102	}
	103	}
	104
	105	});
	106
	107	map.addControl(control);
	108
	109
	110	var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
	111	"http://world.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/world/map/factbook.map", {'layers': 'factbook'} );
	112
	113	wms.events.register('loadstart', null, function (e) {
	114	//alert("Start loading ...");
	115	control.maximizeControl(e);
	116	});
	117
	118	wms.events.register('loadend', null, function (e) {
	119	//alert("... Done!!!");
	120	control.minimizeControl(e);
	121	});
	122
	123	map.addLayer(wms);
	124
	125	map.addControl(new OpenLayers.Control.Permalink('permalink'));
	126	map.zoomToMaxExtent();
	127	/* map.events.register('click', map, function (e) {
	128	OpenLayers.Util.getElement('nodeList').innerHTML = "Loading... please wait...";
	129	var url = wms.getFullRequestString({
	130	REQUEST: "GetFeatureInfo",
	131	EXCEPTIONS: "application/vnd.ogc.se_xml",
	132	BBOX: wms.map.getExtent().toBBOX(),
	133	X: e.xy.x,
	134	Y: e.xy.y,
	135	INFO_FORMAT: 'text/html',
	136	QUERY_LAYERS: wms.params.LAYERS,
	137	WIDTH: wms.map.size.w,
	138	HEIGHT: wms.map.size.h});
	139	OpenLayers.loadURL(url, '', this, setHTML);
	140	Event.stop(e);
	141	});
	142	*/
	143	function setHTML(response) {
	144	OpenLayers.Util.getElement('nodeList').innerHTML = response.responseText;
	145	}
	146
	147	</script>
	148	</body>
	149	</html>

lib/OpenLayers/Layer/Grid.js

old	new
23	23	/** @type Integer */
24	24	buffer: 2,
25	25
	26	/** @type Integer */
	27	tilesLoaded: 0,
	28
26	29	/**
27	30	* @constructor
28	31	*
…	…
345	348	}
346	349	}
347	350
	351
	352	//alert("Rising Load-Start Event!!!");
	353	this.events.triggerEvent("loadstart");
	354
348	355	// now we go through and draw the tiles in forward order
	356
	357	this.tilesLoaded = tileQueue.length;
	358	//alert(this.tilesLoaded);
	359
	360	// now we go through and draw the tiles in forward order
349	361	for(var i=0; i < tileQueue.length; i++) {
350	362	var tile = tileQueue[i]
351	363	tile.draw();
	364
	365	if (tile.imgDiv != null) {
	366	OpenLayers.Event.observe(tile.imgDiv, "load",
	367	this.setLoaded.bindAsEventListener(this), false );
	368	OpenLayers.Event.observe(tile.imgDiv, "error",
	369	this.setLoaded.bindAsEventListener(this), false );
	370	OpenLayers.Event.observe(tile.imgDiv, "abort",
	371	this.setLoaded.bindAsEventListener(this), false );
	372	} else {
	373	this.tilesLoaded --;
	374	}
	375
352	376	//mark tile as unqueued for the next time (since tiles are reused)
353	377	tile.queued = false;
354	378	}
355	379	},
356	380
	381	setLoaded:function() {
	382	this.tilesLoaded = this.tilesLoaded - 1;
	383
	384	//alert(this.tilesLoaded);
	385	if (this.tilesLoaded == 0) {
	386	//alert("...Done!!!");
	387	this.events.triggerEvent("loadend");
	388	}
	389
	390	},
	391
357	392	/**
358	393	* addTile gives subclasses of Grid the opportunity to create an
359	394	* OpenLayer.Tile of their choosing. The implementer should initialize

Download in other formats:

Original Format