Skip to main content

Concept of apps

GeoApps is build around Apps. With these apps, custom representations of information can be created, by just configuring the app or by building a custom app. To start building your own custom apps, it is important to have a basic understanding of the terminology and structure that is used within GeoApps for these apps.

Introduction

Before it is possible to configure an app with the GeoApps Manager, the app need to be defined and imported. After importing the app, it will be available within the chosen GeoApps environment, where admin's can configure the app through the App Manager. Every app can be constructed with plain html, css and javascript, and can communicate with GeoApps by using the available API's. Also, any additional package can be imported through for instance NPM or yarn.

Structure of an app

An GeoApps app consists of three major elements:

  • App: the app itself is the base of the presentation within the UI. The app can be packed in an app package, which can be imported within GeoApps;
  • Screens: an app consists of one or more screens. When only a single representation is used, the app can have a single screen (like the GeoApps Viewer). If an app has multiple screens (like the MapTour), the user is allowed to add and remove screens from the app manager;
  • Blocks: within every screen, slots (a type of placeholder) can be defined where user-configured information is added. This user-configured information are called blocks, and are also defined through the app manager. Samples of these blocks are text, image and map.

Note: Blocks are currently limited available within GeoApps. Within a future update, it is also possible to build and import blocks, in an identical way that apps are build.

Building apps

To get started at building custom apps, a sample app can be downloaded from <github url>. This app can be used as a basic app and be modified with custom code. In addition, the tutorial under 'Build a custom app' in this documentation can be followed to follow the step-by-step tutorial.