Створення та відображення маршрутів на карті
1. Мета проєкту
Створити зручну систему для збереження, редагування і візуалізації маршрутів, що використовуються кількома користувачами. Забезпечити швидкий доступ до інформації про маршрути та наочне відображення на карті для ефективного планування й аналізу.
2. Основні компоненти
Google Таблиці як база даних:
Зберігаються всі маршрути з унікальним кодом, датою створення, назвою підприємства та підрозділу, типом маршруту (Основний, Альтернативний тощо), приналежністю (Поле-Склад, Склад-Склад).Форма додавання/редагування:
Зручний інтерфейс для користувачів з випадаючими списками для швидкого вибору підприємства, підрозділу, типу та приналежності маршруту. Автоматичне створення унікального коду маршруту при додаванні нового запису.Дані маршруту:
Фіксуються точки початку та кінця маршруту, перелік проміжних населених пунктів або координат, загальний кілометраж.
3. Візуалізація карти
Leaflet.js — opensource бібліотека для створення інтерактивних карт, що підтримує багатофункціональні шари і маркери.
OpenStreetMap — безкоштовна підкладка карти, яка не вимагає ключів API чи обмежень, що робить проєкт незалежним від платних сервісів.
Відображення маршруту:
На карті показуються маркери початку, кінця та всіх проміжних точок маршруту, а також лінія, що з’єднує ці точки у правильному порядку.Проблеми:
Поточна складність — стабільний вибір і відображення окремого маршруту серед кількох на карті. Потрібно доопрацювати механізм фільтрації та оновлення візуалізації.
4. Технічні деталі
Google Apps Script:
Обробка логіки взаємодії з Google Таблицями, отримання, додавання та оновлення даних маршрутів через скрипти, інтегровані в веб-інтерфейс.JavaScript + Leaflet.js:
Реалізація карти у веб-інтерфейсі, обробка подій користувача (вибір маршруту, оновлення карти), побудова маршрутів по координатах.Багатокористувацькість:
Система враховує можливість одночасної роботи кількох користувачів із захистом даних і синхронізацією змін.
5. Поточний стан проєкту - але можливі покращення
Повноцінно працює база в Google Таблицях із формою для додавання/редагування маршрутів - можливі пропозиції до покарщення
Карта на Leaflet.js коректно завантажується із підкладкою OpenStreetMap.
Відображення маршрутів на карті не реалізовано.
6. Наступні завдання
Впровадити чіткий інтерфейс вибору маршруту, який би дозволяв:
Обирати маршрут із списку або через фільтри (підприємство, тип, приналежність).
При виборі оновлювати карту, очищати попередні шари, відображати тільки обраний маршрут з усіма точками.
Можливо є можливість додати при заповненні форми при створенні маршруту, де потрібно внести в ручну координати точки, їх внесення через кліком по карті
Оптимізувати роботу з проміжними точками:
Автоматично будувати лінію маршруту (Polyline) в правильному порядку.
Додати індикацію завантаження/помилок при роботі з картою.
-
Здравствуйте
Я розробник у сфері ML/DL та Web Dev | Веб-скрапінг. Готовий виконати Ваш проект. Напишіть мені, обговоримо.
-
315 доброго дня, Олександр.
Маю рішення на рівні MVP, можу зробити демонстрацію та доопрацювати під ваші заявлені потреби. Спеціалізуюся на розробці та впровадженні IoT пристроїв, GPS і створення програмного забезпечення Low-code та no-code.
-
949 10 1 1 Вітаю.
Можу реалізувати завдання. Є досвід у подібному. Терміни та вартість орієнтовні — потрібно обговорити деталі.
Пишіть, зроблю все швидко і якісно.
-
375 3 1 Вітаю! Я вже 6 років займаюся подібними задачами і за цей час реалізував понад 400 проєктів різної складності. Робота з картами, API та інтерактивною візуалізацією даних (саме як у вас — Leaflet та Google Sheets) — це моя ключова експертиза.
Я бачу, що основа у вас вже є, а головна задача зараз — "оживити" карту і зробити її інтерактивною.
Як я бачу план роботи:
1. Зв'язок даних та карти: Спочатку реалізуємо базове відображення одного, будь-якого, маршруту з вашої Google Таблиці, щоб налагодити передачу даних.
2. Інтерфейс вибору: Створюємо фільтри (випадаючі списки), які будуть динамічно завантажувати назви доступних маршрутів.
3. Інтерактивність: Пишемо логіку, яка при виборі маршруту у фільтрі очищує карту та малює новий (маркери + лінія).
… 4. Покращення: Додаємо індикатори завантаження, щоб користувач розумів, що дані підтягуються, та реалізуємо згадану вами функцію додавання координат по кліку.
Щодо оцінки:
По термінах: Реалізація всієї логіки відображення та інтерактивності зазвичай займає 4-5 робочих днів.
По вартості: Вилка цін на такий обсяг завдань — в районі 15к грн
До речі, коли будемо будувати лінію маршруту, ми можемо не просто з'єднувати точки прямою, а прокладати маршрут по реальних дорогах. Це дасть більш точний кілометраж та реалістичну візуалізацію.
Пропоную короткий технічний дзвінок на 15-20 хвилин. Ми могли б обговорити архітектуру взаємодії скриптів та логіку роботи фільтрів. Так я зможу надати вам точну оцінку і ми визначимо найкращий шлях реалізації)
-
2382 36 3 Доброго дня, недавно розробляв схожу річ для сайту перевезень, маю досвід у розробці таких рішень і без проблем зможу допомогти вам в розробці такої карти з маршрутами, зроблю все під ключ, звертайтесь!
Артем
-
55654 1029 1 10 Вітаю. Є великий досвід в розробці сайтів. Готовий до співпраці
-
1299 7 0 Добрий день!
Маю досвід роботи з Leaflet.js, зокрема в побудові різних форм на карті — реалізовував відображення зон зареєстрованих користувачів, чатів та функціонал пошуку по карті. Працював також з елементами на кшталт Polyline.
Можу реалізувати весь необхідний інтерфейс згідно з вимогами.
Напишіть, обговоримо деталі — буду радий співпраці!
-
2745 59 0 Доброго дня!
Цікавий проект.
Зможу допомогти в побудові полігонів, реалізувати інтерфейс
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Розробка сайту з продажу квитків для подій у НімеччиніПотрібно створити багатосторінковий сайт з продажу квитків на події у Німеччині. Користувачі зможуть обрати івент у своєму місті, купити квиток онлайн (оплата: Apple Pay, Google Pay, IBAN, кредитна карта). Сайт має включати: Особистий кабінет користувача (реєстрація, статус… Javascript та Typescript, Веб-програмування ∙ 18 годин 34 хвилини тому ∙ 20 ставок |
Робота з API Твіттер
22 780 UAH
Шукаємо розробника, який працював з API Твіттер. Завдання: написання скрипта бота, парсер. Також шукаємо для BlueSky Деталі в особистих повідомленнях Javascript та Typescript, Парсинг даних ∙ 18 годин 40 хвилин тому ∙ 11 ставок |
Потрібен Веб розробник з гарним розумінням Wordpress
5000 UAH
1.Зробити правки по розміщенню елементів сайта який вже є nexterasolutions.space 2. Додати нову сторінку по дизайну 3. Перенести на новий домен HTML та CSS верстання, Javascript та Typescript ∙ 1 день 2 години тому ∙ 34 ставки |
Потрібно поставити ленд на хост + налаштувати бекенд. Node.js. Google SheetsВсе даю . сервер + апи ключі таблиць Добрий. Потрібно налаштувати backend на Node.js з підключенням Google Sheets для запису даних із форми. Ціна і термін Javascript та Typescript, Веб-програмування ∙ 1 день 20 годин тому ∙ 17 ставок |
Анімація сторінки за допомогою GSAPРозшукується верстальник, який має хороший досвід роботи з бібліотекою GSAP. Необхідно буде реалізувати анімації як на цьому відео - https://yelpix.notion.site/Animation-232846a8f72b80f5bbf2daa66faf3312?source=copy_link Це відео не приклад, це і є технічне завдання, саме такі… HTML та CSS верстання, Javascript та Typescript ∙ 1 день 21 година тому ∙ 2 ставки |