search

ramp4-pcar4 / story-ramp

Storytelling with interactive maps using RAMP
MIT License
4 stars 14 forks source link
web-mapping

readme

RAMP Storylines (formerly StoryRAMP)

This project is an implementation of RAMP2 FGP Visualiser, Highcharts, and a number of other libraries, with the goal to provide a standards and guidelines compliant alternative to ArcGIS StoryMap, suitable for use in the Government of Canada's web presence.

Plugin Usage

To use the Storylines plugin in your Vue 3 project, follow these steps:

1. Install package from npm:

npm install ramp-storylines_demo-scenarios-pcar

2. Install the plugin in your Vue app:

import { createApp } from 'vue';
import App from './app.vue';
const app = createApp(App);

import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar'
app.use(StorylinesViewer);
import 'ramp-storylines_demo-scenarios-pcar/dist/storylines-viewer.css';

3. Import or merge i18n instance from the plugin:

import { storylinesI18n } from 'ramp-storylines_demo-scenarios-pcar'
// if there is no existing i18n instance in your app, add Storylines i18n when initializing Vue instance:
app.use(storylinesI18n);

// otherwise merge the storylines translations with existing i18n instance
i18n.mergeLocaleMessage('en', storylinesI18n.messages.en);
i18n.mergeLocaleMessage('fr', storylinesI18n.messages.fr);
app.use(i18n);

4. Use Storylines components in your Vue templates, here is a demo snippet for usage:

<header class="gray-200 sticky top-0 h-16 leading-9 w-full z-50 border-b border-gray-500 bg-gray-200">
    <div class="flex w-full sm:px-6 py-3 mx-auto">
        <storylines-mobile-toc class="mobile-menu" :active-chapter-index="activeChapterIndex" :slides="config.slides" :plugin="true"/>
        <div class="truncate">
            <span class="font-semibold text-lg m-1">{{ config.title }}</span>
        </div>
    </div>
</header>

<storylines-intro :config="config.introSlide"></storylines-intro>

<div class="w-full mx-auto" id="story">
    <storylines-content :config="config" @step="updateActiveIndex" :lang="lang" :plugin="true" />
</div>

...

config = ... (see following section)
activeChapterIndex = -1;
updateActiveIndex(idx: number): void {
    this.activeChapterIndex = idx;
}

Here is a demo of what a Storylines product would look like.

5. Creating Storylines config:

To create a Storylines config from scratch, please refer to the schema documnentation provided here. A demo config can be found here.

Alternatively, the storylines editor can be leveraged to help construct a complete configuration folder.

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

Build as a Vue plugin

npm run build-plugin

Customize configuration

See Configuration Reference.

Live examples

Future goals