1    ...
             2    // Подключаем библиотеку:
             3    <script src="js/singleMap.js"><script>
             4    ...
             5    ...
             6    // Создаём объект класса SingleMap
             7    // Принимает первым параметром id <canvas> и вторым параметром путь к изображению карты
             8    let singleMap = new SingleMap('canvasId', 'images/maps/background1.png'); 
             9
            10    let mark1 = {id: 1, x: 200, y: 200, title: "Обозначение 1"};
            11    let mark2 = {id: 2, x: 300, y: 300, title: "Обозначение 2"};
            12    
            13    // вызывается, когда карта полностью загрузится
            14    singleMap.addEventListener('maponloaded', function(){
            15        
            16        // Добавим к singleMap новую точку
            17        singleMap.addObjectToMemory(mark1.id, mark1.x, mark1.y, mark1.title);
            18   
            19        // Нарисуем новую точку на карте
            20        singleMap.drawObjectMark(mark1.id);
            21    
            22        // При нажатии на новую точку будет выполняться переход по указанной ссылке
            23        singleMap.bindLinkToObjectMark(mark1.id, `marks_info?id=${mark1.id}`);
            24    });
            25 
            26    // начинаем инициализацию карты (загрузится изображение и вызовутся функции, привязанные к событию "maponloaded")
            27    singleMap.init();
            

Список функций:

• constructor() - конструктор класса SingleMap - базовая инициализация свойств canvas, ctx, objects, routes, eventEmitter, backgroundImagePath
• init() - инициализация свойств карты и вызов 'maponloaded'
• drawBackrground() - рисует карту без обозначений и маршрутов
• parseCoordsToCurrentSizeCoords(x, y) - преобразует координаты к canvas с текущими размерами
• drawCircle(x, y, specialRadius, specialColor) - нарисовать только круг
• drawText(text, x, y, specialColor) - нарисовать только текст
• setCanvasSizeToBackgroundImageSize() - оставить изначальный размер canvas по размеру изображения
• addEventListener(eventName, callback) - добавить callback к событию SingleMap
• addObjectToMemory(id, x, y, title, specialRadius) - добавить объект в память SingleMap
• addRouteToMemory(id, routeImagePath, title) - добавить маршрут в память SingleMap
• getObjectById(id) - получить информацию об объекте по id
• getRouteById(id) - получить информацию о маршруте по id
• bindLinkToObjectMark(id, route) - привязать ссылку к объекту в памяти SingleMap (id объекта в памяти; route: путь - ссылка)
• drawObjectMark(id, specialColor) - нарисовать объект по id (id объекта в памяти; specialColor - если указать особый цвет, то заполнит круг указанным цветом)
• drawRoute(id) - нарисовать маршрут по id (id маршрута в памяти)

Базовые события:

• mapmousemove - движение мыши на карте
• mapclick - нажатие кнопки мыши на карте
• maponloaded - изображение готово к отрисовке, полностью проинициализированно

Список свойств:

• canvas - объект canvas
• ctx - 2d контекст объекта canvas
• objects - множество обозначений объектов
• routes - множество маршрутов
• eventEmitter - для того, чтобы создавать свои события и вызывать события с помощью emit('myEventName')
• backgroundImagePath - путь к изображению (если изменить путь, то для отрисовки нового изображения нужно будет вызвать init())
• backgroundImage - само изображение карты, которое отрисовывет canvas
• originalBackgroundImageWidth - начальная ширина изображения в пикселях
• originalBackgroundImageHeight - начальная высота изображения в пикселях
• resultBackgroundImageWidth - итоговая ширина изображения в пикселях с учетом размера экрана
• resultBackgroundImageHeight - итоговая высота изображения в пикселях с учетом размера экрана
• circleRadius - радиус круга обозначения объекта на карте
• originalFontSize - размер шрифта подписей к обозначениям на карте