Фронтенд для будущего сайта о самых интересных местах в Москве. Авторский проект Артёма.

Демка сайта.

• Скачайте код
• Перейдите в каталог проекта с файлом index.html
• Запустите веб-сервер
• Откройте в браузере

В качестве веб-сервера можно использовать что угодно. Например, подойдёт даже самый простой встроенный в Python веб-сервер:

$ python -m http.server 8000

Внизу справа на странице можно включить отладочный режим логгирования.

Настройки сохраняются в Local Storage браузера и не пропадают после обновления страницы. Чтобы сбросить настройки удалите ключи из Local Storage с помощью Chrome Dev Tools —> Вкладка Application —> Local Storage.

Если что-то работает не так, как ожидалось, то начните с включения отладочного режима логгирования.

Фронтенд получает данные из двух источников. Первый источник — это JSON, запечённый внутрь HTML. Он содержит полный список объектов на карте. И он прячется внутри тега script:

<script id="places-geojson" type="application/json">
  {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [37.62, 55.793676]
        },
        "properties": {
          // Специфичные для этого сайта данные
          "title": "Легенды Москвы",
          "placeId": "moscow_legends",
          "detailsUrl": "./places/moscow_legends.json"
        }
      },
      // ...
    ]
  }
</script>

При загрузке страницы JS код ищет тег с id places-geojson, считывает содержимое и помещает все объекты на карту.

Данные записаны в формате GeoJSON. Все поля здесь стандартные, кроме properties. Внутри properties лежат специфичные для проекта данные:

• title — название локации
• placeId — уникальный идентификатор локации, строка или число
• detailsUrl — адрес для скачивания доп. сведений о локации в JSON формате

Значение поля placeId может быть либо строкой, либо числом. Само значение не играет большой роли, важна лишь чтобы оно было уникальным. Фронтенд использует placeId чтобы избавиться от дубликатов — если у двух локаций одинаковый placeId, то значит это одно и то же место.

Второй источник данных — это те самые адреса в поле detailsUrl c подробными сведениями о локации. Каждый раз, когда пользователь выбирает локацию на карте JS код отправляет запрос на сервер и получает картинки, текст и прочую информацию об объекте. Формат ответа сервера такой:

{
    "title": "Экскурсионный проект «Крыши24.рф»",
    "imgs": [
        "https://kudago.com/media/images/place/d0/f6/d0f665a80d1d8d110826ba797569df02.jpg",
        "https://kudago.com/media/images/place/66/23/6623e6c8e93727c9b0bb198972d9e9fa.jpg",
        "https://kudago.com/media/images/place/64/82/64827b20010de8430bfc4fb14e786c19.jpg",
    ],
    "description_short": "Хотите увидеть Москву с высоты птичьего полёта?",
    "description_long": "<p>Проект «Крыши24.рф» проводит экскурсии ...</p>",
    "coordinates": {
        "lat": 55.753676,
        "lng": 37.64
    }
}

• Leaflet — отрисовка карты
• loglevel для логгирования
• Bootstrap — CSS библиотека
• Vue.js — реактивные шаблоны на фронтенде

Код написан в учебных целях — это урок в курсе по Python и веб-разработке на сайте Devman.

Тестовые данные взяты с сайта KudaGo.