{"id":24517566,"url":"https://github.com/iamrosada/leaflet-react-ts","last_synced_at":"2026-04-17T08:03:38.006Z","repository":{"id":184532773,"uuid":"672057502","full_name":"iamrosada/Leaflet-react-ts","owner":"iamrosada","description":"Приложение \"Маршруты на карте\" является веб-приложением, которое позволяет пользователям просматривать список маршрутов в виде таблицы и визуализировать выбранный маршрут на карте с помощью полилиний и маркеров. Для реализации использованы библиотеки React, Leaflet,Redux и Ant Design.","archived":false,"fork":false,"pushed_at":"2023-07-28T20:51:17.000Z","size":12480,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T11:34:09.787Z","etag":null,"topics":["leaflet","leaflet-map","react","redux","redux-saga","redux-toolkit","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamrosada.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-28T20:05:29.000Z","updated_at":"2024-03-26T14:22:48.000Z","dependencies_parsed_at":"2023-07-28T21:46:42.619Z","dependency_job_id":null,"html_url":"https://github.com/iamrosada/Leaflet-react-ts","commit_stats":null,"previous_names":["iamrosada/leaflet-react-ts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/iamrosada/Leaflet-react-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamrosada%2FLeaflet-react-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamrosada%2FLeaflet-react-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamrosada%2FLeaflet-react-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamrosada%2FLeaflet-react-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamrosada","download_url":"https://codeload.github.com/iamrosada/Leaflet-react-ts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamrosada%2FLeaflet-react-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019077,"owners_count":26086516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet","leaflet-map","react","redux","redux-saga","redux-toolkit","typescript"],"created_at":"2025-01-22T01:34:27.664Z","updated_at":"2025-10-14T11:34:59.688Z","avatar_url":"https://github.com/iamrosada.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Приложение \"Маршруты на карте\"\n\nПриложение \"Маршруты на карте\" является веб-приложением, которое позволяет пользователям просматривать список маршрутов в виде таблицы и визуализировать выбранный маршрут на карте с помощью полилиний и маркеров. Для реализации использованы библиотеки React, Leaflet,Redux и Ant Design.\n\n## Особенности\n\n- Отображение таблицы со списком маршрутов на левой стороне экрана.\n- Отображение карты на правой стороне экрана с использованием Leaflet для визуализации выбранного маршрута с помощью полилиний и маркеров.\n- Автоматическое центрирование и масштабирование карты для обзора всего маршрута при выборе маршрута в таблице.\n- Получение и отображение полилиний для выбранных маршрутов с использованием API OSRM (Open Source Routing Machine).\n\n## Установка\n\n1. Клонируйте репозиторий:\n\n```bash\ngit clone https://github.com/iamrosada/Leaflet-react-ts.git\ncd Leaflet-react-ts\n```\n\n2. Установите зависимости:\n\n```bash\nnpm install\n```\n\n3. Запустите сервер разработки:\n\n```bash\nnpm run dev\n```\n\nПриложение должно быть доступно по адресу ` http://localhost:5173/`.\n\n## Использование\n\n1. После запуска приложения на экране отобразится таблица с доступными маршрутами на левой стороне.\n\n2. Щелкните по строке в таблице, чтобы выбрать маршрут. Выбранный маршрут будет подсвечен, и на карте справа будет отображаться соответствующий маршрут с полилиниями и маркерами.\n\n3. Карта автоматически центрируется и масштабируется, чтобы вместить весь маршрут в видимой области.\n\n4. Для просмотра другого маршрута просто выберите другую строку в таблице, и карта будет обновлена соответствующим образом.\n\n\n\nВы можете настраивать список маршрутов, обновляя массив `routePoints` с вашими данными о маршрутах.\n## API-точка\n\nПриложение использует API OSRM для получения полилиний каждого маршрута. API-точка находится по адресу `http://router.project-osrm.org`. \n## Структура папок\n\n- `src/components`: Содержит компоненты React, используемые в приложении.\n- `src/reducers`: Содержит редьюсеры Redux для управления состоянием.\n- `src/sagas`: Содержит Redux Sagas для обработки асинхронных действий.\n- `src/services`: Содержит HTTP-сервис для общения с API OSRM.\n- `src/store.js`: Конфигурирует хранилище Redux с промежуточным ПО.\n- `src/App.js`: Основной компонент, который отображает таблицу маршрутов и карту.\n- `src/index.js`: Точка входа в приложение.\n\n## Используемые технологии\n\nПриложение \"Маршруты на карте\" создано с использованием следующих библиотек с открытым исходным кодом:\n\n- React - Библиотека JavaScript для создания пользовательских интерфейсов.\n- Leaflet - Библиотека JavaScript с открытым исходным кодом для интерактивных карт.\n- Ant Design - Набор высококачественных компонентов React.\n- TypeScript - Язык программирования TypeScript, добавляющий статическую типизацию к JavaScript.\n- Redux (с помощью Redux Toolkit): Для управления состоянием и обработки данных между компонентами.\n- Redux Saga: Для обработки асинхронных действий, особенно вызовов API.\n- Axios: Для выполнения HTTP-запросов к API OSRM.\n- SASS: Препроцессор языка стилей для оформления.\n\n![Alt text](image.png)\n\n\u003cvideo src=\"20230728-2048-20.9599536.mp4\" controls title=\"Title\"\u003e\u003c/video\u003e\n## Лицензия\n\nЭтот проект лицензирован в соответствии с лицензией MIT - см. файл [LICENSE](LICENSE) для получения дополнительных сведений.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamrosada%2Fleaflet-react-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamrosada%2Fleaflet-react-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamrosada%2Fleaflet-react-ts/lists"}