How to make a similar map with areas and pictures?

Question

JavaScript

Map here https://1za100.ru/ then click on the link "Select a site".

As I understand these areas are polygons, in the admin panel you just need to correctly create areas using this https://tech.yandex.ru/maps/jsbox/2.0/polygonEditor and, upon completion, save the coordinates somewhere (to a database or file) and bind to a certain area. But the question is how to create many polygons and how to add your own pictures and inscriptions to the map?

Answer 1

I think that here you can’t do without dancing with a tambourine) In the sense it won’t be easy and simple ...
I don’t remember what it’s called, but Yandex has a function that converts the position relative to the map in pixels into geo-coordinates. (To better understand how it works, start digging from this topic: https://toster.ru/q/316143) - I did this thing a long time ago and now I forgot how it all works exactly.
It turns out that for downloading you will need to run the map, put a mask on top (in svg for example), calculate the coordinates of all points, transfer to Yandex, get geo-coordinates that can be used for Yandex Polygon. Save and rejoice)
Forgive me for being blurry and superficial. If you want, you can write to me in a personal: https://vk.com/petrov___aleksandr,I'll raise my code, remember which method is responsible for the conversion.

Answer 2

Once I did it with only one area, but there is still a lot to do with different colors
here Link

Answer 3

I would solve this with https://leafletjs.com/
You can add a map to the admin panel and draw polygons right there, it's better to save it in GeoJSON format
You can find answers to these questions in the leaflet documentation.

Answer 4

It's simple, 3 layers that we observe:

Цветные полигоны учасков в geojson
------------------------------------
Гео привязанная картинка с домиками и надписями
------------------------------------
Спутниковая подложка