Hackathons.Map

Интерактивный виджет для отображения карты России с хакатонами в различных городах. Этот Vue-компонент позволяет отмечать города на карте, показывать информацию о хакатонах и обрабатывать пользовательские взаимодействия.

Установка

npm install hackathons.map

Использование

<script setup lang="ts">
import { ref } from 'vue';
import { HackathonsMap } from 'hackathons.map';
import { ELocation } from 'hackathons.map';

const selectedLocation = ref<ELocation | null>(null);

const locationOptions = {
  [ELocation.MOSCOW]: {
    name: 'Хакатон в Москве',
    description: 'Крупнейший хакатон страны',
    // ... Любая другая инфа о хакатонах в этом городе
  },
  [ELocation.SAINT_PETERSBURG]: {
    name: 'Хакатон в Санкт-Петербурге',
    description: 'Международный хакатон разработчиков',
    // ... Любая другая инфа о хакатонах в этом городе
  },
  // Добавьте другие локации по необходимости
};

const handleLocationChange = (location: ELocation | null) => {
  selectedLocation.value = location;
};
</script>

<template>
  <HackathonsMap
    :selected-location="selectedLocation"
    :location-options="locationOptions"
    @location-change="handleLocationChange"
  >
    <template #tooltip="{ location, locationData }">
      <div>
        <h1>{{ location }}</h1>
        <h2>{{ locationData.name }}</h2>
        <p>{{ locationData.description }}</p>
      </div>
    </template>
  </HackathonsMap>
</template>

API

Props компонента HackathonsMap

| Свойство | Тип | Описание | |----------|-----|----------| | selectedLocation | ELocation \| null | Текущая выбранная локация | | locationOptions | Partial<Record<ELocation, TLocationData>> | Объект с данными о локациях |

События компонента HackathonsMap

| Событие | Тип | Описание | |---------|-----|----------| | location-change | (location: ELocation \| null) => void | Событие при изменении выбранной локации |

Слоты компонента HackathonsMap

| Слот | Параметры | Описание | |------|-----------|----------| | tooltip | { location: ELocation, locationData: TLocationData } | Слот для кастомизации содержимого тултипа |

Перечисление ELocation

Доступные города для размещения на карте:

enum ELocation {
  VLADIVOSTOK = 'VLADIVOSTOK',
  EKATERINBURG = 'EKATERINBURG',
  IRKUTSK = 'IRKUTSK',
  KAZAN = 'KAZAN',
  MOSCOW = 'MOSCOW',
  NOVOSIBIRSK = 'NOVOSIBIRSK',
  OMSK = 'OMSK',
  PERM = 'PERM',
  SAINT_PETERSBURG = 'SAINT_PETERSBURG',
  SARATOV = 'SARATOV',
  SMOLENSK = 'SMOLENSK',
}

Разработка

Проект использует следующие технологии:

• Vue 3
• TypeScript
• Composition API
• Vite

Команды

# Запуск в режиме разработки
npm run dev

# Сборка проекта
npm run build

# Проверка кода линтером
npm run lint

# Предпросмотр сборки
npm run preview

Структура проекта

src/
  ├── components/       # Vue компоненты
  │   ├── HackathonsMap.vue      # Основной компонент карты
  │   ├── LocationPin.vue        # Компонент метки города
  │   ├── MapSvg.vue             # SVG карта России
  │   └── Tooltip.vue            # Компонент всплывающей подсказки
  ├── types/            # TypeScript типы
  │   └── ELocation.ts           # Перечисление локаций
  ├── utils/            # Утилиты
  │   └── coordinatesConverter.ts # Конвертер координат для локаций
  ├── App.vue           # Демонстрационное приложение
  ├── index.ts          # Точка экспорта библиотеки
  └── main.ts           # Точка входа для разработки

Лицензия

MIT