3

I'm working on an app that displays a large image just about the same way as Google Maps. As the user drags the map, more images are loaded so that when a new part of the map is visible, the corresponding images are already in place.

By the way, this is a Javascript project.

I'm thinking of representing each tile as a square div with the image loaded as a background image.

My question: how exactly can I calculate what divs are showing, and when the tiles are moved, how do I tell when a new row of divs have become visible?

Thanks!

rodrigo-silveira
  • 12,607
  • 11
  • 69
  • 123

2 Answers2

3

About calculating what divs are showing: learn the algorithm for intersecting two rectangles (the stackoverflow question Algorithm to detect intersection of two rectangles? is a good starting point). With that, the divs that are showing are the ones whose intersection with the "view window" is non-empty.

About telling when a new row of divs have become visible: you will probably need a updateInterface() method anyway. Use this method to keep track of the divs showing, and when divs that weren't showing before enter the view window, fire a event handler of sorts.

About implementation: you should probably have the view window be itself a div with overflow: hidden and position: relative. Having a relative position attribute in CSS means that a child with absolute position top 0, left 0 will be at the top-left edge of the container (the view area, in your case).

About efficiency: depending on how fast your "determine which divs are showing" algorithm ends up being, you can try handling the intersection detection only when the user stops dragging, not on the mouse move. You should also preload the areas immediately around your current view window, so that if the user doesn't drag too far away, they will already be loaded.

Some further reference:

Community
  • 1
  • 1
Rafael Almeida
  • 10,352
  • 6
  • 45
  • 60
  • Thanks for the replies. Very helpful stuff so far. To clarify, this personal project is just something I thought of to do just for fun. I've been studying GWT and now I want to program an app a bit more involved, just so I can get the hang of it and get passed the hello world stuff in GWT. What I actually want to map are levels from video games. Something like this http://goo.gl/t3eQF but with tiles being loaded on demand, rather than just loading the entire map at once (even though in this particular example loading everything at once, from a sprite sheet, might be an easier solution). – rodrigo-silveira Aug 27 '11 at 20:53
  • Hi @EqSum, welcome to Stack Overflow! I'm glad you found the answers useful =D. Just so you know, it's considered good measure to "vote up" (by clicking on the arrow above the big number next to the answer) answers you find helpful, and to "accept" the answer which does solve your problem, if it applies. That's an incentive for people to contribute good answers =). – Rafael Almeida Aug 29 '11 at 12:08
  • About your issue, be sure to check the demos for the second link in my answer! – Rafael Almeida Aug 29 '11 at 12:13
2

There's no reason to implement this yourself, really, unless it's just a fun project. There are several open source libraries that handle online mapping.

To answer your question, you need to have an orthophoto-type image (an image aligned with the coordinate space) and then a mapping from pixel coordinates (i.e. the screen) to world coordinates. If it's not map images, just arbitrary large images then, again, you need to create a mapping between the pixel coordinates of the source image at various zoom levels and the view-port's coordinates.

If you read Google Map's SDK documentation you will see explanations of these terms. It's also a good idea to explore one of the aforementioned existing libraries, read its documentation and see how it's done.

But, again, if this is real work, don't implement it yourself. There's no reason to.

Assaf Lavie
  • 73,079
  • 34
  • 148
  • 203
  • I think that from his question we can't really infer that his problem is geographic, so mapping libraries probably won't be terribly useful without some tweaking. I do agree that an existing solution should be used (excluding learning purposes), though. – Rafael Almeida Aug 27 '11 at 15:24