Menu
  • Hem
  • Dokument
  • Om Mig
Geosupportsystem

Skapa story själv…

Posted on 2014-05-29

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.

Screenshot from 2014-05-25 16:49:22

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/

0 thoughts on “Skapa story själv…”

  1. Lunken skriver:
    2014-05-29 kl. 22:33

    Nice… Ska jag kila vidare på. Exemplet matchar inte riktigt min mobilskärm men det kanske handlat om 100% width osv.

    Svara
    1. Klas Karlsson skriver:
      2014-05-29 kl. 22:36

      Små skärmar och vertikal skärmorientering är ett problem som kräver lite mera kod.

      Svara
  2. Pingback: Vad har jag gjort i jul? | Geosupportsystem
  3. Pingback: Leaflet Plug-In | Geosupportsystem

Lämna ett svar Avbryt svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Translate with Google

GBR In English
GER Auf Deutch
FRA En Français
ESP En Español
Swedish is a hard language for a machine to translate. Nuance and detail will likely be lost.
     

Bok om QGIS på Svenska

Bok

Beställ Boken/E-bok genom att klicka på bilden (även förhandsgranskning).

Senaste kommentarer

  • Gabriel om Punktmoln i QGIS 3.18
  • klakar om Punktmoln i QGIS 3.18
  • Gabriel om Punktmoln i QGIS 3.18
  • Hector Garrido om QGIS LTR vs LTR
  • Christian om Stildelning för QGIS

Arkiv

Prenumerera på Geosupportsystem

Skriv in namn och epost för att prenumerera på meddelanden från denna blogg.
Loading

geosupport

Ooops. Tryckte nog för många gånger på bestäl Ooops. Tryckte nog för många gånger på beställ-knappen...
GoPro foton (många), WebODM och sedan bearbetning GoPro foton (många), WebODM och sedan bearbetning i CloudCompare. Här en skärmdump med QGIS 3D.
Nu är ja såväl "dröraroperatör" som certifier Nu är ja såväl "dröraroperatör" som certifierad "drönarpilot". Nu är det bara kvar att märka och uppdatera alla farkoster.
Ladda mer...

Meta

  • Logga in
  • Flöde för inlägg
  • Flöde för kommentarer
  • WordPress.org
©2021 Geosupportsystem | WordPress Theme by Superbthemes.com