Webbteknik 3

Förberedelser

I denna uppgift ska du arbeta vidare med två exempel från kapitel 12 i exempelsamlingen på js.enur.se,. Koden i dessa exempel finns redan inlagd i arbetsmaterialet. Börja med att gå igenom koden i programmen, så att du förstår den (eventuellt kan du repetera exemplen).

För att kunna använda Pixabay API måste du skaffa en API-nyckel. Hur du gör det visas i exempel ex12-1. För att kunna använda Leaflet, OpenStreetMap och Open-Meteo krävs ingen API-nyckel.

Beskrivning och uppgifter

Uppgiften är uppdelad i följande deluppgifter.

a. Pixabay API

I denna deluppgift använder du sidan index.html och skriver kod i script1.js.

• Ta fram bildens taggar
  • I funktionen enlargeImg tar du fram egenskapen tags och gör om det till en array. Gå sedan igenom taggarna i en loop och skapa ett span-element för varje tag. Lägg också på en händelselyssnare för click, så att fetchImgsByTag anropas med taggens text som en parameter. Lägg in span-elementen i det element som finns i variabeln largeImg.tagsElem.
    • Variabeln largeImg.tagsElem är redan tilldelad i init-funktionen och är div-elementet med klassen "tags". Med CSS-koden placeras span-elementen som grå "knappar" till höger om den förstorade bilden.
• Sök och visa fem bilder med den tag man klickar på
  • I funktionen fetchImgsByTag ska du söka efter fem bilder med taggen som "query". Sedan ska du visa dessa bilder i funktionen showTagImgs.
    • Koden blir ganska lik funktionerna fetchImgs och showImgs, fast bilderna ska nu visas i det element som refereras av variabeln tagImgsElem. Dessa bilder ska inte ha någon händelselyssnare.

b. Leaflet och OpenStreetMap

I denna deluppgift använder du sidan part2.html och skriver kod i script2.js.

• 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): Visa väderprognos på en karta

I denna deluppgift arbetar du vidare med sidan part2.html och lägger till kod i script2.js. Du ska använda ett API till Open-Meteo, för att hämta väderdata och visa det i en popup på kartan.

• I funktionen newUserMarker lägger du in ett anrop av fetchWeatherForecast och skickar med latitud, longitud och userMarker som parametrar.
• I fetchWeatherForecast ska du med fetch anropa API:t till Open-Meteo för att hämta en liten prognos för två dagar.
  • Använd formuläret på Open-Meteo för att välja ut vad du vill ha med och på det sättet skapa en URL. Ta med "Weather code" (som du sedan ska använda för att visa en bild), men sedan väljer du själv vad du vill ha med i prognosen.
  • Kopiera URL:en från formuläret, men i fetchWeatherForecast får du sedan ändra, så att du använder de värden på latitud och longitud som finns som parametrar i funktionen.
• I funktionen showForecast går du igenom det erhållna JSON-objektet och sätter samman HTML-kod för väderprognosen. Lägg därefter in HTML-koden i en "popup", som du kopplar till markören på kartan.
  • Om det ska stämma med den CSS-kod som finns, måste du lägga upp HTML-koden på följande sätt:

    <div class='forecast'>
        <h3>Idag</h3>
        <img src='...' alt=''>
        <p>...</p>
        <p>...</p>
        <h3>Imorgon</h3>
        <img src='...' alt=''>
        <p>...</p>
        <p>...</p>
    </div>

    För att få fram URL till img-taggarna kan du anropa getImgFilename och skicka med "weather code". Funktionen returnerar då ett filnamn och du får lägga till "img/weather/" som sökväg.

    Du kan ha hur många p-element du vill, under förutsättning att texten i dem får plats i popup-rutan. Vill du istället formatera HTML-koden på annat sätt, får du också ändra CSS-koden i style.css. Med den givna CSS-koden blir det på följande sätt:

    

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.

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.