openlayers 2 - How to load map tiles according to the drag/touch event

We are building map apis for javascript integrated with our own map data server(tiles). (Though we can use openlayers or something else, but we can not for some thrid-part reasons).

In a word, we are re-writing something like openlayers.

The following is what we have done:

1. 
   

   When a map is created, it will have the container(dom element),center(LatLng), and zoom . Then we will orginaize the tiles inside the container according to the center and zoom.

   
   


2. 
   

   When user drag the container. We will record the increasement of the mouse position. Then caculate the new center for the map, and then re-caculate the required tiles and orginaize them.

   
   

Like this:

onMouseMove(dx,dy){
  var dinx=caculateDegreeInCurrentResolution(dx);
  var diny=caculateDegreeInCurrentResolution(dy);
  this.center=new LatLng(this.center.lat+diny,this.center.lnt+dinx);
  this.refresh();
}

It works as expected, but we found that it is hard to drag the map. It is not smooth like openlayers or other map library during the drag operation.

So I wonder if we are going the wrong way?

Answer

Have you considered looking at the OpenLayers source code to see how they do it? I can't say it's something I would ever consider doing as I'd rather just use OpenLayers as is. It has a very open license so there shouldn't be any issues there. If it's a techincal problem then fair enough, although make sure you've taken enough time to be absolutely sure you can't just use OpenLayers as rewriting a whole map api sounds like a nightmare. Apologies if you have alerady thought of everything but I'd being doing a disservice if I didn't at least mention it!

Back to the question at hand, you could look at the OpenLayers source code to see how they do it. I wouldn't say you should just rip it off but certainly take inspiration and see if there is anything obvious you are missing. I don't know how the licensing works for OpenLayers (and maybe someone more knowlegeable could enlighten me) but I'm sure that if you did use parts of the OpenLayers source you would just have to appropriately attribute it to them in your source code. Even if you don't you just should as good practice. Anyway, here's a link to the OpenLayers 'DragPan' module on GitHub - OpenLayers DragPan - You may need to do a fair bit of digging from there to find exactly what you are after, or you can start looking from the top - OpenLayers on GitHub

Hope that helps you in some way!