An overview of the Open Pioneer Trails framework

Overview

Generic portal solutions with map and GIS features are currently widespread. There is, however, also an increasing demand for focused, specialized applications that are precisely tailored to specific needs. Instead of overloaded platforms that offer a wide range of functions, many of which are not needed for the specialist processes, a customized solution is often required that focuses on the essential features.

Despite this trend towards specialization, there is still a considerable overlap in the basic features of such map-centric applications. In this blog, we want to show how we meet these requirements with the open-source framework Open Pioneer Trails (or just “Trails”). This framework offers an efficient way to develop map applications that can range from lightweight solutions based on predefined components to complex systems with custom extensions and functionalities. Trails is a collaborative endeavor of 52°North and con terra.

Though designed as a development framework, Trails provides a manifold of ready-to-use components. These components can be integrated to rapidly create new web applications. Available components range from map widgets, such as table of contents, overview map, measurement tools, search bar, to authentication and Keycloak integration. See our Showcase Application to get an overview of existing features and widgets!

Trails combines basic functionalities with state-of-the art web technologies. Extensions and application-specific components are simply developed with Typescript and React – two base technologies with which many web developers are already familiar. This makes it possible to get started quickly and implement custom projects with specialized requirements based on Trails.

The Trails framework prioritizes accessibility (a11y), such as ARIA labels and rules for improved readability, and support for assistive technologies (e.g. screen readers). Furthermore, Trails is designed to align with the a11y standard and the European Accessibility Act (EAA), a directive from the European Union, ensuring a focus on inclusive design principles. Extensive theming capabilities and internationalization (i18n) are supported as well. This enables web applications developed with Trails to adapt quickly and easily to the specific requirements of different projects and users.

All official parts of the Open Pioneer Trails project are published under the Apache 2.0 license. The permissive open-source license allows for flexible use of Trails in closed and open-source as well as commercial and non-commercial projects.

Use Cases

At 52°North, Trails has been a successful key technical solution in several projects. These projects targeted many different domains and therefore had very different requirements. A selection of these projects is briefly presented below.

I-CISK and DIRECTED are two research projects that address the topics climate change and climate change adaptation. While I-CISK aims to make climate services better available and more accessible for the public, DIRECTED focuses more on socio-economic impact and disaster risk management. A variety of applications, co-designed with local stakeholders, visualize changes and forecasts in the climate (e.g., temperature and precipitation) over time. Further applications show the impact of disasters, such as extreme weather events or floods, using simulations and model calculations. Some models are integrated into the applications via remote service execution, which makes them accessible and executable for users. Trails was very helpful in initializing and implementing the many different applications. Maps could easily be added to the applications, and ready-made widgets could be used for common functionalities, such as map navigation tools, tables of contents, and legends. The integration of OpenLayers made it possible to connect and visualize many different data formats and data services.

Volkswagen GeoNet Analysis is a toolbox that helps Volkswagen Commercial Vehicles provide data for their Automated Driving Systems. This toolbox helps identify road networks that align with the characteristics of a driving automation system’s design, such as road types, intersection complexity, or curve radii. A viewer component, which was built with Trails, enables users to visually explore road networks. You can search, highlight and select parts of the network that match certain criteria. Sub-networks are created from these selections and can be extracted or sent directly to downstream automated driving systems. Trails efficiently visualizes these networks, and users can adjust map styles on the fly.

In addition, users can directly edit the annotations of nodes and edges in the client. Changes are synchronized with the underlying database. Trails communicates with interfaces such as OGC API – Features for data retrieval.

 

PEOPLE-ECCO is another research project involving 52°North. This project addresses crucial needs expressed by Civil Society Organizations (CSOs) and Non-Governmental Organizations (NGOs) active in ecosystem conservation. The CSOs/NGOs are directly involved in the design of earth observation methodologies in their operational practices. 52°North’s role is to develop a platform that manages all technical aspects of the EO algorithm execution. The front end of this platform is a web client implemented with Trails. Users can search, manage, and execute EO Algorithms in the client. The outputs of the algorithms are displayed in the application (in a map). The Keycloak integration of the Trails framework ensures that only authenticated and authorized users are able to run the processes.

Key Technologies and Functionalities

Trails combines multiple popular web technologies and tools in a single framework. TypeScript and React are the core technologies under the hood. These technologies integrate with state-of-art tooling, such as pnpm for efficient package management and Vite for fast module bundling. Chakra UI is the UI framework of choice to enable efficient and fast creation of modern web interfaces with React. Chakra UI also adds extensive theming capabilities to the framework. Color schemes, fonts, and font sizes, for example, can be easily configured and customized globally for entire applications in one place. Format.js is used to add multi-language support to web applications implemented with Trails. Vocabularies are maintained in simple configuration files. Trails applications can be stand-alone single page applications or embedded into web pages as web components.

Concepts such as services and service injection are core Trails functionalities. Services can be used to manage global status information within an application. Service injection allows shared service instances to be used in components or other services. Trails also integrates the Reactivity API, an implementation of signals. Signals are reactive variables that automatically propagate changes to anything that depends on them. They are simpler and more efficient than traditional events and subscriptions. Signals are typically used for state management and for adjusting components dynamically to state changes.

OpenLayers forms the basis for Trails map features. The Trails Map API is a wrapper around the OpenLayers interface. It extends the data model with new, predefined layer types, for example, and simplifies the handling of the map’s state when integrating it into an application. Direct access to the OpenLayers API is still available for in-depth control if necessary. In addition to the integration of OpenLayers, Trails includes a collection of reusable basic components for map applications, including a layer switcher, layer overview, and feature selection. These basic components were developed with ARIA rules in mind to improve accessibility.

How to get started with Trails?

The Open Pioneer Trails framework is split into multiple code repositories. Each repositories is publicly accessible on GitHub.

• Starter repo: A fork of this repository typically serves as the starting point for new Trails web applications. This repository also contains the documentation and a few minimal code examples.
• OpenLayers base packages: This contains packages using OpenLayers to add maps to an application and common map widgets such as navigation tools, table of contents, legend and many more.
• Core packages: The runtime package and other central features such as the authentication packages are contained here.
• Community packages: This holds specialized packages provided and maintained by the Trails community.
• Build tools: This contains the build tooling such as the Vite plugin.

While the Trails packages are developed in shared repositories, each package is published individually on npm.js.com. Regular new releases of these packages contain improvements and updated dependencies.

The public Showcase App provides a good overview of the Open Pioneer Trails capabilities and available UI widgets. There are additional small sample applications for the OpenLayers base packages and Core packages that demonstrate the framework’s single features. The source code for all examples is part of the repositories and, in addition to documentation, serves as an introduction to the development of web applications with Trails.

How to contribute?

Open Pioneer Trails is, as the open source idea suggests, driven by the community of developers and their contributions. Contributions in the form of pull requests for improvements and new features are just as welcome as issue reports. The Contribution Guide briefly summarizes how you can best get involved in the Trails project.

We maintain a contribution board on GitHub that lists new features that have not yet been incorporated into the project. Your contributions are very welcome here!

Pull requests in the community repository are a good way to share your own ideas and specialized functionalities with the other Trails developers.

Additional Reading

• Get in Touch
• Code Repositories (Starter, Core Packages, OpenLayers Base Packages, Community, Build Tools)
• Getting Started
• User Manual
• API doc (Core Packages, OpenLayers Base Packages)
• Contribution Guide
• Showcase Application