Map-like ability

Question

Hey beginner here!
I've been trying to make a map-like interface out of an image and i hit a brick wall when it comes to adding zooming in and out properties. I've had some ideas on how to create something like it but it seems like there has to be a better way to do it and i'd like to know if such way exists. Oh i dont want to use any google maps API just to be able to zoom in and out of an image.
Thanks in advnace.
PS: what i thought might work is have an event handler on scroll or on mouse click to scale the image through the css transfom or to change the image with a bigger more detailed one but it feels odd.

Answer 1

Also, do you want a clipping rectangle (so the viewport stays the same)?

Answer 2

Do you want to drag the map around aswell or just zoom?

Answer 3

Yeah you are on the right track then. Here's a minimal example:
https://code.sololearn.com/WoD9DTUmtWwa/?ref=app

You might want to make sure to not scroll the image out of existence and so maybe make zoom_factor have a lower and upper bound or something :)

Answer 4

just zoom in and out and to have the viewpoint stay the same

Answer 5

Thanks a lot i'll study that as much as it gets