Webbteknik 3

Förberedelser

I denna uppgift ska du arbeta vidare med två exempel från föreläsning 6, som redan finns inlagda i arbetsmaterialet. Börja med att gå igenom koden i programmen, så att du förstår den. I koden för script-filerna måste du också ersätta DIN-API-KEY med din egen API-nyckel för Flickr.

API-nyckel

För att kunna använda Flickrs API, måste du först skaffa en egen API-nyckel, som du ska ha i koden. I annat fall går det inte utnyttja API:t.

• Gå till https://www.flickr.com/services/apps/create/apply/. Om du inte redan är inloggad till Flickr/Yahoo, så får du först logga in. Har du inget Flickr-konto, får du också först registrera dig, genom att klicka på "Sign up"-länken.

För att kunna använda Leaflet och OpenStreetMap krävs ingen API-nyckel.

Beskrivning och uppgifter

Uppgiften är uppdelad i följande deluppgifter.

a. Flickr API

• Ta fram bildens koordinater (latitud och longitud)
  • Sök endast bilder som är geo-kodade, genom att lägga till parametern "has_geo=1" i url:en i funktionen fetchNewImgs.
  • I slutet av enlargeImg ska du anropa fetchLocation och skicka med fotots id som parameter.
  • I funktionen fetchLocation ska du lägga till kod för att hämta bildens geografiska position. Använd metoden flickr.photos.geo.getLocation. Svaret ska vara i formatet JSON.
    • Slå upp funktionen i Flickr — The App Garden, för att se argument samt innehåll och struktur för svaret. Där visas ett exempel i XML, men namnen och strukturen är densamma i JSON.
  • Tolka sedan den erhållna JSON-koden och skriv ut latitud och longitud i elementet som largeImg.locationElem refererar till. De båda värdena ska skrivas var för sig på formen "Latitud: ... , Longitud: ...".
    • Vill du införa en separat funktion för denna del, så är det OK.
• Fler bilder från samma plats
  • Då du skrivit ut latitud och longitud, anropar du funktionen fetchImgsByLocation. Skicka med latitud och longitud som parametrar.
  • I funktionen fetchImgsByLocation använder du metoden flickr.photos.search, där du söker bilder med angiven latitud och longitud. Antalet bilder ska vara fem.
  • Visa sedan de fem bilderna i elementet med id="moreImgs".
    • Det finns redan en referens till elementet i den globala vaiabeln moreImgElem.
    • Koden blir ungefär som funktionen newImgs, fast du ska inte lägga på några händelselyssnare på bilderna.

b. Leaflet och OpenStreetMap

• Visa karta och välj ut fem adresser
  • Ta fram OpenStreetMap och välj ut önskad plats (stad, stadsdel eller annan landsdel). Lägg in namn, koordinater och zoomfaktor i objektet i variabeln place.
    • Zoomfaktor, latitud och longitud finns sist i url:en i webbläsarens adressfält.
  • Ta också fram koordinater för fem adresser i vald karta och lägg in koordinaterna och lämpliga titlar i variabeln markerData.
    • Klicka på knappen med en pil och ett frågetecken. Klicka sedan på önskad plats på kartan. Platsens latitud och longitud läggs då in i url:en i adressfältet.
  • I initMap lägger du till en loop som går igenom markerData. I loopen skapar du en ny markör med positionen som finns i markerData[i].position och pushar markören in i arrayen addrMarkers.
    • Markörerna ska alltså endast skapas och sparas i arrayen. De ska ännu inte visas på kartan.
• Adressknapparna
  • I funktionen init lägger du in en loop, där du går igenom de fem knapparna som finns inom elementet med id addrBtns. För varje knapp sätter du namnet till den title som finns i markerData. Lägg också på en händelselyssnare för click med anrop av funktionen showAddrMarker, där du skickar med i som parameter.
  • I funktionen showAddrMarker döljer du först alla markeringar. Sedan kopplar du den markör i addrMarkers som indexeras av index till kartan.
• Användarens markering
  • I programmet finns det redan kod, så att man kan klicka i kartan och visa en markering. Det görs i funktionen newUserMarker. Du ska nu också skriva ut koordinaterna.
  • I funktionen newUserMarker lägger du till kod, för att skriva ut latitud och longitud i elementet som variabeln mapLocationElem refererar till. De båda värdena ska skrivas var för sig på formen "Latitud: ... , Longitud: ...".

c. Mashup (ej obligatoriskt): Skapa en mashup

• L6a: Visa karta med markering av bildens koordinater
  • I slutet av init-funktionen finns ett anrop av initMap. I denna funktion ska du skapa ett nytt kartobjekt och markör och spara i de globala variablerna map och marker. Kartans vy kan du sätta till [0, 0] och zoom 1, så visas hela världen. Markörens position sätter du också till [0, 0] och fäster på kartan.
  • I funktionen där du skriver ut latitud och longitud, lägger du till ett anrop av funktionen newMapLocation. Skicka med bildens latitud och longitud som parametrar.
  • I funktionen newMapLocation sätter du både kartans och markörens position till de medskickade latitud och longitud. Välj lämplig zoom, t.ex. 6.
• L6b: Visa bilder från den plats som användaren klickat på
  • I slutet av funktionen newUserMarker lägger du in ett anrop av funktionen fetchImgsByLocation. Som parametrar skickar du med latitud och longitud.
  • I funktionen fetchImgsByLocation använder du metoden flickr.photos.search och söker efter 500 bilder med angivna koordinater lat och lon. I funktionen showMoreImgs visar du tre slumpmässigt valda bilder.
    • Detta blir alltså i princip på samma sätt som i uppgift a, fast med tillägget att det ska vara slumpmässigt valda bilder ur sökresultatet.

Publicera dina filer

• Lägg in länkar till de båda programmen på den gemensamma ingångsidan för dina uppgifter.
• Publicera på Netlify samt testa att länkarna och dina program fungerar.

Krav

Kraven på det du skapar i denna uppgift är följande.

Godkänt

Följande krav måste vara uppfyllda, för att du ska bli godkänd.

• Punkt a och b i beskrivningen måste vara genomförda, så att den funktionalitet som beskrivs finns i programmet.

Extramerit

Följande är inte obligatoriskt för att bli godkänd, men kan ge en extra förtjänst som tas med i bedömning av kursens slutbetyg.

• Utför punkt c i beskrivningen ovan.