GeoTextMapper

Внутрішній PoC для перетворення тексту з геопосиланнями у GeoJSON та автоматичну візуалізацію на карті

🎯 Мета

Автоматично розпізнавати Google Maps short/long links, витягувати name+coordinates, нормалізувати у GeoJSON та повертати готовий набір для візуалізації/аналізу маршрутів.

🏗 Стек

• Frontend: React + Vite + Leaflet (react-leaflet) АБО чистий HTML+JS
• Backend: Node.js + TypeScript
• Fallback геокодер: Nominatim (з жорстким throttling та локальним кешем)

🚀 Швидкий старт

🌐 Вариант 1: Вебсайт (без встановлення)

Просто відкрийте файл у браузері:

# Клонувати репозиторій
cd GeoTextMapper

# Відкрити web/index.html у браузері
open web/index.html
# АБО на Windows:
start web/index.html
# АБО на Linux:
xdg-open web/index.html

АБО запустити локальний сервер:

cd web
python server.py
# Відкрити http://localhost:8000

💻 Вариант 2: React + Vite (для розробки)

# Клонувати репозиторій
cd GeoTextMapper

# Встановити всі залежності
npm run install:all

# Або встановити окремо
cd backend && npm install
cd ../frontend && npm install

Обробка даних

# Запустити обробку посилань (генерує data/resolved.geojson)
cd backend
npm run resolve

# АБО використати фіксовану версію для конкретних даних
node resolve_fixed.js

Запуск frontend (React)

cd frontend
npm run dev

Відкрити http://localhost:3000 у браузері.

📁 Структура проєкту

GeoTextMapper/
├── backend/
│   ├── resolve.js          # Основний скрипт обробки
│   ├── resolve_fixed.js    # Фіксована версія для конкретних даних
│   └── package.json
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.jsx         # Головний компонент карти
│   │   ├── main.jsx        # Точка входу
│   │   └── index.css       # Стилі (темна військова тема)
│   ├── vite.config.js
│   └── package.json
├── web/                    # 🌐 Статичний вебсайт (працює без встановлення)
│   ├── index.html          # Головна сторінка
│   ├── data/
│   │   └── resolved.geojson # Дані точок
│   ├── server.py           # Локальний сервер для тестування
│   └── .htaccess           # Конфігурація для Apache
├── data/
│   └── resolved.geojson    # Згенерований GeoJSON
├── package.json
└── README.md

📊 Формат виводу

GeoJSON FeatureCollection з properties:

• name - Назва точки
• sourceUrl - Оригінальне посилання
• resolvedUrl - Розширене посилання
• provider - Провайдер (google_maps, nominatim)
• method - Метод витягу (regex, redirect, html, geocode, manual)
• timestamp - Час обробки
• originalText - Оригінальний текст

🌐 Вебверсія (web/)

Повністю статичний вебсайт, який працює без встановлення:

Особливості:

• ✅ Працює у будь-якому сучасному браузері (Chrome, Firefox, Safari, Edge)
• ✅ Адаптивний дизайн - автоматично підлаштовується під будь-який розмір екрана
• ✅ Мобільний-перший - оптимізовано для смартфонів
• ✅ Офлайн-робота - дані завантажуються локально
• ✅ Швидке завантаження - всі ресурси з CDN

Технології:

• HTML5 + CSS3 (Flexbox, Grid)
• Vanilla JavaScript (ES6+)
• Leaflet.js (картова бібліотека)
• GeoJSON (формат даних)

Переваги:

• ❌ Не потрібно Node.js
• ❌ Не потрібно npm
• ❌ Не потрібно збірка
• ✅ Просто відкрити index.html у браузері

🚀 Розгортання

Локально

# Відкрити безпосередньо у браузері
open web/index.html

# АБО запустити локальний сервер
cd web
python server.py
# Відкрити http://localhost:8000

На вебсервері (Apache/Nginx)

1. Apache: Скопіюйте вміст папки web/ у ваш веб-корінь
2. Nginx: Налаштуйте сервер для обслуговування статичних файлів
3. GitHub Pages: Завантажте папку web/ у репозиторій

На мобільних пристроях

• Просто відкрити web/index.html у браузері
• Додати на екран дому (PWA-сумісно)
• Працює на iOS (Safari) та Android (Chrome)

📱 Адаптивність

Підтримувані пристрої:

• Мобільні: iPhone (всі моделі), Android смартфони
• Планшети: iPad, Android планшети
• Ноутбуки: 13" - 17" екрани
• Десктопи: 1920x1080 та вище

Адаптації:

• Мобільний вигляд: Компактні кнопки, вертикальне розташування
• Планшетний вигляд: Збільшені маркери, краще використання простору
• Десктопний вигляд: Повний інтерфейс з усіма функціями

Тестування адаптивності:

• Chrome DevTools → Toggle Device Toolbar
• Firefox Responsive Design Mode
• Safari Develop → Enter Responsive Design Mode

🎨 UX

• Темна «мілітарі» тема з high-contrast
• Мобільний-перший дизайн (iPhone XR, Android)
• Карта з темними тайлами (Carto Dark Matter)
• Маркери контрольних точок з попапами
• Панель статистики в реальному часі

🔧 Конфігурація

Backend

• Cache TTL: 24 години
• Nominatim URL: https://nominatim.openstreetmap.org/search
• Rate limiting: 1 запит/секунда для Nominatim

Frontend

• Порт: 3000 (для React версії)
• Центр карти за замовчуванням: Рівне (50.6197, 26.2514)
• Рівень масштабу: 13

📝 Приклад даних

const inputTexts = [
  "1) Марчук Шухевича від вокзалу https://maps.app.goo.gl/FkJXbQ6Bn1P5km59A",
  "2) Гончук Богоявленська укрнафта",
  "3) Санніков Шухевича до вокзалу https://goo.gl/maps/pTwbqmrGYDkhhQna8",
  "4) Носко У Самчука від Грушевського https://goo.gl/maps/ofSJd4Z3EkuggGdR8",
  "5) Кравчук Мельника https://goo.gl/maps/SAQnd6Bgyi3GCZQw9",
  "6) Морозюк Фабрична https://maps.app.goo.gl/3emkBVdW3Y4bcp5r7",
  "7) Кібиш В. Червонія від чайкм https://maps.app.goo.gl/L8xSr7ntmV84YNiJ9",
  "8) Яцюк Степова https://maps.app.goo.gl/mTSf5unLixx9uTR27"
];

⚠️ Обмеження

• FOR INTERNAL USE ONLY - Proprietary
• Не логувати персональні дані публічно
• Зберігати мінімальні метадані
• Використовувати офіційні API лише при наявності ключів

🔒 Конфіденційність

• Не вставляти секрети/API-ключі у код
• Не виконувати небезпечних дій
• Не поширювати дані поза внутрішніми правилами

---

Owner: MixaJuba/GeoTextMapper (Internal)