Ännu en SPA med Leaflet - Versionshistorik

PGJ den 12 augusti 2024 kl. 08.59

2024-08-12T08:59:59Z

← Äldre version		Versionen från 12 augusti 2024 kl. 08.59
Rad 4:		Rad 4:

	== Vår applikation ==		== Vår applikation ==
	Väldigt mycket kommer att påminna om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.		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 ==		== HTML ==

PGJ den 12 augusti 2024 kl. 08.59

2024-08-12T08:59:23Z

← Äldre version		Versionen från 12 augusti 2024 kl. 08.59
Rad 4:		Rad 4:

	== Vår applikation ==		== Vår applikation ==
	Väldigt mycket ~~påminner~~ om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.		Väldigt mycket kommer att påminna om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

	== HTML ==		== HTML ==

PGJ den 23 oktober 2021 kl. 11.58

2021-10-23T11:58:34Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.58
Rad 16:		Rad 16:
	<codepen pen="bErYzM" tab="css" height="700">		<codepen pen="bErYzM" tab="css" height="700">
	</codepen>		</codepen>


	Vi sätter <code>info</code>-<code>div</code>: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 <code>jusitfy-content: space-around;</code>.		Vi sätter <code>info</code>-<code>div</code>: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 <code>jusitfy-content: space-around;</code>.
Rad 24:		Rad 25:
	<codepen pen="bErYzM" tab="js,result" height="1200">		<codepen pen="bErYzM" tab="js,result" height="1200">
	</codepen>		</codepen>


	I JavaScriptet har vi gjort en hel del ändringar...		I JavaScriptet har vi gjort en hel del ändringar...

PGJ den 23 oktober 2021 kl. 11.58

2021-10-23T11:58:13Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.58
Rad 9:		Rad 9:
	<codepen pen="bErYzM" tab="html" height="500">		<codepen pen="bErYzM" tab="html" height="500">
	</codepen>		</codepen>


	Den största skillnaden är att vi lägger till en extra <code>div</code> 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.		Den största skillnaden är att vi lägger till en extra <code>div</code> 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.

PGJ: /* AjaxKlar */

2019-02-22T13:50:48Z

AjaxKlar

← Äldre version		Versionen från 22 februari 2019 kl. 13.50
Rad 35:		Rad 35:
	<code>AjaxKlar</code> ä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.		<code>AjaxKlar</code> ä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ägsnar sig ifrån~~ markören.		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.

	=== <code>MouseOver</code> ===		=== <code>MouseOver</code> ===

PGJ: /* Zoomnivå */

2019-02-22T13:49:43Z

Zoomnivå

← Äldre version		Versionen från 22 februari 2019 kl. 13.49
Rad 27:		Rad 27:

	=== Zoomnivå ===		=== Zoomnivå ===
	~~För det första~~ zoomar ut och centrerar ~~kartan~~ så vi ser det mesta av Sverige (i alla fall om det finns plats i vår webbläsare).		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).

	=== <code>hämtaTrafikmeddelande</code> ===		=== <code>hämtaTrafikmeddelande</code> ===

PGJ: /* JavaScript */

2019-01-12T21:15:35Z

JavaScript

← Äldre version		Versionen från 12 januari 2019 kl. 21.15
Rad 21:		Rad 21:

	== JavaScript ==		== JavaScript ==
	<codepen pen="bErYzM" tab="js" height="1200">		<codepen pen="bErYzM" tab="js,result" height="1200">
	</codepen>		</codepen>

PGJ den 6 januari 2019 kl. 16.49

2019-01-06T16:49:26Z

← Äldre version		Versionen från 6 januari 2019 kl. 16.49
Rad 1:		Rad 1:
	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. ~~Den data vi~~ bland annat ~~kan~~ 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.		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 ~~på vår app~~. Vi visar ~~upp~~ var det finns trafikmeddelanden och när användaren för musen över ~~dem~~ så visar vi information om datapunkten i ett informationsfönster.		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år applikation ==
	Väldigt mycket påminner om vår föregående SPA, så vi kommer bara att gå igenom skillnaderna.		Väldigt mycket påminner om vår föregående [[SPA]], så vi kommer bara att gå igenom skillnaderna.

	== HTML ==		== HTML ==
Rad 10:		Rad 10:
	</codepen>		</codepen>

	Den största skillnaden är att vi lägger till en extra <code>div</code> där vi ska visa information om vald trafiksituation. Vi delar upp ~~<code>div</code>:en~~ för trafikinformationen i två delar; en för kartan och en för textinformationen. Dessa ska vi sedan snygga till med lite CSS.		Den största skillnaden är att vi lägger till en extra <code>div</code> 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 ==		== CSS ==
Rad 30:		Rad 30:

	=== <code>hämtaTrafikmeddelande</code> ===		=== <code>hämtaTrafikmeddelande</code> ===
	Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Ä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 <code>format</code>, då vi vill ha ~~datat~~ i JSON-format.		Vi döper om vår funktion avsedd för att hämta data till <code>hämtaTrafikmeddelande</code>. Ä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 <code>format</code>, då vi vill ha data i JSON-format.

	=== <code>AjaxKlar</code> ===		=== <code>AjaxKlar</code> ===
	<code>AjaxKlar</code> är i det närmaste helt omskriven. Den data vi får ifrån Sveriges Radio är inte i GeoJSON ~~och vi~~ får därför göra en loop som går igenom ~~vår data~~ 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 ~~musen~~ avlägsnar sig ifrån markören.		<code>AjaxKlar</code> ä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ägsnar sig ifrån markören.

	=== <code>MouseOver</code> ===		=== <code>MouseOver</code> ===
	Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> att vara satt till respektive trafikmeddelande. Vi kan nu läsa ut informationen om trafikmeddelandet och sätta respektive informationsfält till den data vi vill visa upp.		Till <code>MouseOver</code> skickar vi även med nuvarande trafikmeddelande. När funktionen triggas kommer <code>this</code> 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.

	=== <code>MouseOut</code> ===		=== <code>MouseOut</code> ===
Rad 42:		Rad 44:

	== Nästa aktivitet ==		== Nästa aktivitet ==
	Vi är klara med sektionen om applikationer som körs i webbläsaren. Nu ~~kan du~~ gå vidare och ~~läsa mer~~ om hur man skapar serverapplikationer....		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....

	[[Node - En introduktion]]		[[Node - En introduktion]]

PGJ: /* Vår applikation */

2019-01-06T16:42:23Z

Vår applikation

← Äldre version		Versionen från 6 januari 2019 kl. 16.42
Rad 4:		Rad 4:

	== Vår applikation ==		== Vår applikation ==
	Väldigt mycket påminner om vår föregående SPA, så vi kommer bara att gå igenom skillnaderna ~~i detalj~~.		Väldigt mycket påminner om vår föregående SPA, så vi kommer bara att gå igenom skillnaderna.

	== HTML ==		== HTML ==

PGJ: /* Nästa aktivitet */

2016-02-15T13:25:59Z

Nästa aktivitet

← Äldre version		Versionen från 15 februari 2016 kl. 13.25
Rad 42:		Rad 42:

	== Nästa aktivitet ==		== Nästa aktivitet ==
	Vi är klara med sektionen om ~~jQuery~~. Nu kan du gå vidare och läsa mer om hur man skapar serverapplikationer....		Vi är klara med sektionen om applikationer som körs i webbläsaren. Nu kan du gå vidare och läsa mer om hur man skapar serverapplikationer....

	[[Node - En introduktion]]		[[Node - En introduktion]]