En exempelapplikation i Leaflet - Versionshistorik

PGJ den 23 oktober 2021 kl. 11.42

2021-10-23T11:42:55Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.42
Rad 47:		Rad 47:

	=== Experimentdata ===		=== Experimentdata ===
	Vi hämtade ned lite experimentdata ifrån <code>~~http~~://~~data.~~karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.		Vi hämtade ned lite experimentdata ifrån <code>https://karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

	Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:		Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

PGJ den 23 oktober 2021 kl. 11.15

2021-10-23T11:15:06Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.15
Rad 28:		Rad 28:
	Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx \| h1]]</code> ska vara centrerad.		Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx \| h1]]</code> ska vara centrerad.

	Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av ~~den~~ skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.		Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.

	== Lägga till en karta på prov ==		== Lägga till en karta på prov ==

PGJ den 23 oktober 2021 kl. 11.14

2021-10-23T11:14:03Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.14
Rad 11:		Rad 11:

	=== HTML ===		=== HTML ===
	Det viktigaste vi behöver göra i HTML:en är att lägga till ~~[[jQuery]] och~~ [[Leaflet]], då vi kommer att behöva ~~dessa~~ för vår app. HTML:en kan då bli att se ut så här:		Det viktigaste vi behöver göra i HTML:en är att lägga till [[Leaflet]], då vi kommer att behöva denna för vår app. HTML:en kan då bli att se ut så här:
	<codepen pen="xZqpXz" tab="html" height="500">		<codepen pen="xZqpXz" tab="html" height="500">
	</codepen>		</codepen>

PGJ den 23 oktober 2021 kl. 11.07

2021-10-23T11:07:11Z

← Äldre version		Versionen från 23 oktober 2021 kl. 11.07
Rad 16:		Rad 16:

	Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.		Det finns nog inget som förtjänar att kommenteras i den lilla HTML-snutten, då det i stort sett påminner om våra tidigare exempel.

			I följande exempel kommer vi att minimera HTML-koden på Codepen, så all kod kommer inte att vara med i HTML-editorn. Allt i föregående exempel behövs dock om du ska skapa applikationen som en fristående webbsajt.

	=== CSS ===		=== CSS ===

PGJ den 23 oktober 2021 kl. 09.59

2021-10-23T09:59:18Z

← Äldre version		Versionen från 23 oktober 2021 kl. 09.59
Rad 112:		Rad 112:
	Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!		Svårare än så är det inte att lägga in data som är formaterad i GeoJSON!

	== Att läsa in data ~~ifrån~~ en ~~källa~~ ==		== Att läsa in data från en datakälla ==
	Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:		Nu när vår utritning fungerar är det dags att börja hämta data på "riktigt". Det kommer vi att göra genom att använda oss av [[AJAX]]. Om du behöver uppfriska dina kunskaper i AJAX, titta på aktiviteten "[[jQuery och AJAX]]". Vi plockar bort vår testdata och lägger till en funktion som hämtar data. Så här blir det att se ut:
	<codepen pen="qbrxBw" tab="js,result" height="1050">		<codepen pen="qbrxBw" tab="js,result" height="1050">

PGJ den 31 oktober 2020 kl. 12.20

2020-10-31T12:20:04Z

← Äldre version		Versionen från 31 oktober 2020 kl. 12.20
Rad 49:		Rad 49:
	Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:		Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	{		{
Rad 89:		Rad 88:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~
	Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].		Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

PGJ den 22 februari 2019 kl. 13.19

2019-02-22T13:19:29Z

← Äldre version		Versionen från 22 februari 2019 kl. 13.19
Rad 1:		Rad 1:
	Vi ska nu titta på hur man kan ~~tänkas~~ skapa en liten applikation ~~baserade~~ på Leaflet. Vi kommer att hämta data ~~ifrån~~ [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data ~~ifrån~~ klientbaserade webbapplikationer.		Vi ska nu titta på hur man kan skapa en liten applikation baserad på Leaflet. Vi kommer att hämta data från [http://data.karta.orebro.se/ Örebros projekt] som tillhandahåller Öppen data. Här finns en hel del trevlig information att tillgå. Vi ska titta på hur man kan läsa ut intresseplatser i Örebros kommun och visa upp dessa på en karta. Även om du inte kommer ifrån Örebro, så är detta en intressant uppsättning av data som passar utmärkt att använda i demosyfte. En fördel med Örebros data är att man supportar [[CORS]] och att det därför går att hämta ned data från klientbaserade webbapplikationer.

	Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då. ~~Det är mycket kod som ska skrivas nu!~~		Vi ska bygga upp vår applikation i steg. Vi kommer att utföra sakerna ungefär i den ordning och med det upplägg som man skulle haft om man gjort detta på "riktigt". Förhoppningsvis blir det lättare att hänga med då.

	<div class="well well-warning">		<div class="well well-warning">
Rad 18:		Rad 18:

	=== CSS ===		=== CSS ===
	Vi lägger även till ~~lite~~ basal CSS:		Vi lägger även till basal CSS:
	<codepen pen="xZqpXz" tab="css,result" height="500">		<codepen pen="xZqpXz" tab="css,result" height="500">
	</codepen>		</codepen>

	I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" ~~modellen för boxar~~.		I CSS:en så startar vi med en minimal reset som gör att vi får ungefär samma grundutseende i alla webbläsare. Vi tar bort alla marginaler, all utfyllnad och ser till att vi använder oss av den "vettiga" boxmodellen.

	Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx \| h1]]</code> ska vara ~~centrerarad~~.		Då det är tänkt att det mesta i appen ska vara centrerat, så sätter vi att titeln i vår <code>[[hx \| h1]]</code> ska vara centrerad.

	Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av den skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.		Det intressantaste vi gör i CSS är det som återfinns i <code>#karta</code>. Vi sätter höjden till <code>75vh</code>. Det vill säga cirka 75 % av den skärmens höjd. Se "[[Måttenheter i CSS]]", om du glömt hur dessa fungerar. Vi sätter samma proportioner även för bredden. Vi använder oss av <code>margin: 0 auto;</code> för att centrera vår kart-<code>div</code>. Slutligen sätter vi en kant runt om kartan.
Rad 41:		Rad 41:

	<div class="well well-meadow">		<div class="well well-meadow">
	Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd ~~ifrån~~ källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och ~~likande~~ ska se ut.		Eftersom många API:er har satt gränser för hur ofta man får läs in data ifrån dem, kan det vara en bra idé att jobba lite annorlunda på experimentstadiet. Man tar helt enkelt och hämtar hem en datamängd från källan och sparar denna lokalt. Under testandet så använder du sedan denna undansparade data istället för att hämta hem den gång på gång. Det duger ju gott med denna typ av lagrad data medan vi håller på att slå fast hur layout och liknande ska se ut.
	</div>		</div>

	=== Experimentdata ===		=== Experimentdata ===
	Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om ~~datan~~ är så läsbar som möjligt. För koden spelar det ingen roll hur ~~datan~~ är formaterad och det kommer inte att behövas göra några ändringar för detta.		Vi hämtade ned lite experimentdata ifrån <code>http://data.karta.orebro.se/api/v1/layers/1?srs=EPSG:4326</code>. Därefter snyggade vi upp datan genom att köra den genom en [https://jsonformatter.curiousconcept.com/ JSON-formatterare]. Nu när vi ska börja att experimentera är det ju bra om vår data är så läsbar som möjligt. För koden spelar det ingen roll hur data är formaterad och det kommer inte att behövas göra några ändringar för detta.

	Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:		Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:
Rad 97:		Rad 97:
	Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.		Leaflet har inbyggt stöd för GeoJSON. Om vi använder oss av detta kommer vi att bespara oss själva en hel del arbete. Faktum är att Leaflet kan hantera vår datamängd i det närmaste helautomatiskt. Den kommer att plöja igenom datan och lägga ut den på kartan åt oss. Detta sker utan att vi behöver behandla datan eller skriva några loopar för att gå igenom den.

	Vi lägger datamängden i slutet av vår JavaScript-kod, så slipper vi se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:		Vi lägger datamängden i slutet av vår JavaScript-kod, så vi slipper att se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
	<codepen pen="LGWrjY" tab="js,result" height="1500">		<codepen pen="LGWrjY" tab="js,result" height="1500">
	</codepen>		</codepen>
Rad 130:		Rad 130:

	== Avslutning ==		== Avslutning ==
	Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på ~~den badplats det gäller~~. Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.		Nu har du en liten [[SPA]] som visar upp karta och data. Om du klickar på en intressepunkt i kartan bör du få upp en popup som talar om namnet på badplatsen . Återigen, det är inte alltför mycket kod som behövs för att hämta data dynamiskt och visa upp denna på en fullt användbar karta.

	Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.		Vi skulle lätt kunna ändra till att läsa in andra intressepunkter eller varför inte låta användaren välja vilka intressepunkter denne vill se? Det lämnar vi dock som en övning till läsare. Vi ska gå vidare och titta på hur man skapar applikationer som har en serverkomponent. Vi kommer att behöva detta för att kunna hämta vissa typer av data, t.ex. kräver många öppna data-källor att man har en [[API-nyckel]] för att kunna köra dem. Denna nyckel ska hållas hemlig, vilket är svårt eller omöjligt att göra om du kör en renodlad klientapp.

PGJ: /* Appen på riktigt */

2019-02-22T13:04:42Z

Appen på riktigt

← Äldre version		Versionen från 22 februari 2019 kl. 13.04
Rad 125:		Rad 125:
	Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.		Skillnaderna är att vi delat upp app:en i tre filer. En för HTML, en för CSS och en för JavaScript.

	I HTML är skillnaden att det är med "~~grundstrukturen~~" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.		I HTML är skillnaden att det är med "grundstruktur" för sidan, sånt som inte behövs på Codepen. Det är även tillagt så att övriga app-delar laddas in. I CSS är inget ändrat.

	JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga~~. Man bör alltid starta sin JavaScript-kod på detta vis~~.		JavaScript-delen har hamnat i <code>app.js</code>. Vår app-kod har inkapslats i en funktion. Denna funktion körs igång när allt är inladdat. Detta gör vi för att vara säkra på att alla metoder vi kommer att anropa är nedladdade och tillgängliga.

	== Avslutning ==		== Avslutning ==

PGJ: /* Experimentdata */

2019-02-12T08:09:31Z

Experimentdata

← Äldre version		Versionen från 12 februari 2019 kl. 08.09
Rad 49:		Rad 49:
	Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:		Vi kortade även ned datamängden så att enbart två kartpunkter är med. Det räcker för experimentsyfte och tar inte så mycket plats. Så här blev vår data att se ut:

			<div class="well well-cyanide-light">
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
	{		{
Rad 88:		Rad 89:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
			</div>
	~~Datat~~ är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].		Denna data är i en specialversion av JSON som är till för just kartdata. Den kallas för [[GeoJSON]].

	Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.		Varje intressepunkt har två delar. Först kommer koordinaterna och sen information om intressepunkten. Vi kommer att bry oss i koordinaterna och <code>title</code> till att börja med.

PGJ: /* Leaflet och GeoJSON */

2019-01-12T21:45:10Z

Leaflet och GeoJSON

← Äldre version		Versionen från 12 januari 2019 kl. 21.45
Rad 97:		Rad 97:

	Vi lägger datamängden i slutet av vår JavaScript-kod, så slipper vi se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:		Vi lägger datamängden i slutet av vår JavaScript-kod, så slipper vi se den. Sen ska vi skapa lite kod som kan hantera vår [[GeoJSON]]-data. Så här kommer koden att se ut:
	<codepen pen="LGWrjY" tab="js,result" height="~~1400~~">		<codepen pen="LGWrjY" tab="js,result" height="1500">
	</codepen>		</codepen>