Interactive map on the site. How to deal with coordinates?

Question

JavaScript

It is necessary to implement an interactive map of Russia on the site, where regions would be highlighted, regional centers indicated by dots, and federal highways would be drawn.
Quickly, I implemented all this using SVG and the Raphael.js library. I drew each region manually in the Inkscape program, having previously loaded an image of a map of the regions of Russia there. Then I realized that if I need to add some point or object, I still need to take the coordinates of this point from the program. And I would like to have the opportunity to see the coordinates of any point in Yandex maps, Google maps and draw them on your map without any problems.
And so the question is - how to draw SVG maps, but in a longitude and latitude coordinate grid, so that adding a point (longitude and latitude) on my map corresponds to the real location.
Please do not offer me Yandex. I don't have 120,000 a year. OpenStreetMap won't work either. I'm specifically interested in the issue related to SVG.

Answer 1

You can move and scale your entire map in SVG in a graphics editor so that it is, roughly speaking, not from 0 to 100 (or whatever you have there) horizontally, but from 19 to 169 (seemingly, not strong in geography) . And move it vertically. And proceed from the considerations that the X / Y coordinates in SVG are literally equal to our usual coordinates in latitude and longitude. East and north - plus, west and south - minus. And moving on the screen and scaling can be done using the viewbox attribute, changing it along the way. If you're drawing by hand, you can get 1/4 degree accuracy this way without mental effort, just by imagining a clock face (0'/15'/30'/45' -> 0/.25/.50/.75), like this that I think that for your tasks, where accuracy is not so important, this is quite suitable.