CODEWITHSUNDEEP
javascriptcss
Vojto
Vojto

Reputation: 6959

How to implement a map in JavaScript?

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.

Upvotes: 1

Views: 508

Answers (3)

Vojto
Vojto

Reputation: 6959

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!

Upvotes: 1

pablochan
pablochan

Reputation: 5715

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.

Upvotes: 1

stefanw
stefanw

Reputation: 10570

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.

Upvotes: 0

Related Questions