GPS-Sporing

Utvikle en webapplikasjon som lar brukeren spore sin geografiske posisjon ved hjelp av GPS, visualisere bevegelsen på et OpenStreetMap-kart med en posisjonsindikator, legge til interessepunkter, lagre sporingsdata for forskjellige “sesjoner” lokalt, vise lagrede sesjoner på kartet, og slette individuelle sporingsøkter.

  1. Kartvisning:
    • Integrer et OpenStreetMap-kart ved hjelp av OpenLayers.
    • Kartet skal sentreres på brukerens startposisjon (hvis tilgjengelig ved oppstart).
  2. Start/Stopp Tracking:
    • Implementer en knapp med teksten “Start Tracking”. Når denne trykkes:
      • Start kontinuerlig innhenting av brukerens geografiske posisjon ved hjelp av nettleserens navigator.geolocation API.
      • Vis en visuell indikator (f.eks., endre teksten på knappen til “Stopp Tracking”).
      • Kartet skal sentrere seg på den første mottatte GPS-posisjonen etter at sporingen starter.
    • Når “Stopp Tracking”-knappen trykkes:
      • Stopp innhentingen av geografisk posisjon.
      • Tegn en linje (path) på kartet som forbinder alle de registrerte posisjonene fra starten til stoppen av denne “sesjonen”.
      • Lagre dataene for denne “sesjonen” lokalt i nettleserens localStorage. Dataene skal inkludere: starttidspunkt, sluttidspunkt, og en liste over alle registrerte koordinater (latitude, longitude) i tidsrekkefølge.
  3. Posisjonsindikator:
    • Vis en tydelig indikator (f.eks., en blå sirkel) på kartet som representerer brukerens nåværende geografiske posisjon under aktiv sporing.
  4. Legg til Punkt:
    • Implementer en knapp med teksten “Legg til Punkt”. Når denne trykkes:
      • Hent brukerens nåværende geografiske posisjon.
      • Plasser en markør på kartet på denne posisjonen.
      • Lagre koordinatene og et tidsstempel for dette punktet, knyttet til den aktive sporingssesjonen (hvis en pågår) eller som et frittstående punkt.
  5. Lagring av Data:
    • All sporingsdata (start/stopp-sesjoner med tilhørende koordinater og tidspunkter, samt individuelle punkter) skal lagres i nettleserens localStorage.
    • Dataene skal organiseres slik at forskjellige “sesjoner” kan identifiseres.
  6. Visning av “Sessions”:
    • Lag et område på siden hvor brukeren kan se en liste over lagrede sporings”sesjoner” (f.eks., med start- og sluttidspunkt).
    • Når en “sesjon” velges fra listen:
      • Last inn de tilhørende dataene (koordinater, punkter).
      • Vis sporet (path) på kartet med en distinkt farge.
      • Vis eventuelle lagrede punkter for den valgte sesjonen som markører på kartet.
      • Zoom og sentrer kartet slik at hele sporet er synlig (med litt padding).
  7. Slette Økter:
    • Implementer en “Slett”-knapp ved siden av hver lagrede sporingsøkt i listen.
    • Når slett-knappen trykkes for en spesifikk økt, skal den økten fjernes fra localStorage og fra listen som vises på siden. Hvis den slettede økten vises på kartet, skal den også fjernes derfra.

Tekniske Hint

  • Bruk OpenLayers for kartvisning og interaksjon.
  • Bruk navigator.geolocation API for å hente brukerens geografiske posisjon.
  • Bruk localStorage for å lagre sporingsdata persistent.
  • Bruk Date objektet i JavaScript for å håndtere tidspunkter.
  • Bruk ol.proj.transform() for å konvertere koordinater mellom EPSG:4326 (GPS) og EPSG:3857 (kart).
  • Bruk ol.geom.LineString for å tegne spor og ol.Feature med ol.geom.Point for markører og posisjonsikon.
  • Bruk ol.style.Style og ol.style.Circle for å style posisjonsindikatoren.
  • Implementer feilhåndtering for geolokasjonstilgang.

Vurderingskriterier

  • Alle funksjonelle krav er implementert korrekt.
  • Håndtering av data i localStorage er korrekt implementert.
  • Kartvisningen og interaksjonen med sporing og punkter fungerer som forventet.

Forslag til løsning

Relaterte kompetansemål

  • planlegge, utvikle og dokumentere løsninger som er energieffektive og bærekraftige
  • planlegge, utvikle, sette opp og dokumentere systemer for datainnsamling, analyse og visualisering
  • planlegge, utvikle, sette opp og dokumentere integrasjoner mellom ulike systemer og databaser
  • veilede brukere i ulike oppgaver
  • utvikle og tilpasse brukergrensesnitt som ivaretar krav til universell utforming
  • velge og bruke relevante rammeverk og moduler til utvikling
  • beskrive hvilke krav som ulike løsninger stiller til infrastruktur, og hvilke muligheter og begrensninger som følger av infrastrukturen
  • utforske og vurdere eksisterende og nye teknologier og bransjerelevante kodespråk

Relaterte emner