1

I'm wondering, what would be the simplest approach to turn this:

{x: 0, y: 0, image: 'map_00_00.png',
x: 50, y: 0, image: 'map_01_00.png',
x: 50, y: 50, image: 'map_01_01.png'}

Into something like a Google Map. I'd like to stay with jQuery. Would you use some plugin for dragging? Or just go with some simple events?

I'm thinking the simplest approach would be to load all images at once, position them with CSS, and add some dragging to show hidden parts of viewport.

Still I'm very curious about what other people think.

2
  • 1
    I hope you realise this is going to be A LOT of work...
    – Skilldrick
    Aug 21, 2010 at 11:37
  • I won't have a complete app based on this by the end of weekend :-) Where would we be without challenge, anyway? :-P
    – Vojto
    Aug 21, 2010 at 11:45

3 Answers 3

1

Check out the OpenLayers project. It's an open source map interface implementation (works a lot like Google Maps). You can get some ideas from there.

1

So I hacked around this morning and it's pretty simple.

  1. One div is positioned at [0, 0] and has 100% width and height.
  2. Inside is another div, which is absolute positioned, initially at [0, 0] but this one will move as we drag. Also, everything is inside this one.
  3. You can't use jQuery's Draggable implementation. The thing is, you don't want to drag div number 2 itself, because you would drag it away :-)

So I implemented my own drag-n-drop, which receives events on top div and moves underlying one. Checkout the source code!

0

The easiest way might just be to add a custom map type to a Google Map via the Google Maps API. Have a look at the ImageMapType which might work for you.

1
  • By simple, I mean not only easy to implement, but also lightweight. (Should've written this to question.) Google API is not lightweight at all - and anyway, I'd like to build this from scratch.
    – Vojto
    Aug 21, 2010 at 11:44

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.