Question

In our application,we provide the online map like google map:
show the map tiles in a div(the container),when user drag/move the container,new map tiles(in fact,they are images) will be downloaded.

However unlike google map,we provide more than one layers in the container,for exmaple,in the following tile:

It is just one image,but in our case,it maybe more than 5 transprant images overlayed together.

So,once user drag or move the container,we will download 5 times amount of images than before. Which will cause the “mouse drag operation” so slowly,so I wonder if there is any way to improve it?

In my opinion this is caused by the http Parallel Downloads. In common,we will download about 6(6 tiles in the current map view,see the image below)*5(layers)=30 images per operation by user.

This is a big requrement.

I read this paper:
Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane

The author provide a way “using additional aliases” to increase the parallel downloads in our pages,it seems a good idea.

But our application run in the intranet network without the Internet,user often browse the site use this url :

http://servername/app

And Our tiles are saved at: http://servername/app/tiles/...../xx.png

So I do not know if we can add aliases like :

http://img1.servername/app/tiles/...../xx.png
http://img2.servername/app/tiles/...../xx.png ?

I do not think so. 🙁

So in my case,any idea to improvement the Performance?

Answer 1

You could move the load to the server side for a bit by making something that just merges those tiles.

For example your serverside program would exist at http://www.servername/app/tiles/gettile/?12&13&14 and just return the merged result of tile 12 13 and 14.