/entrance-task-1-2

Primary LanguageJavaScript

Возникшие проблемы

Решение каждой проблемы вынесено в отдельный коммит, всего найдено было 7 ошибок:

  1. Неправильно импортировалась функция initMap в index.js. Импортировалась как дефолтная, а экспортировалась как именованная. Для решения можно либо исправить импорт на именованный, добавив фигурные скобки, либо изменить экспорт на дефолтный, используя конструкцию export default в map.js. Мне больше по душе именованный импорт (если его везде использовать, то не нужно при каждом написании импорта лезть в документацию/модуль чтоб посмотреть, дефолтный там или нет), поэтому выбрал первый вариант. https://github.com/y-gagar1n/entrance-task-1-2/commit/63f584dbcdcc48c03305d70803c775830f838f88

  2. Для контейнера с картой не задавались размеры, поэтому она рисовалась в контейнере нулевого размера. Нужно было задать размеры в стиле для #map. https://github.com/y-gagar1n/entrance-task-1-2/commit/a9002640b9546c686241807d954d0aa2f8c30d8c

  3. Точки не появлялись на карте. В документации к картам прочел, что все объекты должны быть добавлены в объект карты, а если мы добавляем объекты через ymaps.ObjectManager, то на карту должен быть добавлен он сам. Решилось добавлением строчки myMap.geoObjects.add(objectManager); в конец функции initMap. https://github.com/y-gagar1n/entrance-task-1-2/commit/51fe6ed2fd4fb877746829b03e0882d543966333

  4. В данных были перепутаны местами широта и долгота, поэтому все точки рисовались не в Москве. Можно было в коде логики широте присваивать долготу, а долготе широту, но это выглядит как костыль. Я решил, что надо исправлять корень проблемы и поправил генератор данных (понимаю, что в реальной жизни это не всегда возможно и, бывает, приходится прибегнуть к первому варианту). https://github.com/y-gagar1n/entrance-task-1-2/commit/7e834229525146a11f3a0acdbecd35b13d5ccf4c

  5. Не показывались облачка при нажатии на точки. С этим дольше всего возился, оказалась проблема в том, что в теле шаблона BalloonContentLayout в функциях build и clear используется this и синтакс стрелочки ( => ). Так как в качестве сборщика используется вебпак, то он заворачивает весь код в модуль. Стрелочка подставляет в this контекст родителя. В модуле таким контекстом становится сам модуль. Webpack, чтобы не путать пользователей, отслеживает такие ситуации и сразу подставляет undefined вместо this.

Решение простое: исзбавиться от стрелочек в пользу function(). https://github.com/y-gagar1n/entrance-task-1-2/commit/b4cb9fba2651fd26e2e271066dc6e639ca4ec352

  1. В требованиях было указано, что кластеры с дефектными станциями должны иметь красную иконку, этот код вообще отсутствовал. Пришлось дописать, прочитав документацию. https://github.com/y-gagar1n/entrance-task-1-2/commit/10a06bb3b641d1c89d874ecd57ca3bc5bdfc3d60

  2. Графики в балунах выводились неправильно, потому что неправильно была указана максимальная граница значений - указан 0, а генератор выдавал значения до 9. Исправил максимум на 10. https://github.com/y-gagar1n/entrance-task-1-2/commit/b3b77d79e75b3f2522a51d7cbb59ddb62b84c50b