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.
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.
npm install
npm run serve
npm run build
npm run build-plugin
- NPRI Sector Overview: Oil Sands Extraction
- NPRI Sector Overview: Pulp and Paper
- NPRI Substance Overview: Ethylene Glycol
- use RAMP4 mapping platform
- development of a web-based editor
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent