Kart og stedsøk i forbindelse med en registrering

I dette innlegget tar jeg en nærmere titt på fanen "2.Stedsopplysninger" når man gjør en registrering. Det ligger endel tanker bak funksjonaliteten. Vi ønsker at det skal være lett å finne fram til steder man har registrert på tidligere eller ved hjelp av kart, at man lett skal finne fram til et sted/punkt man har vært og observert.

Om det er uklarheter: det er denne siden jeg tar for meg.

Jeg tar for meg 3 tema i dette innlegget:

• Punkt/område
• Navigering i kart
• Stedsnavnet og stedsnavnsøket

Punkt/område
Det man trenger å huske om dette valget er at det påvirker hvilke valgmuligheter du har under registrering. Ulike observasjoner assosieres med enten ett punkt eller ett område. Disse er vist i illustrasjonen under.

Om du har valgt punkt vil symbolet i kartet være et flagg og om du har valgt et område blir det en sirkel.

Merk! Sirkelen er bare et symbol og angir ikke utstrekningen på området. Koordinaten som legges til et område er "mest representative koordinat". Pr nå har vi ikke mulighet til å spesifisere området mer en det man har mulighet til gjennom å skrive en beskrivelse.

Navigering i kart
Kartet har noen smarte funksjoner. Her tar jeg noen.

For å zoome kan man:

• bruke skalaen på venstresiden av kartet
• dobbelklikke på et sted og kartet zoomer inn
• har du mulighet til så scrolle (hjul på musa eller to fingre på touchpadden) så kan det brukes til å zoome
• hold inne shift på tastaturet mens man klikker og drar. Da får man opp en rød firkant som merker området man zoomer til (figur under).

For å panorere/bevege kartutsnittet:

• klikk og dra
• legg merke til pilene i hjørnene av kartet

Stedsnavnsøket
Legg merke til feltet "Stedsnavn".

Det er noen egenskaper knyttet til dette feltet det er verd å merke seg:

• Feltet er ikke obligatorisk men om du vil finne igjen dette punktet senere for å gjenbruke det må du oppgi et navn.
• Hvis du begynner å skrive i feltet gjøres det automatisk et søk i dine steder.

• Når du har valgt sted og trykker enter, zoomer kartet inn på stedet og andre felter i skjema fylles på automatisk.

Merk! Søket virker bare om du er innlogget.

Merk!! Hvis du søker fram til et sted og klikker på nytt sted i kartet "går du bort fra" stedet. Muligheten til å redigere steder er ikke på plass enda.

Hvordan gjennomføre en registrering på regObs

I dette innlegget gjør jeg alle leddene i en registrering. Jeg gjør en registrering av skredaktivitet. Dette er en observasjon vi gjør for å underbygge snøskredvarslingen.

I innlegget #Pålogging og opprettelse av ny konto på regObs# gjennomgår jeg hvordan opprette bruker og hvordan logger på. Jeg regner med at du er på forsiden av regObs nå.

Det er fire valg på naturfare. Observasjoner knyttet til snøskredvarslingen er sortert under Snø. Klikk på knappen "Snø".

Her er en side som ligner hovedsiden, men som retter seg mot snø og snøskred relaterte observasjoner. Hvis dette er det du er interessert i, kan du legge bokmerke på denne siden.

Klikk "Registrer en observasjon". (Resten av knappene kommer jeg tilbake til senere.)

1. Observatør
Det som møter deg nå er info om deg som observatør.

Er du pålogget er denne siden bare for å bekrefte at du er du.

Gå videre ved å klikk på fanen "2. Stedopplysninger".

2. Stedopplysninger
Denne siden går jeg mer innpå i innlegget "pålogging og opprettelse av ny konto på regObs". Her tar jeg kortformen. Merk! En registrering blir ikke godkjent om ikke den er koordinatfestet.

Velg et sted. Dette kan du gjøre ved å enten hente opp noe du har registret tidligere (skriv navnet i "Stedsnavn" feltet) eller du kan velge et nytt sted ved å klikke i kartet. Du kan zoome i kartet ved å dobbeltklikke. Du kan lage en firkant og zoome ved å holde shift inne mens du klikker og drar.

Merk! Valget "Utstrekning - punkt/område", vil påvirke hvilke valg du får under registrering.

Dette fordi noen observasjoner assosieres med et område mens andre assosieres med et punkt. Snøskredaktivitet som jeg skal legge til her er assosiert med et område.

Gå videre ved å klikk på fanen "3. Registrering".

3. Registrering
Her kan du velge blant en eller flere registreringer. En observasjon må også ha et tidspunkt.

Merk at tidspunkt for en observasjon er obligatorisk og om det ikke er fylt ut blir registreringen ikke godkjent. Så, fyll inn tiden observasjonen er gjort.

Velg deretter feltet som heter "Skredaktivitet". Her er ingen registreringen så feltet er tomt. Men, klikker du på det grønne pluss (+) tegnet kommer et tomt skjema opp.

Fyll ut så nøyaktig som mulig. Merk at på dette skjema er "Ca. tid" tidspunktet når skredet gikk. Det er av og til vanskelig å angi, men anslå best mulig. Er det fare for missforståelser så legg til en kommentar.

Når registreringen er ferdig, klikk på fanen "4. Fullfør".

4. Fullfør
Her bekrefter du data som du er i ferd med å legge til regObs.

Denne rapporten er ikke særlig god og kommer til å høy prioritet på å bli oppgradert.

Merk også at hvis du har glemt å fylle i obligatoriske felter kommer en feilmelding når du trykker på knappen "Send inn". Her glemte jeg å legge til tidspunkt for registreringen.

På en vellykket registrering skal du få en "takk for ditt bidrag" beskjed og observasjonen skal komme opp i info-strømmen på regObs-forsiden og på startsiden for snø.

Pålogging og opprettelse av ny konto på regObs

I dette innlegget går jeg gjennom hvordan logge seg på regObs og hvordan opprette konto når man er førstegangsbruker.

Fordelen med å være pålogget er at regObs kan fylle ut felter for deg og du kan finne igjen steder du har registrert tidligere (se kart og stedsøk i forbindels med en registrering). Hvis man ikke er pålogget, har man tilgang til det meste av funksjonalitet, men alle observasjoner tilfaller en anonym bruker og steder som legges til er ikke gjenbrukbare.

Så, pålogging:
Legg merke til [Logg på] oppe til høyre. Trykk på denne og du får opp et nytt vindu.

Om du har en bruker så skrives brukernavn og passord inn og trykk knappen "logg på". Ferdig.

Som bekreftelse for at du er på logget, legg merke til at brukernavnet vises oppe til høyre på skjermbildet.

Opprette bruker:
Om du ikke har en bruker, legg merke til teksten oppe i påloggingsvinduet. Klikk på "Registrer" og du får opp et nytt vindu.

Som minimum må du velge et kallenavn, oppgi epostadresse og passord. Når du trykker "opprett konto" blir brukeren lagt til systemet, men du blir ikke logget på. Husk derfor på å logge deg på når du har opprettet bruker. Og legg merke til at brukernavnet vises oppe til høyre på skjermbildet.

(Samme bildet som vist over)

Merknad 1: Kallenavnet er det som vises sammen med data som legges til regObs. Her kan man velge noe generelt som "Ola", noe spesielt som "Ola Nordmann", eller noe kryptisk som "FrikjørerOla22". Dvs at man kan eksponere seg eller anonymisere seg ved valg av kallenavn.

Merknad 2: epostadressen er brukernavnet i systemet. Glemmer du passord kan du få generert nytt passord og da sendes det til denne epostadressen.

Merknad 3: Passord må være minimum 4 tegn.

regObs satt i drift

Vi har nå satt i drift regObs. Det ligger 2 versjoner ute. En sandkasse som er merket med rødt felt i toppen og en driftversjon som er merket i svart. I sandkassa kan man lære og teste med. I driftversjonen blir data nå lagret og tatt vare på.

regObs sandkasse ligger på: http://h-web01.nve.no/stage_regobsweb

og regObs drift ligger på: regobs.varsom.no  

Men så er det en versjon til som er det samme som sandkassa (Stage) men som det er ingen garantier for fungerer. Dette er regObs test som ligger på http://h-web01.nve.no/test_regobsweb. For ordensskyld er denne blå.


Merk! Noen felter for registreing mangler. Deriblandt muligheten for  å laste opp bilde og muligheten for å gjøre en skredfarevurdering. Disse skal etter planen komme på plass ila jula 2011.

Merk!! Disse systemene er ikke koblet sammen. Dvs. hvis du oppretter bruker eller legger til steder i test, vil det ikke bli tilgjengelig i drift.

Merk!!! regObs kommer til å fortsette i betafasen, så endringer kan skje. Men, data som legges til i drift blir tatt vare på.

Utviklerskolen del 5, Legge inn en hendelse

I denne delen så ønsker jeg å registrere en hendelse i regObs. Det første jeg gjør er å se på datamodellen og ser at en hendelse (Incident) må være knyttet opp mot en registrering (Registration).

Jeg ønske å lage en webklient og tar utgangspunkt i ett MVC prosjekt hvor jeg bruker Razor syntaks. Jeg har på forhånd generert opp data klassene mine som vist i del 3 av utviklerskolen. Deretter setter jeg opp en rask disposisjon over komponentene jeg ønsker å lage:

1. IncidentModel, inneholder datamodell og innhold i nedtrekkslistene.
2. Kontroller som leverer innhold i nedtrekkslistene.
3. View som inneholder skjema jeg ønsker å sende inn.
4. Kontroller som lagrer data i regObs.
5. View som viser at lagring har gått bra.

IncidentModel'en inneholder dataobjektet jeg ønsker å sende inn, samt 3 lister som skal fylle nedtrekkslistene i view mitt. I tillegg så har den en Load metode som laster data inn i listene. Normalt så anbefaler jeg ikke å bruke dataklassen direkte, men for å holde det enkelt så gjør jeg det i dette tilfellet.

public class IncidentModel
{        
    public Incident Incident { get; set; }
 
    public List<ComboboxObject> ActiviysList { get; set; }
    public List<ComboboxObject> DamageExtendList { get; set; }
    public List<ComboboxObject> ForcastAccList { get; set; }
 
    public void Load()
    {
        //peker til regObs api'et og oppretter en dbcontext
        var address = new Uri("http://h-web01.nve.no/test_regobsservices/odata.svc/");
        var dbContext = new RegObsEntities(address);
 
        DamageExtendList =
            dbContext.DamageExtentKD.Where(x => x.LangKey == 1).Select(
                x => new ComboboxObject { Id = x.DamageExtentTID, Text = x.DamageExtentName }).ToList();
 
        ForcastAccList =
            dbContext.ForecastAccurateKD.Where(x => x.LangKey == 1).Select(
                x => new ComboboxObject { Id = x.ForecastAccurateTID, Text = x.ForecastAccurateName }).ToList();
 
        ActiviysList =
            dbContext.ActivityInfluencedW.Where(x => x.LangKey == 1 && x.GeoHazardTID == 10)
            .OrderBy(x => x.ActivityInfluencedTID)
                .Select(x => new ComboboxObject { Id = x.ActivityInfluencedTID, Text = x.ActivityInfluencedName })
                .ToList();
    }
}

Når jeg har modellen min på plass så lager jeg en kontroller som returnerer den til view'et.

public ActionResult Index()
{
    //henter ut data og returnerer til view
    var model = new IncidentModel {Incident = new Incident()};
    model.Load();
    return View(model);
}

Deretter oppretter jeg View'et som inneholder skjema som skal fylles ut og sendes inn.

@using MyOdataProject.Models
@model IncidentModel
 
<h2>regObs, utviklerskolen 5</h2>
<p>Fyll inn skjema for å registrere en hendelse.</p>
<div>
    @using (Html.BeginForm())
    {
        <label>Tid: </label>@Html.TextBoxFor(x=>x.Incident.DtEndTime) <br/>
        <label>Overskrift: </label>@Html.TextBoxFor(x=>x.Incident.IncidentHeader) <br/>
        <label>Ingress: </label>@Html.TextBoxFor(x=>x.Incident.IncidentIngress) <br/>
        <label>Beskrivelse: </label>@Html.TextBoxFor(x=>x.Incident.IncidentText) <br />
        <label>Aktivitet: </label>@Html.DropDownListFor(m => m.Incident.ActivityInfluencedTID, new SelectList(Model.ActiviysList, "Id", "Text")) <br/>
        <label>Skadeomfang: </label>@Html.DropDownListFor(m => m.Incident.DamageExtentTID, new SelectList(Model.DamageExtendList, "Id", "Text")) <br/>
        <label>Nøyaktighet: </label>@Html.DropDownListFor(m => m.Incident.ForecastAccurateTID, new SelectList(Model.ForcastAccList, "Id", "Text")) <br/>
        <label>Kommentar: </label>@Html.TextAreaFor(x=>x.Incident.Comment) <br/><br/>
        <p>
        <input type="submit" value="Send inn hendelse" />
        </p>
    }
</div>

Når view'et er ferdig så oppretter jeg en kontroller som tar imot skjema og lagrer tilbake til regObs.Legg merke til måten jeg hente ut en ny regId og knytter hendelsen opp mot denne. Vær obs på at jeg her ikke har knyttet opp mot observatør eller lokasjon. Dette er noe man alltid bør gjøre.

[HttpPost]
public ActionResult Index(IncidentModel model)
{
    //peker til regObs api'et og oppretter en dbcontext
    var address = new Uri("http://h-web01.nve.no/test_regobsservices/odata.svc/");
    var dbContext = new RegObs.RegObsEntities(address);

     //lag et nytt sted (alle registreringer må være knyttet opp mot et sted, koordinater er tilfeldigvalgt)
    var newObsLocation = new ObsLocation
   {
 DtRegTime = DateTime.Now,
 UTMZone = 33,
 UTMEast = 58429,
 UTMNorth = 6922438,
        Comment = "Utviklerskolen"
   };

   dbContext.AddToObsLocation(newObsLocation);
   dbContext.SaveChanges();

    //Lag en ny registrering (alt som skal lagres i databasen er knyttet opp mot en registrering)
   var newRegistration = new Registration
   {
 ObsLocationID = newObsLocation.ObsLocationID,
 DtObsTime = model.Incident.DtEndTime.Value,
 DtRegTime = DateTime.Now,
 CompetenceLevelTID = 0
    };
    dbContext.AddToRegistration(newRegistration);
    dbContext.SaveChanges();
 
    //Knytte incident mot registrering
    model.Incident.RegID = newRegistration.RegId;
    dbContext.AddObject("Incident", model.Incident);
    dbContext.SaveChanges();
    return View("Complete");
}

Komplett eksempel kan lastes ned her

Utviklerskolen del 4, hente beskyttet data

I denne delen så ønske jeg å se på hvordan vi kan hente ut data på en Observatør. Dette er i utgangspunktet data som er beskyttet det vil si at man kun får lov å hente data til pålogget observatør. Prøver man å aksessere data på Observatør tabellen så får man kun returnert en anonym bruker, med mindre man er pålogget hvor du da får returner data til pålogget bruker.

Man kan logge på en egen authentiserings tjeneste i regObs eller man kan benytte seg egen pålogging gui fra tjenesten. Dette gjøres ved å skrive inn adressen til pålogging som er http://h-web01.nve.no/test_regobsservices/  slik at påloggingsdialogen dukker opp:

Når du er pålogget så kan man hente brukerdata fra Observatør tabellen på samme måte som man henter fra andre tabeller. Eks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>regObs, Utviklerskolen del 1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h2>regObs, utviklerskolen 1</h2>
<div id="result"></div>
 
<script type="text/javascript">
    $(document).ready(function () {
        var url = "http://h-web01.nve.no/test_regobsservices/odata.svc/Observer()?&$callback= displayResults&$format=json";
        $.ajax({
            dataType: 'jsonp',
            url: url
        });
    });
 
    function displayResults(results) {
        $.each(results.d.results, function (i, item) {
            console.log(item);
            $('#result').append("<strong>Id: </strong>" + item.ObserverID + '<br />');
            $('#result').append("<strong>Fornavn: </strong> " + item.FirstName + '<br />');
            $('#result').append("<strong>Etternavn: </strong>" + item.LastName + '<br />');
        });
    };
</script>
</body>
</html>

Utviklerskolen del 3, hente ut data vha .NET

I denne delen skal vi hente ut samme data som i del 2, men istedenfor å bruke JQuery og Ajax så skal jeg nå se på hvordan vi kan hente ut data vha .NET. Dette er fordel for de som liker å jobbe med c# og VisualStudio. En annen fordel er at man får jobbet med typesterke objekter og man kan utnytte .NET kompetanse man har.

Jeg tar utgangspunkt i at vi har opprettet ett webprosjekt av typen MVC3 i VisualStudio. Det første jeg da gjør er å høyreklikke på prosjektfila og velger 'Add Service Reference'. Jeg får da opp en dialogboks hvor jeg skriver inn adressen til regObs api'et, samt ett navnerom som passer:

Trykk 'OK' å alle klassene blir da generert opp for deg. Vi er nå klar til å ta disse i bruk og jeg går da inn i kontrolleren hvor jeg ønsker å hente ut data og sende til View'et.

public ActionResult Index()
{
    //peker til regObs api'et og oppretter en dbcontext
    var address = new Uri("http://h-web01.nve.no/test_regobsservices/odata.svc/");
    var dbContext = new RegObs.RegObsEntities(address);
 
    //henter ut data og returnerer til view
    var geoHazards = dbContext.GeoHazardKD.Where(x => x.LangKey == 1).ToList();
    return View(geoHazards);
}
Det neste jeg gjør er å lage view'et hvor jeg lister ut data som kommer fra kontrolleren. Jeg gjør en import på RegObs for å få tilgang til objektene som er generert opp, samt at jeg definerer modellen min til å være en liste av GeoHazardKD. Deretter lager jeg en løkke og skriver ut navnet på naturfarene.
@using MyOdataProject.RegObs
@model List<GeoHazardKD>
 
<h2>regObs, utviklerskolen 3</h2>
 
@foreach (var hazard in Model)
{
    @hazard.GeoHazardName <br />
}

Komplett kode eksempel kan lastes ned her

Utviklerskolen del 2, hente data vha JQuery og Ajax

I denne delen skal jeg ta for meg ett enkelt eksempel på hvordan man kan benytte seg av regObs Odata api for å hente ut de forskjellige hendelsetypene i regObs. Jeg lager en enkel webside som kun benytter seg av JQuery og Ajax

Det første jeg gjør er å referere til JQuery som jeg bruker til å manipulere data i html siden og gjøre Ajax kall.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

Deretter legger jeg inn en div hvor jeg ønsker å vise hendelsetypene.
<div id="result"></div>

Neste trinn blir å bygge opp en url for å hente ut ønsket resultat.
Her vet jeg at data jeg ønsker å hente ligger i Entiteten GeoHazardKD og jeg filtrerer ut kun de norske tekstene (LangKey = 1). 
http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()?$filter=(cast(LangKey,'Edm.Int32')) eq 1

Da er det klart for å gjøre ett enkelt Ajax kall for å hente data. Før jeg gjør kallet så legger jeg til callback på url samt definerer at jeg ønsker json som format på data'ene mine. I tillegg har jeg laget en enkel displayfunksjon som lister ut data i div taggen som jeg definerte tidligere.

<script type="text/javascript">
    $(document).ready(function () {        
        var url = "http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()?$filter=(cast(LangKey,'Edm.Int32')) eq 1&$callback= displayResults&$format=json";
        $.ajax({
            dataType: 'jsonp',
            url: url
        });
    });
    function displayResults(results) {
        $.each(results.d.results, function (i, item) {
            $('#result').append(item.GeoHazardName +'<br />');
        });
    };
</script>

 Ved å sette dette sammen i en enkel html side så får du nå listet ut de forskjellige hendelsetypene i regObs.

Komplett eksempel kan lastes ned her

Utviklerskolen del 1, OData

I regObs utviklerskolen skal jeg ta for meg det grunnleggende som skal til for å kunne utvikle applikasjoner eller tjenester som benytter seg av regObs api'et. Siden regObs benytter seg av OData skal vi i denne første delen bli kjent med api'et gjennom mulighetene vi har i OData til å hente ut de data'ene vi ønsker.

1. Hvordan se på og hente ut data fra regObs api'et vha. OData.
2. Hente ut data fra regObs vha. JQuery og Ajax.
3. Hente ut data fra regObs vha. VisualStudio og .NET
4. Logge på regObs for å hente ut beskyttet data.
5. Registrere en hendelse i regObs vha. VisualStudio og .NET

For de som er ukjent med OData så står dette for Open Data Protocol. Kort fortalt er dette en webprotocol som gjør det mulig å gjøre spørringer og oppdatere data via kjente webteknologier som http, atom og Json. Mer utførende forklaring og detaljer finner du på http://www.odata.org/.

Det eneste du trenger for å få tilgang til regObs api'et er en nettleser hvor du enkelt taster inn adressen til regObs-stage http://h-web01.nve.no/stage_regobsservices/Odata.svc/ eller regObs-test http://h-web01.nve.no/test_regobsservices/odata.svc/ (prod versjoner finner du her: http://api.nve.no) og du får da listet ut datamodellen eks:

Som dere ser får vi listet ut datamodellen. Vær oppmerksom på at entiteter som slutter på KD er oppslagstabeller som man kun kan lese fra.

Entiteter som slutter på V er data som er samlet i ett view og som kun kan leses fra.

Vi kan nå starte å benytte oss av kraften som finnes i OData hvor det gir oss veldig mange muligheter til gjøre spørringer for å hente ut de dataene vi selv ønsker.

Eksempelvis så kan vi nå hente ut alle naturfarene gjennom å referere til Entiteten direkte i url'en. Naturfarene ligger i Entiteten som heter GeoHazardKD. Eks: http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()

Naturfarene blir da listet ut sammen med metadata i ett atom format.

Ser dere nærmere på data'ene så kommer det både norsk og engelske tekster. Årsaken til dette er at regObs gjennom en LangKey i alle oppslagstabeller har støtte for flere språk. Hvilke språk som støttes finner dere i entiteten Language. Jeg ønsker nå å sortere ut kun de norske tekstene og jeg ønsker å få dataene mine i json format. Dette gjøres enkelt ved å endre på url'en hvor vi sier at vi skal ha norske tekster dvs. LangKey = 1 og json format, eks:  http://h-web01.nve.no/test_regobsservices/odata.svc/GeoHazardKD()?$filter=(cast(LangKey,'Edm.Int32'))%20eq%201&$format=json

Nærmere info om flere måter å gjøre spørringer på finner dere på odata.org sine sider. Det finnes også en del 3parts verktøy som hjelper dere å få oversikt og generere url til litt mer avanserte spørringer. Silverlight OData Explorer og Linqpad.

Figuren over er et utsnitt av Silverlight OData Explorer.