1

So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).

I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?

Here are some tools I found for scrolling on images.

image zoomer

Wheel zoom

OneTwo
  • 2,291
  • 6
  • 33
  • 55

1 Answers1

2

You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.

Here is a very basic example of what it could look like.

Community
  • 1
  • 1
skirato
  • 763
  • 6
  • 26
  • Thanks that would do it, although it looks quite difficult. I'm wondering if I'd be better off just doing it myself, by zooming the image using a tool and taking the zoomlevel + mouse position and working out the coordinates of the div myself. – OneTwo Mar 04 '15 at 11:17
  • Why not try it out? I honestly think that following such a tutorial would be easier than creating your own zooming functions. Plus you get to discover a cool new library :) – skirato Mar 04 '15 at 11:30
  • 1
    Ah yeah I'll give it a go. – OneTwo Mar 04 '15 at 11:44