How can you create your own interactive map?

Question

JavaScript

It is necessary to implement an interactive map.

Never encountered such a problem.
With the help of Google, I realized what is being done with the help of svg graphics.
The gag here is that I don’t understand how to process the effect when hovering over the area (specifically, here, paint over the circle and display a hint with the name of the city), and I don’t know how to handle the click so that the information panel appears (screen 3).

How can this be implemented?

Answer 1

Why svg?
Put the map in the background,
start a table in the database in which you will store markers, indicating the coordinates on the map and other useful information.
Loop over background (position absolute). Change the style of the circle on hover
via css hover Process
the click via jquery click

Answer 2

So SVG reacts in the same way to hover and clicks. On click, it's easier to show divs, it's not very convenient to display text in svg.
Open Layers/Leaflef/clip-mask -- not needed.

Answer 3

Well, offhand, you can make many layers (as many as there are regions on the map), put a clip-mask on them and handle the click on each individual layer accordingly. There already name them as you like, add IDs/classes, etc.

Answer 4

Open Layers for example. Or Leaflets .

Answer 5

Raphael.js (there are even examples)

Answer 6

Used leaflet.js for similar tasks. The described functionality is already there, the API is very simple and understandable, well documented. Why invent bicycles when competent people have already made a decision? The only thing you need to do:
- Write a function or REST API that returns the data for the pop-up
- Write a function that returns the HTML for that pop-up.