ramp4-pcar4 / ramp-pcar

Source for the RAMP-PCAR promotional website

R4MP

RAMP - The Reusable Accessible Mapping Platform, is a Javascript based web mapping platform that provides a reusable, responsive and WCAG 2.1 AA compliant common viewer for the Government of Canada. The fourth incarnation embraces the following large-scale changes

• Updating the UI framework from Angular 1 to Vue 3
• Updating the ESRI Mapping API from v3 to v4
• An application architecture and API that is more open and adjustable
• UI re-design with mobile use in mind

The previous version (RAMP 2 / RAMP 3) can be found here. Differences between the versions are summarized in the v4.0.0 Release Notes.

This is an unsupported product. If you require a supported version please contact [email protected] for a cost estimate. The software and code samples available on this website are provided "as is" without warranty of any kind, either express or implied. Use at your own risk. Access to this GitHub repository could become unavailable at any point in time.

Documentation

Documentation Site with unpublished changes can be found here.

Head to the Releases page for version-specific official documentation sites.

Local development

Project Setup

Download the latest Node version, currently v18.3.0 or later.

npm ci

Compile and Hot-Reload for Development

npm run dev

Open https://localhost:5173/demos/index-samples.html in your browser.

Serve via http

npm run dev-http

Build for production

npm run build

The production files will be placed in the dist folder.

Preview production build (after running build)

npm run preview

Open http://localhost:5050 in your browser.

Preview Vitepress documentation

npx vitepress dev docs

Build Vitepress documentation

npm run vite-docs:generate

Static site generated in the vite-docs directory.

Preview/Build TypeDoc documentation

npm run ts-docs:generate

Static site generated in the ts-docs directory. Open index.html to preview.

Recommended IDE Setup

VSCode with the recommended extensions (VSCode should bug you to install them).

Important:

1. Install Volar.
2. Disable/remove Vetur.
3. Type @builtin typescript in the search box on the VSCode extensions tab and disable "TypeScript and JavaScript Language Features". Volar has its own TS language server so we don't want to run two concurrently.

public vs demos folders

The public folder is a static only folder. It contains the help md files and end-user demo assets and the compiled ramp library source code. Files in this folder are not processed by vite and therefore cannot reference outside files. This is useful for testing if things are broken between the develop and production build.

To test the files in the public folder locally:

npm run build
npm run preview

Then open http://localhost:5050/index.html in your browser.

The demos folder is processed by vite and can therefore reference any source file in the repo. This is the starting point for local development. For example, the demos/starter-scripts/main.js file imports { createInstance, geo } from '@/main'; whereas public/starter-scripts/index.js doesn't since RAMP is globally defined by the index.html file when it loads <script src="./lib/ramp.js"></script>.

Run npm run dev then open http://localhost:3000/demos/index.html in your browser.

During build, the public folder contents are placed into the dist folder.

Demo Builds

The demos of the most recent build are available at https://ramp4-pcar4.github.io/ramp4-pcar4/main/demos/index-all.html.

Demo builds are automatically generated for pull requests if you are a member of the ramp4-pcar4 organization and have your visibility set to public.

ramp-pcar's Issues

Fix FR page text overlap section

This is likely due to this fixed height for the heading: <h2 class="!mt-0 md:h-[60px] lg:h-[80px] xl:h-[60px]">. Might be a nice short issue to test the new demo builds 👀

Remove horizontal scroll bar from gallery

The horizontal scrollbar is removed.

WCAG: Keyboard navigation

Check if there are any fixes to:

• Keyboard controls seems to skip the "enter ramp" button so there is more to get through before getting to the next text block
• WET template buttons for "skip to main content" etc, might not be working correctly

Embed storylines on the main page

Currently we just have an image of a storyline but it would be great if it was interactive. Ideally the existing storylines section would be replaced with a storylines instance.

The team is working on enabling storylines to be imported as a standalone component. If this is successful we should attempt to embed an instance directly on the main page.

Layer fails on landing page

In the Data Mashups and Analysis section, RAMP4 version.

Appears this service is no longer supporting CORS.

Easy to Implement demo formatting is broken.

https://ramp4-pcar4.github.io/ramp-pcar/#/external_samples/implement?lang=en

Shorten some text samples on main page

Columns of text do not appear very vertically inclined when viewed on a mobile resolution.

Configure PR demo builds

It would be nice if we had demo builds for our PRs

Integrate translated text

Officially translated text is integrated into the application.

Update demo link with new repo name

Currently demo link is https://ramp4-pcar4.github.io/ramp-website/...

Should be https://ramp4-pcar4.github.io/ramp-pcar/...

Fix console errors

There are a few console errors like "Blocked loading mixed active content" and CORS related issues. Upgrading the services to HTTPS and the proxy link seems to resolve them.

Implement placeholder text for French

Tne French site contains English text, but all strings are prepended with "[fr]" for ease in translation later on.

Create sample descriptions for each sample page

Each sample page has a small block of text describing the demo.

Console cleanup

There are a few errors being thrown in the console. We should clean these up before we deploy the site.

Also there are a few console.logs that need to be removed.

Storylines:

Other:

Fix mobile alignment issues, especially in the header

The header elements look clean and well laid out on the page, instead of overlapping one another.

Include localization logic and string variables where relevant

(If not already done) application is able to switch between languages, and has easily replaceable variables for english and french text.

Tweak configuration files

• Clip n' Ship Data Extractions - Enable export
• Provide Context for Your Data - Identify isn't working correctly
• Name all REST services from their source data
• Display Multiple Types of Data - Set WMS legend

Unexpected focus jump when clicking on a legend item on marketing website

See ramp4-pcar4/ramp4-pcar4#1968

Fix images in gallery to fit (or resize the gallery)

The images in the gallery are not distorted or blurry.

Fix scroll to contact form

When the marketing site first loads and the demos have not yet entered the view, the "Get in Touch" and "Request a demo" buttons can't reach the contact form. When pressed, the page will begin scrolling until it reaches the first unloaded demo.

WCAG: Break out accessibility reports into Development Tasks

Tasks are generated from the WCAG report to address WCAG compliance issues.

Drag on portfolio component doesn't update the bordered button

The border updates on click, just not on drag.

Use generic email instead of dan's

All email links refer to the generic email ([email protected]) instead of [email protected].

Replace GitHub links with icons?

Should we replace the GitHub links in the header and footer with icons?

WCAG: Assess application manually

A WCAG report on the state of compliance is updated to reflect a manual assessment of the application.

Align view demo buttons

These unaligned buttons make me antsy.

Marketing site: RAMP Demos feedback

"1. Map extents on my maximized 1080 desktop are zoomed out to maximum, which presents an awkward map with lots of whitespace (first snip). Zoomed in just once and re-centered (second snip), the basemap comes out in full colour and the data looks more spread out. This applies to pretty much all the main page maps, just need to figure out the new extent to start the map at and overwrite in the various configs. "

Create language toggle link in the upper right

The language of the page can be switched through clicking the link at the top of the page.

Test on mobile resolutions/devices

The application is tested thoroughly in other resolutions and contexts that are not Windows PC based. Issues are flagged for remediation if issues exist on popular devices or resolutions.

WCAG: Assess application using automated tools

A WCAG report on the state of compliance is updated to reflect results from an automated assessment of the application.

WCAG: add alt-text to images

To comply with WCAG 1.1.1 Non-text Content.

Need text alternative to pictures (alt-text w/ the descriptions for the screenshots of ramp)

Fix "Get in Touch" button at the top

The text in the "Get in Touch" button does not shift around and looks the same at all resolutions.

Marketing Site: Storylines feedback

The Storylines demo – I like the form of it, but the content can be confusing… the right-side image of the first slide is a screenshot of another Storylines product which feels a bit recursive. Maybe just some generic graphic of a presentation or something? https://unsplash.com/s/photos/presentation?license=free

a. The image slideshow could maybe feature images that aren’t pie charts – since one could/should use Storylines to create interactive pie charts instead of hosting static images.
b. The “Dynamic Slide” is a nice demonstration of the capabilities but I feel like the text of it could be cleaned up to explain just what’s actually going on (e.g. “Dynamic Slide” -> “Control your message with dynamic and interactive slides” or something like that. I can gussy this up later, but it will need to wait awhile. We'll update this when we have metrics. That way we can send everything off for translation at once.
c. I don’t know if it’s worth drawing a border around the whole area of the Storylines demo, just to “contain” it more as an embedded product/option?

Create an embedded contact form at the bottom of the page.

The contact form should include two fields

• Email
• Text box for details (Tell us about your project!)?

The Get in Touch and Request Demo buttons should navigate the user to the contact form.

Upon submission, the form should send an email with the form contents to [email protected]

Create space in demo/sample pages for a descriptive blurb

A space above the map and below the header where a paragraph of text and links describing the functionality of RAMP and the datasets demonstrated can be provided.

Better default text for request email

The default email text contains a basic list of things a user might request from us, and info we will need from them.

Fix "Mobile-friendly" graphic to be much smaller

The graphic for the mobile-friendly feature is cropped/shrunk to the same height as the other feature graphics.

Highlight the transition to RAMP 4

Now that the power of RAMP 4 is ready to be unleashed to the web mappers we’ll need to update the coming soon section. This section would become interactive, with each panel being selectable for more information.

• This section should be moved towards the top of the page.
• Highlight each panel on hover
• Once a panel is selected, render more details showcasing the improvements

Each section would have examples or metrics that define what has been improved over RAMP 3. TODO: We would need the team to compile these metrics and brainstorm how they are best displayed.

Update the storylines portfolio link to use the Priority Places for Species at Risk storyline

The description will need to be sent off for translation, so we'll update this once we're ready to deploy the metrics.

Send rolled up text for translation

A complete spreadsheet of English strings and context as necessary are provided to translation services.

Allow View Demo button to point to external applications

The current behaviour of the application allows you to create a new "feature" to display on the front page, with its associated title, image, alt tag, description, and View Demo button. The View Demo button currently will automatically load a web page with a RAMP configuration named for the feature label.

This task is to permit a URL to be applied to the "View Demo" button instead, so we can link to demos that are otherwise hosted elsewhere. In the case of StoryRAMP, the demo link we wish to use for now is https://ecdc-webmappingappsstoryramp-asv.azurewebsites.net/#/en/f6f7baf4-cccb-4521-a037-b4691b0f0d49 (https://ecdc-webmappingappsstoryramp-asv.azurewebsites.net/#/fr/f6f7baf4-cccb-4521-a037-b4691b0f0d49 in French).

Update all of the demos to include both RAMP 3 and RAMP 4

This change intends to allow visitors to compare RAMP 3 and RAMP 4 with the hope that it will incentivize anyone using RAMP 3 to upgrade. Visitors will be able to switch between each version using either a button or a toggle.

Ideally we'll embed instances of RAMP directly on the main page. However if this isn't possible, or not performant this should be done for each demo page.

WCAG: Change lang attribute on language change

To comply with WCAG 3.1.1 Language of Page.

Change lang attr in html tag (the root). Also make sure RAMP changes language

Update RAMP to latest version

Required for #55

May resolve an issue with the storylines plugin

RAMP demo memory optimization

There may be some hints within storylines, as adding the plugin and having two maps rendered didn't have a huge effect. The site used about 170mb before our changes, and with storylines its at 250mb. Assuming the plugin itself requires some of that, the maps don't seem to require as much memory.