Angular demo client guide

Illustration on a dark street grid: a TypeScript file icon linked by a dashed lime line to a browser window of the JOpt.TourOptimizer demo, with panels to pick an example and start the run and a map with blue and red markers on a route

This guide describes the Angular demo client, a reference UI in TypeScript that runs JOpt.TourOptimizer through its REST API, from the choice of a scenario to the routes on a map. It is for developers who build a UI or an integration on the REST API and want a working client to start from. The demo needs a TourOptimizer REST endpoint: the sandbox quickstart has the Docker command for a local one, and the Angular demo client page is the short entry to the live demo.

What it does

The demo shows an end-to-end flow:

  • Scenario selection: select one of the example scenarios.
  • Optimization run: start it through the REST API with "Start Optimization".
  • Result access: open the latest result with "Show latest result".
  • Map visualization: the nodes, the resources and the resulting routes as polylines on a map.
  • Basic parameter tuning: weights and parameters in the UI.
The JOpt.TourOptimizer demo with the example selection, the buttons Start Optimization and Show latest result, and the routes of two resources on a map of Germany
The demo shows only a small part of the JOpt features, on purpose. JOpt.TourOptimizer supports many advanced constraints and expert extensions that this UI does not show. As a template, the demo shows integration patterns that you can reuse in your own product.

When to use it

Use the demo to see the flow from a browser UI through the REST API of JOpt.TourOptimizer to a result, before you build your own client. Use its repository as a template for that client: its models are generated from the OpenAPI schema of the server, so requests and responses are typed.

How to use it

Open the live demo

The live demo and StackBlitz utilizes our open optimization endpoint:

Use a self-hosted endpoint for your tests. DNA Evolutions may block the IP address of a client that overuses the open endpoint.

Run it against your own endpoint

The Angular app is a client: you provide a TourOptimizer REST endpoint. With the Docker image dnaevolutions/jopt_demoapplication:latest, set its address with JOPT_SWAGGER_HOST and JOPT_SWAGGER_PORT; with ng serve, set host and port in src/assets/env.js. The REST server page describes a self-hosted endpoint in Docker.

The demo runs in the browser, and the browser calls the endpoint. For a TourOptimizer on your host, the README's command for the Docker image sets JOPT_SWAGGER_HOST to http://localhost and JOPT_SWAGGER_PORT to 8081.

How the client talks to JOpt.TourOptimizer

  1. The UI builds a request payload: the snapshot and the extension settings.
  2. The UI calls the TourOptimizer REST endpoints, as the OpenAPI schema defines them.
  3. The UI receives progress and status, depending on the endpoints it uses.
  4. The UI shows the results and KPIs and draws the routes on the map.

OpenAPI client generation in TypeScript

The repository generates its TypeScript and Angular models from the OpenAPI schema of the server; the section "Regenerate TypeScript models" of its README has the steps. Tools and further reading:

Use the demo as a template

  1. Replace the example scenarios with your domain model (orders, jobs, resources, depots).
  2. Add authentication and tenant handling, if you need them.
  3. Extend the UI controls to expose the constraints you need.
  4. Keep the OpenAPI generation pipeline, so that the models follow the schema of the backend.

Limits

The demo is not a complete UI for the platform. Among others, it does not expose:

  • rich constraint combinations (skills with levels, territories and zone governance, relations, PND variants);
  • performance features (performance mode, clustering strategies);
  • custom layers (OpenAssessor and custom rules);
  • full reporting, auditing and diagnostics workflows.

For the whole feature set, see the feature list and the examples by level, starting with the basic examples.

Related examples

Related pages

Added: 2026-03-06 (JOpt core 7.5.3-j17) | Last updated: 2026-10-23

License guide

The element limits of JOpt without a license and with the free licenses, the license JSON, and how to set a license in Java and in a JOpt.TourOptimizer request

AutoFilter

How the AutoFilter removes nodes that keep causing violations during an optimization run, with its properties, node settings and filter events.