Mapworks Auth Example - User Sign In before loading map

Developers
,
1

Mapworks Auth Example - User Sign In before loading map

Introduction

This example illustrates utilising Mapworks Auth within a web application. It allows sign-in prior to the initialisation of the map.

Please see GitHub - mapworksio/mapworks-auth-before-loading-map-example: Mapworks Auth Example - User Sign In before loading map.

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).

The map is viewable as guest but you can login to test as well. Specific details for the Mapworks org/app/map used:

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:

Application configuration

The application configuration (in src/index) 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:1234) 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.

Running locally

For a local DEV server:

npm run start

Navigate to http://localhost:1234. The application will automatically reload if you change any of the source files.

Build

Build the project as follows:

npm run build

The build artifacts will be stored in the dist/ directory.

Using the code

The src/mapworks and public subfolders may be copied and used directly in web application code.

  • src/mapworks - this contains the MapworksMapService class used to manage auth and map initialisation.
  • public - this handles the OAuth2/OIDC callback used as part of the sign in process

Other Examples

Please also see the following related examples:

  1. Mapworks Auth Example (Angular)
  2. Mapworks Mouseover, Mouse-click and Zoom-to Example (Angular)
1 Like
Mapworks Mouseover, Mouse-click and Zoom-to Example (Angular)
Mapworks Auth Example (Angular)