Ännu en SPA med Leaflet
Vi ska gå igenom hur man kan göra en variant på föregående SPA. Sveriges Radio har flera öppna API:er där man kan få tillgång till diverse data. Vi ska ta och titta närmare på deras API för trafikmeddelanden. Här kan man läsa ut information om de trafiksituationer som uppstår runt om i landet. Vi kan bland annat läsa ut är koordinater, titel och beskrivning. Sveriges Radios API:er kräver ingen API-nyckel. De supportar även CORS så vi kan hämta data direkt ifrån vår webbapplikation. Detta är alltså en utmärkt källa till exempeldata.
För denna app ska vi ha ett något annorlunda upplägg. Kartan visar var det finns trafikmeddelanden och när användaren för musen över dessa så visar vi information om datapunkten i ett informationsfönster.
Vår applikation
Väldigt mycket av koden kommer att påminna om den som vi skrev för vår föregående SPA, så vi kommer bara att gå igenom skillnaderna.
HTML
Den största skillnaden är att vi lägger till en extra div där vi ska visa information om vald trafiksituation. Vi delar upp ytan för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.
CSS
Vi sätter info-div:en till en flexbox, så att informationen som finns inuti den kommer att radas upp på samma rad. Vi väljer att de ska placeras ut likformigt med jusitfy-content: space-around;.
Vi sätter #karta och #info till samma storlek, så det blir att se proportionellt ut.
JavaScript
I JavaScriptet har vi gjort en hel del ändringar...
Zoomnivå
Första zoomar ut kartan och centrerar den så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).
hämtaTrafikmeddelande
Vi döper om vår funktion avsedd för att hämta data till hämtaTrafikmeddelande. Även Sveriges Radios API är ett REST-API, så vi kan kalla på det med en "vanlig" URL. Den enda inparameter vi bryr oss om att skicka med är format, då vi vill ha data i JSON-format.
AjaxKlar
AjaxKlar är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON. Vi får därför göra en egen loop som går igenom datan och behandlar varje post. För omväxlingens skull använder vi en anonym funktion denna gång.
Vi lägger först till en markör på den position som anges för trafikmeddelandet. Vi kopplar en popup till varje markör - när användaren klickar på markören kommer namnet på platsen att visas. Därefter binder vi några händelsehanterare till markören. Först en som kommer att triggas när användaren sätter muspekaren ovanför markören och sedan en som triggas när muspekaren avlägsnas från markören.
MouseOver
Till MouseOver skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer this att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data som vi vill visa upp.
MouseOut
MouseOut gör inte speciellt mycket mer än att den rensar informationsfälten.
Nästa aktivitet
Vi är klara med sektionen som handlar om applikationer som körs i webbläsaren. Nu ska vi gå vidare och lära oss om hur man skapar serverapplikationer....