ol-ext: Storymap control

The ol/control/Storymap is a control with scroll-driven navigation to create narrative maps.

You can specify the story content using the html options as a string or a DOM Element.
You can also specify a target to use as story content
Use an element with a chapter class and a name to specify a new chapter in the story.
The setChapter() method lets you move to a chapter given its name.
Listen to the scrollto event to get the current chapter.
Use an element with a ol-scroll-next class in your story to scroll to the next chapter on click.
Use an element with a ol-scroll-top class in your story to scroll to the top of the story.

See example with a story inside the map.

Capitals

A story map with Openlayers.
text & images © Wikipedia

Start

Paris

Paris is the capital and most populous city of France, with an area of 105 square kilometres (41 square miles) and a population of 2,206,488. Since the 17th century, Paris has been one of Europe's major centres of finance, commerce, fashion, science, and the arts.

London

London is the capital and largest city of both the United Kingdom and England. Standing on the River Thames in southeastern England, 50 miles (80 km) upstream from its estuary with the North Sea, London has been a major settlement for two millennia. Londinium was founded by the Romans. The City of London, London's ancient core − an area of just 1.12 square miles (2.9 km2) and colloquially known as the Square Mile − retains its medieval boundaries.

Berlin

Berlin is the capital and largest city of Germany by both area and population. Its 3,711,930 (2017) inhabitants make it the second most populous city proper of the European Union after London. The city is one of Germany's 16 federal states. It is surrounded by the state of Brandenburg and forms the center of the Berlin/Brandenburg Metropolitan Region, which is, with 6,004,857 (2015) inhabitants and area of 30,370 square km, Germany's third-largest metropolitan region after the Rhine-Ruhr and Rhine-Main regions.

Top