Skapa story själv…

Igår så var det mer av experiment och resultatet finns som sagt att beskåda live här.

Om du är otålig och vill göra något själv så tänkte jag se hur mycket jag kan hjälpa dig, på kort tid.

För det första så bryter jag ut så mycket funktioner i javaskriptet som möjligt till en egen fil (”storymap.js”) och anropar den från htmlfilen.

För det andra så skapar jag en anpassad css-fil (”storymap.css”) för att inte minst media och texter skall anpassas till olika skärmstorlekar, i viss utsträckning i alla fall. Dessutom så samlas inställningar kring utseende på ett ställe.

Startförutsättningarna är att vi struntar i bakgrundskartan, den är som den är men kan ändras i javaskriptfilen om man vill. Färger och textstilar är förvalda något neutralt, men går också att ändra i css-filen.

Om du skapar en egen htmlfil så behöver du förutom att ha referenser till leaflet.css, storymap.css, leaflet.js och storymap.js, även skapa tre stycken DIV-taggar med id ”map”, ”rubrik” och ”story”. Dessa kommer att grundplaceras och ”stajlas” utan att du behöver göra något mer, men vill du ändra var exempelvis storytexten placeras så gör du det i css-filen. Det finns en fjärde DIV-tagg som används för att skapa en möjlighet att backa i berättelsen (id=”backa”), men den behöver du inte bekymra dig om inledningsvis.

Jag har brutit ut några variabler som är enkla att ändra själv utan att behöva gå in i skript och stilmallar. Dessa måste också läggas till om du gör en egen HTML-fil.

 var startKoordinat = [57.66818, 14.97132]; // ändra här till eget startläge
 var startZoom = 10; // ändra här till önskad zoom från start
 var rubrikOpacitet = 0.6; // ändra här till önskad genomskinlighet på rubriken
 var storyOpacitet = 0.8; // ändra här till önskad genomskinlighet på berättelsen
 var panoreringsTid = 2; // ändra här om du vill att panoreringarna skall gå snabbare eller långsammare

Sedan kommer tre ”listor” med värden som hör ihop. Först kommer dock den startText som visas först (vanlig variabel med text). Det hade gått att baka in startläget i de övriga listorna, men jag tyckte att det passade bättre såhär. Det kan ju hända att man vill presentera berättelsen lite mera övergripande först och då slippa exempelvis markörer och pop-up fönster.

Listorna med sammankopplat innehåll är:

• position – en latlng koordinat på formatet [55.1234, 14.9876]
• bubbelText – HTML för innehållet i kopplade pop-up fönster. Det går även välja om dessa skall visas direkt eller vid klick.
• storyText – HTML för innehållet i själva historian. I princip all HTML fungerar, men använd inte citationstecken ” inne i koden utan enkla ’ istället. Koden gillar inte heller radbryt, så skriv allt som en textsträng.

Det var det hela.

Ladda hem filerna från GitHub (LÄNK) och packa upp dem på valfri plats. Börja med att redigera filen ”storymap.html”, sedan kan du utveckla utseendet genom att ändra i exempelvis ”storymap.css”.

Vill du bara titta på exempelberättelsen så kan du göra det på: http://geosupportsystem.altervista.org/storymap.

Lycka till!

[EDIT] Ännu ett exempel hittar du här: http://geosupportsystem.altervista.org/nationaldagen/