ZebraHack4.0
← All challenges

SAMPLE CHALLENGE · 2025 · 3 / 4

Harta punctelor cu activitate intensă

Original 2025 brief, including the API references and rules from that edition. The 2026challenges will be released at the opening ceremony.

Descriere

Obiectivul este dezvoltarea unei aplicații web care arată, pe o hartă interactivă, zonele cu concentrații mari de puncte GPS din transporturile de lemn. Utilizatorul poate face zoom pe o regiune, vede cum se schimbă intensitatea (heatmap-ul) și descoperă ce companii sunt active în zona vizibilă.

Datele provin din ZebraHack3.0 Data API, în special din endpoint‑urile:

  • GET /heatmap – celule agregate (tip FeatureCollection GeoJSON) cu număr de puncte, intensitate (weight) și operatori principali;
  • GET /area/companies – companii care au transporturi intersectând un anumit bounding box (bbox), cu volum total și număr de transporturi.

Aplicația ar trebui să îi ajute pe cetățeni, jurnaliști sau ONG‑uri să identifice „puncte fierbinți” ale transporturilor și să vadă ce operatori domină în zonele respective.

Funcționalități:

  1. Pagină de introducere care explică ideea de „hotspots” ale transporturilor de lemn și de ce sunt importante.
  2. Hartă interactivă bazată pe o librărie de mapare (ex.: MapLibre GL JS), care încarcă heatmap-ul în funcție de zoom și de zona vizibilă.
  3. Popup-uri pe celule cu detalii despre numărul de puncte și operatorii principali.
  4. Listă de companii din zona vizibilă, ordonate după volum sau număr de transporturi.
  5. Interfață modernă, adaptabilă, lăsând echipelor libertatea de a experimenta cu legendă, culori și compoziție.

[!IMPORTANT]

  • Se va implementa exclusiv partea de front‑end: fișiere statice HTML, CSS și JavaScript + librării încărcate prin <script src="...">.
  • Nu se folosesc backend propriu, server‑side rendering, bundlers sau transpileri (fără Webpack, Vite, Babel, TypeScript etc.).
  • Pentru date se folosește ZebraHack3.0 Data API:
  • Autentificare: cheia de acces este numele echipei și se trimite ca header X-App-Key la fiecare request.

[!TIP] Librării recomandate (fără bundler, direct din CDN):

  • Pentru hartă: MapLibre GL JS, Leaflet, Mapbox GL JS, Google Maps JavaScript API.
  • Pentru UI: framework-uri ușoare sau doar CSS custom, atâta timp cât sunt încărcate direct în browser.
  • Paleta de culori pentru heatmap poate fi inspirată din aplicații consacrate (ex.: Google Maps, Mapbox), dar echipele sunt încurajate să vină cu propriile scheme vizuale.

Task 1: Pagina de introducere și context

Creați o pagină de tip landing care explică ideea de „hartă a intensității transporturilor”.

Criterii de acceptare:

  • Pagina explică, în câteva paragrafe, de ce este important să știm unde se concentrează transporturile de lemn și ce riscuri pot ascunde aceste „hotspots”.
  • Sunt incluse referințe la SUMAL 2.0 și Inspectorul Pădurii, explicând pe scurt rolul lor.
  • Se explică pe înțelesul tuturor ce înseamnă o vizualizare de tip „heatmap” și ce reprezintă punctele/culorile de pe hartă.
  • Pagina conține un buton „Intră în hartă” care duce spre pagina principală cu heatmap.
  • Conținutul este static (doar HTML și CSS), fără apeluri la API.

Task 2: Header-ul aplicației și navigarea

Construiți un header comun și un meniu de navigare simplu.

Criterii de acceptare:

  • Header-ul include:
    • un logo sau o marcă a aplicației;
    • titlul aplicației, de exemplu „Harta punctelor cu activitate intensă”.
  • Meniul de navigare permite accesul la cel puțin paginile: Introducere și Hartă.
  • Pagina curentă este evidențiată vizual (culori, stil de text etc.).
  • Header-ul este reutilizat pe pagini (copiat sau generat dintr-un mic script JS).
  • Echipele pot alege orice layout (sus, lateral, sticky etc.), atâta timp cât navigarea rămâne clară.

Task 3: Integrarea hărții și a heatmap-ului (endpoint /heatmap)

Implementați harta interactivă și legătura cu endpoint-ul GET /heatmap.

Criterii de acceptare:

  • Harta este inițial centrată pe România, iar utilizatorul poate face zoom și pan.
  • La schimbarea zoom-ului sau a poziției hărții, aplicația:
    • calculează bounding box-ul vizibil (bbox);
    • trimite un request GET către https://zebrahack.iqnox.tech/api/heatmap (sau baza configurată în aplicație) cu parametrii zoom și bbox;
    • include cheia de autentificare în header sau query param.
  • Răspunsul (FeatureCollection) este folosit pentru a desena heatmap-ul sau punctele pe hartă, folosind câmpurile:
    • geometry (Point cu [lon, lat]),
    • properties.point_count,
    • properties.weight,
    • properties.operators.
  • Heatmap-ul se actualizează fluent atunci când utilizatorul explorează harta.
  • Sunt afișate mesaje prietenoase pentru stări de încărcare/eroare.

Task 4: Popup-uri pe celule și detalii despre operatori

Permiteți utilizatorului să afle mai multe despre o zonă intensă printr-un popup sau panou de detalii.

Criterii de acceptare:

  • La click pe o celulă/zonă intensă de pe hartă, aplicația afișează:
    • numărul total de puncte (point_count);
    • operatorii principali (operators) cu rol, număr de transporturi și orice alt detaliu relevant.
  • Informațiile sunt prezentate într-un mod compact și lizibil (popup pe hartă sau panou lateral).
  • Dacă pentru o celulă nu există lista de operatori, se afișează măcar numărul de puncte și un mesaj neutru.
  • Layout-ul și stilul pop-up-ului sunt la latitudinea echipei (card minimalist, listă, icon-uri etc.).

Task 5: Lista companiilor din zona vizibilă (endpoint /area/companies)

Construiți o listă cu companiile care au transporturi în zona curent vizibilă pe hartă.

Criterii de acceptare:

  • De fiecare dată când utilizatorul schimbă zona (zoom/pan), aplicația trimite un request GET către https://zebrahack.iqnox.tech/api/area/companies cu parametru bbox (coordonatele zonei vizibile).
  • Lista afișată conține, pentru fiecare companie:
    • name,
    • role (emitent / destinatar),
    • transport_count,
    • total_volume.
  • Companiile sunt sortate într-un mod intuitiv (ex.: volum total descrescător).
  • Este clar indicat când nu există companii în zona vizibilă (ex.: mesaj „Nu există companii în cadru.”).
  • UI-ul listei încurajează explorarea (carduri, icon-uri, culori diferite pentru roluri etc.), la alegerea echipei.

Task 6: Design interfață utilizator (UI) și responsive

Asigurați o experiență plăcută atât pe desktop, cât și pe mobil.

Criterii de acceptare:

  • Aplicația folosește o paletă de culori coerentă, cu accent pe diferențierea vizuală a zonelor cu intensități diferite.
  • Componentele interactive de bază (butoane, carduri, legendă, pop-up-uri) oferă feedback vizual (hover, focus, „loading”).
  • Fonturile sunt lizibile și folosite consistent pe toată aplicația.
  • Layout-ul este responsive:
    • pe ecrane mari, utilizatorul poate vedea simultan harta și informații suplimentare (legendă, listă de companii etc.);
    • pe ecrane mici, harta și panourile text se organizează astfel încât să fie ușor de derulat și folosit cu degetul.
  • Echipele sunt încurajate să experimenteze cu animații subtile, tranziții și iconografie, atâta timp cât aplicația rămâne clară și ușor de folosit.