Mapworks Auth Example (Angular)

Developers
, ,
1

Mapworks Auth Example (Angular)

Introduction

This example illustrates utilising Mapworks Auth with an Angular web application.

The specific use case includes accessing auth via Mapworks, and requiring sign-in prior to the use of a Mapworks map component (via protected Angular routes).

Please see GitHub - mapworksio/mapworks-auth-angular-example: Mapworks Auth Example (Angular).

The example works locally and in CodeSandbox (though be aware that if you fork it you will need to update the app configuration as at least the return to URL will need to change).

Specific details for the Mapworks org/app/map used are in a section below.

As noted in the README, you can use the MapworksMapService code (copy into your project - we will provide via npm package later) as per the example.

Running in CodeSandbox

This example may be run in CodeSandbox:

Mapworks Community

If you have any questions, please feel free to join the discussion on this
Mapworks Community discussion topic.

Application configuration

As configured, this example web application makes use of the following Mapworks resources:

The application configuration (in src/app/app.config.ts) is as follows:

const mapworksOrgUrl = 'https://app.mapworks.io';
const client_id = '3mvor82v8k8f6nbi4f8bpihsom';
const mapRef = 'map-osm-public';

Notes:

  1. This application has been configured in the to operation when running locally
    (http://localhost:4200) and when running on CodeSandbox (link above).

  2. If the CodeSandbox application is forked (and as a result, will be accessed on a
    different web application URL) the Mapworks Application client_id will need to
    updated to an application configured in your Mapworks Organisation.

Using the Mapworks code

The src/app/mapworks subfolder may be copied and used directly in web application code.

  • src/app/mapworks - this contains the MapworksMapService class used to manage auth and map initialisation.
  • src/main.ts - contains code to handle the OAuth2/OIDC callback used as part of the sign in process (this will need to be incorporated or use login-callback.html)
  • src/assets/login-callback.html - this handles the OAuth2/OIDC callback used as part of the sign in process (preferred in non-CodeSandbox environments)

Note that due to constraints of the CodeSandbox environment, the OAuth2/OIDC callback is handled in src/main.ts - for non-CodeSandbox you are probably better utilising the static login-callback.html (app-config.ts needs to be updated to reflect this).

Other Examples

Please also see the following related examples:

  1. Mapworks Auth Example - User Sign In before loading map
  2. Mapworks Mouseover, Mouse-click and Zoom-to Example (Angular)
1 Like