Skip to content

Build your own App

The best way to build your own ARLAS Exploration based Web Application is to look at the way the ARLAS Web User Interface (ARLAS wui) is organized.

The main idea behind an ARLAS Web User Interface is the collaborative aspect of the search/visualization functions. The ARLAS solution offers a set of libraries to ease the developpment of such Web User Interface.

ARLAS Web User Interface

The ARLAS Web User Interface is based on Angular and relies on a set of ARLAS Exploration libraries:

  • ARLAS api client is the API client for using the ARLAS Server REST Services.
  • ARLAS web core is the coordination framework for implementing a collaborative search.
  • ARLAS contributors are the classes for contributing in a collaborative search. Each contributor provides the functions for retrieving data matching a set of graphical representation criteria. They are all monitored by ARLAS web core which make them contribute collaboratively.
  • ARLAS web components are the highly interactive graphical components (charts, map). Those are Angular Components.
  • ARLAS wui toolkit (AWT) is a library for building an Angular application with the following features:
  • configurable with a JSON file;
  • automatically creates the contributors and components, based on the configuration file;
  • has a Collaborative Search Service;
  • the state of the application (collaborative search) is serialized in the URL;
  • in an entry point for using the ARLAS Components
  • ARLAS wui an application that wires all the libraries above using the main Arlas-web-components.

ARLAS wui structure

Your App

Before starting, a running ARLAS Server is required. See the compatibility rules to fetch the suitable libraries.

To build your own cartocentric ARLAS Exploration application, you will need to set up an Angular application and setup the basics:

  • npm install arlas-wui-toolkit --save
  • import the ArlasToolKitModule in your src/app/app.module.ts module
  • add <arlas-tool-root></arlas-tool-root> within your src/app/app.component.html file
  • add a map, a full text search and some other components
  • customize the style of the application with the css files (src/app/app.component.css and src/styles.css)

Your app structure

Of course, you can implement your own contributors and components.

The libraries are available on npmjs.com and GitHub:

Library Source
arlas-api source code
arlas-web-core source code
arlas-web-contributors source code
arlas-web-components source code
arlas-wui-toolkit source code
arlas-d3 source code
arlas-wui source code

Note

Explore the ARLAS wui source code repository to understand more in details how to build your own application by using the ARLAS Exploration solution.

Reference guide

The reference guide documents:

  • the core library: it includes the CollaborativesearchService, the Contributor interface and the ConfigService
  • the contributors library: it packages the various contributors, meaning the logic for contributing in a collaborative search and for feeding analytic components with data
  • the components library: it packages the interactive Analytic Web Components. The reference guide includes the classes for styling the rendering of the components