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:

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

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?

  • I'm with Rob Quincey - why are you doing this? Optimizing OpenLayers in some fashion seems like a better decision. The academic pursuit of writing your own is interesting, but it otherwise seems like a poor use of time. May 4, 2014 at 19:24

1 Answer 1


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!

  • 1
    It looks like the really gritty stuff is actually in Events.js. There's a method chain up from the Pan logic to Drag.js to isSingleTouch() to some logic around evt.touches, that does some additional work to help smooth things out cross-browser. Not trivial. Not worth rewriting yourself, but an interesting read. github.com/openlayers/openlayers/blob/master/lib/OpenLayers/… May 4, 2014 at 19:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.