ESRI har sina Storymaps och det finns bland annat StoryMapJS som är ganska rättfram. Bland Open Source så kan man hitta mapstory.org, men den blir jag inte riktigt klok på.
Nåja, efter att ha kikat en del på javaskript så tänkte jag se hur svårt det skulle vara att helt enkelt göra en egen version, och kanske lära mig något på köpet. Jag överdriver inte när jag säger att det både var enklare och blev bättre än vad jag trott från början så nu kör vi.
Till att börja med så använde jag mig av min Raspberry Pi kartserver från inlägget tidigare i veckan, men i stället för Open Layers som det blev mycket av i förra veckan så tänkte jag köra Leaflet den här gången.
<html>
<head>
<title>Den lilla kartservern på Raspberry Pi</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="rubrik">Eksjö Stadsfest 29-30 Augusti 2014</div>
<div id="story"></div>
<div id="map"></div>
<script src="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: 'Open Street Map'
});
var positioner = L.layerGroup([]);
var map = L.map('map', {
center: [57.66827, 14.9808],
zoom: 16,
layers: [osm, positioner]
});
var nummer = -1;
var startText = "Detta är starttexten.";
var position = [
[57.66695, 14.97063],
[57.66943, 14.97057]
];
var storyText = [
"Första storytexten",
"Andra storytexten"
];
window.onload=function(){
document.getElementById('story').innerHTML = startText
};
map.on('click', function() {
try {
nummer += 1,
map.panTo(position[nummer], {
animate:true,
duration:1
}),
document.getElementById('story').innerHTML = storyText[nummer],
positioner.clearLayers(),
L.marker(position[nummer]).addTo(positioner);
}
catch(err) {
nummer = -1,
positioner.clearLayers(),
document.getElementById('story').innerHTML = startText
}
});
</script>
</body>
</html>
I koden ovan så har jag rensat bort ”styles” för de olika DIV-taggarna för att göra koden lite tydligare, men där anger man hur stora varje objekt skall vara, färger och typsnitt etc, men framför allt viktigt är placering och lagerordning så att saker och ting ritas ut i rätt ordning. I förra veckan så använde jag dessa principer för att skapa element i webbkartan så det går att återvinna dessa exempel.
I själva skriptet så definieras bakgrundskartan som ”osm” och så skapas en tom lagergrupp vid namn ”positioner” som skall användas för att visa punkter på kartan.
Kartan (”map”) skapas och lagerna adderas. Sedan kommer ”magin”…
Jag använder två listor för att lagra positioner och berättelserna. Inledningsvis så sätts en indexvariabel (”nummer”) till värdet -1, för att ligga ett steg före 0, som är första index i listorna.
Jag tilldelar listan ”position” ett antal koordinater och ger listan ”storyText” texter som motsvarar det som skall presenteras för användaren. Det kan vara valfri HTML kod och blir väldigt lätt att lägga till så här.
Jag har även skapat en variabel ”startText” som används när sidan laddats och när sista texten i listan visats och allt börjar om. Det är raderna med ”document.getElementById” som uppdaterar den DIV-tagg som har id ”story” med innehållet i variabeln ”storyText”.
Alla växlingar sker när man klickar i kartan (”map.on(’click’, funktion()” ), och så länge det finns nya positioner och berättelsetexter i listorna så kommer kartan att panoreras och berättelsen uppdateras. När man kommit till slutet så sätts indexvariabeln åter till -1 och allt börjar om från början.
En liten finess är att använda ”marker” för att märka ut platserna och för varje gång rensa tidigare markörer. Det enda sättet jag hitta som gör detta möjligt är just lagergrupper och kommandot ”clearLayers()”.
För mitt exempel så har jag lånat information och underlag från Eksjö Stadsfest.
Du kan öppna sidan och testa på den här länken. Då kan du även se hela koden inklusive stilar.