Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ekaterinburg-plan

⚠️ Данный просмотрщик реализован в рамках хакатона. Рекомендации как сделать производительный просмотрщик изображений/карт с поддержкой старых браузеров и слабых устройств описаны в разделе «Технологии».

Карта генерального плана Екатеринбурга 2025 — map.genplanekb.city.

Позволяет жителям города познакомиться с изменениями в текущем и будущем генеральных планах Екатеринбурга. Подробная информация о плане и общественных слушаниях доступна на сайте genplanekb.city и на сайте администрации.

image

Возможности

  • Просмотр планов города с zoom и draggable
  • Переключение планов
  • Легенда
  • Управление с клавиатуры
    • Shift + ↑/→/↓/← — Перемещение по карте
    • Ctr +/- — Зум
    • Esc / 0 — Сброс зума
    • Tab — Переключение между элементами управления

Запуск

Выгрузить репозиторий и запустить index.html

Управление

  • Изображения с легендами и планами в папке /images
  • Названия и ссылки на планы и легенды в JS-объекте в файле data.js:
    const PLANS = [
      {
        title: 'Общественный транспорт',
        map: 'plan-public-transport.jpg',
        legend: 'legend-new.jpg'
      }
      ...
    ];

Технологии

  • Ванильные HTML+JS+CSS
  • Просмотр карт через Viewer.js
  • Деплой на Vercel

Рекомендации

Данный проект сделан в рамках хакатона, срок жизни — 1 неделя, до окончания проведения общественных слушаний. Мы подготовили несколько советов, если вам потребуется реализовать подобный просмотрщик:

Изображения

  • Используйте форматы изображений AVIF и WebP вместо PNG и JPG и теги <picture> и <source> для совместимости со старыми браузерами. Подробнее о сжатии, качестве, декодировании/кодировании в статье «Using Modern Image Formats: AVIF And WebP».
  • Чтобы не терять FPS при анимировании больших изображений (к примеру, >1.5 мб, 1500x1500) следует использовать более современный просмотрщик PhotoSwipe вместо Viewer.js. PhotoSwipe использует свойства transform: scale(), translate() вместо width, height, margin, top и других, которые вызывают дополнительные этапы рендеринга — Layout и Paint. Подробнее об этом в статьях «How to create high-performance CSS animations», «Why are some animations slow?» и в таблице CSS Triggers.

Карты

  • Если вы работаете с картой, то разделите её на тайлы — маленькие кусочки. Например, на изображения 256x256 с помощью mapslice (nodejs).
  • Используйте готовые решения с кастомными картами-картинками от Google Maps, Яндекс.Карт и бесплатные — OpenLayers, polymaps, kartograph, PanoJS.

Авторы

About

Просмотр изменений в генплане Екатеринбурга 2025

Topics

Resources

Stars

Watchers

Forks