How to make an area with an image like Yandex maps for a tablet?

Question

css

In general, like this ... I'll try to explain what you need ...

There is an area like in Yandex maps, you can name a container, the size of which can be set arbitrary, by default the size will be the size of a tablet screen.
In this area there is a picture at the beginning of the size of the area.
This picture can be enlarged by zooming with two fingers. And move to the side.
1. How to make it so that you can enlarge the picture and move it?

After the picture is enlarged to the maximum zoom, buttons should appear on it and some contours will be highlighted in green, which you can click on to go to the next page.

2. How to do this?

It is important for me to see an example and understand what technologies this is done with.
The fact that the buttons are placed using absolute positioning is what I understand, but how to highlight the area? etc.
And it's not clear, in my case, absolute positioning is acceptable, or is it somehow drawn with the help of a canvas?

Answer 1

Yandex / Google has its own solution.
2GIS uses leafletjs.com which is great for you too.