Crearea a doua harti interactive cu leaflet.js
Budget: €250 – €750 EUR
Se doreste crearea a doua pagini web cu harti, bazate pe leaflet.js, care sa arate cu nivele de culoare (choropleth map) valoarea totala a proiectelor pe unitatea administrativa respectiva:
- Prima harta va arata informatia pe judete ale Romaniei.
- Cea de-a doua harta va arata informatia la nivel de unitate administrativ-teritoriala (similar cu aceasta pagina: https://expertforum.ro/harta-proiecte-saligny/)
Cele doua seturi de date sunt independente (unele proiecte sunt la nivel de judet, altele sunt la nivel de UAT).
Hartile vor avea urmatoarele functionalitati:
- Datele despre proiecte vor fi citite la incarcarea paginii dintr-un fisier csv aflat pe server. Totalul pe judet / UAT va fi calculat dinamic la incarcare. Fisierul CSV va avea cel putin coloanele: cod judet/UAT, cod proiect, tip proiect, descriere, valoare (numar intreg)
- Paginile vor avea un top header fix cu meniu (Acasa, Harta opusa, Contact)
- Se va afisa o legenda intr-unul din colturi privind semnificatia culorilor (valoare minima, valoare maxima)
- Se va afisa un titlu intr-unul din colturi
- Se vor afisa informatiile copyring specifice openstreet map / leaflet.js / alte site-uri daca e necesar
- La alegerea unui obiect de pe harta (judet /UAT) pagina va afisa o fereastra pop-up cu lista proiectelor din obiectul respectiv, cu detalii despre proiect (cod proiect / tip / descriere / valoare)
- In dreptul fiecarui proiect va fi afisat un link/buton cu mesajul “Adopta un proiect”. Butonul va afisa o alta fereastra pop-ul cu un mesaj si ii va cere utilizatorului sa-si dea adresa de e-mail
- La indicarea unei adrese de mail, pagina va verifica ca adesa de mail este valida si va da un mesaj de eroare in caz contrar. Apoi va apela prin ajax un serviciu care va adauga adresa de mail si detaliile proiectului intr-un fisier csv pe server
- Ferestrele pop-up si intreaga pagina vor avea un aspect modern si finisat. Aspectele UI/UX vor fi luate in considerare
- Pagina trebuie sa functioneze corespunzator atat pe PC cat si pe dispozitive mobile
Cerinte tehnice
- Paginile vor fi realizate folosind doar html / css / javascript (cu exceptia handler-ului pentru stocarea adreselor de mail care va fi in php)
- Se vor folosi librariile javascript: jquery, leaflet.js, papaparse (pentru citire din csv). Se va evita pe cat posibil folosirea altor librarii. Nu este admisa folosirea de librarii care prin licenta nu pot fi folosite gratuit si fara atribuire.
- Codul va trebui sa se bazeze pe denumirile coloanelor din csv, nu pe pozitia lor in fisier (ex. valoarea va fi calculata pe baza coloanei cu numele „Valoare”, nu pe baza coloanei a 3-a)
- Codul javascript va fi clar, concis, folosind standardele curente de dezvoltare (coding standards). Codul va fi extensibil, permitand extensia si modificarea ulterioara.
- Prima harta va arata informatia pe judete ale Romaniei.
- Cea de-a doua harta va arata informatia la nivel de unitate administrativ-teritoriala (similar cu aceasta pagina: https://expertforum.ro/harta-proiecte-saligny/)
Cele doua seturi de date sunt independente (unele proiecte sunt la nivel de judet, altele sunt la nivel de UAT).
Hartile vor avea urmatoarele functionalitati:
- Datele despre proiecte vor fi citite la incarcarea paginii dintr-un fisier csv aflat pe server. Totalul pe judet / UAT va fi calculat dinamic la incarcare. Fisierul CSV va avea cel putin coloanele: cod judet/UAT, cod proiect, tip proiect, descriere, valoare (numar intreg)
- Paginile vor avea un top header fix cu meniu (Acasa, Harta opusa, Contact)
- Se va afisa o legenda intr-unul din colturi privind semnificatia culorilor (valoare minima, valoare maxima)
- Se va afisa un titlu intr-unul din colturi
- Se vor afisa informatiile copyring specifice openstreet map / leaflet.js / alte site-uri daca e necesar
- La alegerea unui obiect de pe harta (judet /UAT) pagina va afisa o fereastra pop-up cu lista proiectelor din obiectul respectiv, cu detalii despre proiect (cod proiect / tip / descriere / valoare)
- In dreptul fiecarui proiect va fi afisat un link/buton cu mesajul “Adopta un proiect”. Butonul va afisa o alta fereastra pop-ul cu un mesaj si ii va cere utilizatorului sa-si dea adresa de e-mail
- La indicarea unei adrese de mail, pagina va verifica ca adesa de mail este valida si va da un mesaj de eroare in caz contrar. Apoi va apela prin ajax un serviciu care va adauga adresa de mail si detaliile proiectului intr-un fisier csv pe server
- Ferestrele pop-up si intreaga pagina vor avea un aspect modern si finisat. Aspectele UI/UX vor fi luate in considerare
- Pagina trebuie sa functioneze corespunzator atat pe PC cat si pe dispozitive mobile
Cerinte tehnice
- Paginile vor fi realizate folosind doar html / css / javascript (cu exceptia handler-ului pentru stocarea adreselor de mail care va fi in php)
- Se vor folosi librariile javascript: jquery, leaflet.js, papaparse (pentru citire din csv). Se va evita pe cat posibil folosirea altor librarii. Nu este admisa folosirea de librarii care prin licenta nu pot fi folosite gratuit si fara atribuire.
- Codul va trebui sa se bazeze pe denumirile coloanelor din csv, nu pe pozitia lor in fisier (ex. valoarea va fi calculata pe baza coloanei cu numele „Valoare”, nu pe baza coloanei a 3-a)
- Codul javascript va fi clar, concis, folosind standardele curente de dezvoltare (coding standards). Codul va fi extensibil, permitand extensia si modificarea ulterioara.