Добро пожаловать в проект интерактивной карты кампуса! Этот проект позволяет визуализировать карту кампуса университета с возможностью отображения расписания занятий и других событий.
- Запуск проекта
- Конфигурация проекта
- Создание кастомного источника данных
- Дополнительная информация
- Лицензия
- Docker
- Docker Compose
- Node.js (для разработки)
-
Клонируйте репозиторий:
git clone https://github.com/0niel/map.git cd map
-
Запуск в режиме разработки:
Если вы хотите запустить проект в режиме разработки, выполните следующие команды:
npm run dev # or yarn dev # or pnpm dev # or bun dev
После этого откройте http://localhost:3000 в вашем браузере, чтобы увидеть результат.
-
Запуск с использованием Docker:
Для запуска проекта в Docker-контейнерах:
docker-compose -f docker-compose.yml up -d docker-compose -f docker-compose.traefik.yml up -d
-
Доступ к приложению:
Откройте браузер и перейдите по адресу
http://localhost:3000
для доступа к приложению.
Файл config.ts
содержит базовую конфигурацию приложения. Вот пример содержания:
const config: Config = {
campuses: [
{
shortName: 'Сокол',
description: 'Волоколамское шоссе, 11',
floors: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
initialFloor: 1,
initialScale: 0.2,
}
],
svgMaps: {
Floor1: '/svg-maps/corpus_b_2.svg',
Floor2: '/svg-maps/corpus_b_3_floor_uncodified.svg',
Floor3: '/svg-maps/corpus_b_4_floor.svg',
Floor4: '/svg-maps/corpus_b_5_floor.svg',
Floor5: '/svg-maps/corpus_b_6_floor.svg',
Floor6: '/svg-maps/corpus_b_7_floor_uncodified.svg',
Floor7: '/svg-maps/corpus_b_8_floor.svg',
Floor8: '/svg-maps/corpus_b_9_floor.svg',
Floor9: '/svg-maps/corpus_b_10_floor.svg',
Floor10: '/svg-maps/corpus_b_11_floor.svg',
},
schedule: {
defaultDataSource: 'rosbiotech'
}
}
Каждая строка в объекте svgMaps
указывает путь к SVG-файлу, представляющему карту определенного этажа. Например:
Floor1: '/svg-maps/corpus_b_2.svg'
указывает на карту первого этажа, которая должна находиться в директорииpublic/svg-maps
вашего проекта.
- Создайте карты этажей: Подготовьте SVG-файлы для каждого этажа вашего кампуса.
- Загрузите SVG-файлы в проект: Поместите эти файлы в папку
public/svg-maps
. - Убедитесь, что конфигурация соответствует реальному расположению файлов.
Для маршрутизации и управления SSL используется Traefik. Конфигурация находится в файле docker-compose.traefik.yml
.
Чтобы создать кастомный источник данных для расписания, выполните следующие шаги:
-
Создайте новый класс источника данных:
Пример:
custom-data-sources/your-custom-data-source.ts
.import { DataSource } from '../data-source'; import { LessonSchedulePart } from '../models/lesson-schedule-part'; export class YourCustomDataSource implements DataSource { // Реализуйте методы источника данных }
-
Обновите фабрику источников данных:
В файле
data-source-factory.ts
добавьте ваш новый источник:export const createDataSource = (config: DataSourceConfig): DataSource => { switch (config.type) { case 'local': // ... case 'your_custom_type': const { YourCustomDataSource } = require('./custom-data-sources/your-custom-data-source'); return new YourCustomDataSource(config.endpoint); default: throw new Error('Invalid data source type'); } };
-
Настройте конфигурацию:
Обновите
config.ts
, указав ваш новый тип источника данных:schedule: { defaultDataSource: 'your_custom_type' }
Этот движок используется для создания интерактивных карт кампусов в следующих проектах:
- map.mirea.ru - Интерактивная карта кампуса Российского технологического университета МИРЭА.
- map.rosbiotech.ru - Интерактивная карта кампуса Российского биотехнологического университета.
Этот проект использует Next.js, популярный фреймворк для создания React-приложений.
- Документация Next.js - узнайте больше о функциях и API Next.js.
- Интерактивный учебник по Next.js - научитесь использовать Next.js через интерактивное обучение.
Самый простой способ развернуть ваше Next.js приложение — это использовать Vercel Platform от создателей Next.js.
Ознакомьтесь с документацией по деплою Next.js для получения более подробной информации.
Этот проект лицензирован под GNU GPL v3.