How to correctly implement an interactive map?

Question

Web development

Hey!
How to implement a GREAT interactive map?
Well, for example, an interactive map of the shopping center.

• How to place imgon the entire block size?
  
• Svgplace above imgor after?
  

I would like to see well-composed examples.
And read some instructions/documentation.
If you know of links or some other resource that has all the necessary information on interactive maps, then please leave them in your answers.
I would like to know what are the new methods of implementation in 2018.
Thank you very much in advance!

Answer 1

In order for you to be able to select some blocks on your shopping center map, you need to:
1. The map is in svg format, and when drawing it, each separate selected block must be a separate layer, so that it is marked with some kind of code in the code ID and was a separate element.
2. When you insert your SVG map (and it must be inserted with bare code, not with a picture), you will be able to access your elements in svg as a normal DOM, you can hang handlers on these blocks, set them to selection, do generally anything. The most important thing is that the SVG itself should contain all these blocks with their IDs, some data, so that with the help of JS you can safely attach and process them.