Технічне завдання на інтеграцію карт OpenStreetMap на сайт интернет-провайдера, для того щоб перевіряти доступне покриття кліентам і робити перевірку доступной адреси для підключення послуг провайдера.
Мета проекту:
Навчити сайт обробляти адреси по координатах в форматі JSON (GeoJSON); та робити пошук за містом, вулицею та будинком в межах заданого полігона на картах OpenStreetMap сайту. Також потрібно додати можливість обводити полігонами город та розміщувати маркери на мапі (відмічати будинку маркерами)
Технічні вимоги:
Інтеграція карт OpenStreetMap з використанням бібліотеки LeafletJS та Mapbox;
Можливість вставляти полігони в форматі JSON (GeoJSON). приклад: {"type":"Polygon","coordinates":[[[30.819158,50.360416],[30.842974,50.351626],[30.87088,50.349485],[30.881024,50.3649],[30.884682,50.373482],[30.864141,50.377651],[30.858922,50.378602],[30.853791,50.378838],[30.840808,50.380106],[30.825034,50.381646],[30.819158,50.360416]]]} на мапу сайту, та парсити по його координатах: вулиці і будинки що містяться всередені як перелік доступних для пошуку назв вулиць та будинків на сайті;
Можливість розміщувати маркери на мапі, та можливість робити короткий опис маркера у вікні при натисканні на маркер на 140-200 сімволів.
Реалізація кластеризації маркерів при віддаленні мапі;
Можливість здійснювати пошук за містом, вулицею та будинком в межах заданого полігона або по адресам маркерів на мапі сайту.
Нижче наведен приклад реалізації подібного технічног завдання на інтеграцію карт OpenStreetMap з необхідним функціоналом на веб-сайті https://www.lanet.ua/map/ Перед початком інтеграції карт OpenStreetMap необхідно проаналізувати функціонал ппошуку, та вікна опису на сайті https://www.lanet.ua/map/ та приклад №2 https://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
Технічні деталі:
Використання бібліотек LeafletJS та Mapbox для інтеграції карт OpenStreetMap та відображення їх;
Для обводки полігонів використовувати вбудований в LeafletJS клас L.Polygon, а для розміщення маркерів - клас L.marker;
Для кластеризації маркерів на адресах будинків використовувати бібліотеку Leaflet.markercluster;
Для пошуку за містом, вулицею та будинком в межах заданого полігона на мапі використовувати функцію geocode з бібліотеки Mapbox.
Полігони для JSON (GeoJSON) плануєтся віддавати в текстовому форматі (є окрема мапа яка їх генерує)
Наявність бази даних, що містить назви міст, вулиць та будинків для забезпечення функції пошуку на сайті.
Використання серверної сторони на базі Node.js для реалізації функцій парсингу та пошуку.
План реалізації:
Інтегрувати карти OpenStreetMap на сайт з використанням LeafletJS та Mapbox;
Реалізувати можливість виводити полігони на мапі та парсити назву вулиц та будинків по внутрішнім координатам; Необхідно здійснити парсинг переліку назв вулиць та будинків в межах полігону та повернути ці дані у вигляді JSON-об'єкту.
Додати можливість розміщувати маркери на мапі за адресою