Warning при запуске сервера. Обращаем внимание на ворнинг, следовательно неправильное подключение модуля. Добавляем скобки {} в соответсвии со стандартом подключения модулей. Сервер запустился, в консоли видим init
Так как нет знакомства с API карт, открываем первую страницу документации.
Создание контейнера с заданной шириной и высотой.
В коде проекта исходной высоты нет, по умолчанию div занимает всю ширину.
Добавляем height: 100% для контейнера карты
За отрисовку меток на карте отвечает ObjectManager. В api.js есть метод fetch, который выполняет запрос к /api/labels. Проверяем в браузере, лэйблы возвращаются, все ок. Но к ObjectManager они добавляются в виде объекта, а должны в виде строки JSON.
Далее все-равно ничего. Смотрим пример добавления кода.
Отсутствует метод myMap.geoObjects.add(objectManager)
Добавляем. Точки на карте появились. В Иране. Не позавидуешь инженеру.
Уменьшаем зум, для удобства
Отлично! Кластеры, точки отображаются. Теперь начинаем работать с отображением самих станций. Не работает: цвет, popup. Но по порядку. Начнем с цвета. Нужно показывать точки разным цветом, в зависимости от состояния станции, которое задается свойством isActive. Цветная иконка точки задается свойством preset. Свойства точек в GeoObject, задаются в поле options. Поэтому в функции mapServerData, перемещаем вызов функции getObjectPreset в поле preset в option. Заодно поменяем iconCaption в properties на id. Так они занимают меньше места.
Точки есть, разным цветом. Но не работает балун.
Потыкав обработку событий понимаем, что там все верно,
кроме места вызова метода открытия балуна, который должен срабатывать после подкачки
данных. Во-первых, перемещаем вызов метода
objectManager.objects.balloon.open(objectId);
в обработчик успешного выполенения промиса loadDetails.
В обработчике событий теперь все верно => проблема в отображении балуна.
А отображение балуна задается в объявлении ObjectManager
с помощью templateLayoutFactory. Первый аргумент конструктора – шаблон.
Второй – переопределение стандартных методов класса
layout.templateBased.Base: build(), который строит экземпляр на основе шаблона и
добавляет его в html и clear(), который удаляет содержимое из html.
Эти методы переопределены с помощью функций стрелок, внутри которых this – тот же,
что и снаружи. А для начала мы должны вызвать непереопределенный build()
класса layout.templateBased.Base с текущим шаблоном и явным указанием
this(чтобы получить текущий шаблон). Поэтому заменим функции скобки на обычное
определение функции build: function() {}.
Балун отображается! Но нет графика.
Смотрим документацию ChartJS. Определение данных, лэйблы, все верно.
Но, у основной оси задан параметр max:0.
Данные больше 0, убираем параметр, работает!
Балуны есть, фильтр работает.
Но кластер не отображает того, что внутри него есть сломанные вышки.
Смотрим документацию.
Для того, чтобы кластер отображался в виде диаграммы достаточно
добавить clusterIconLayout: 'default#pieChart' при создании objectManager.
Этот пункт есть. Но после создания objectManager идет установка preset для кластера,
которая идет в приоритете при отображении кластера.
Убираем и вуаля! Все работает как надо.