Startup Options

Startup options let you customize how JMap Cloud NG starts.

They can be provided in two ways:

as URL parameters, when an option supports it;
as a JavaScript object assigned to window.JMAP_OPTIONS.

Most URL parameters use the ng prefix to avoid conflicts with parameters used by the host page.

Below are examples of the URL and JavaScript object forms:

https://ng.jmapcloud.io?ngProjectId=57ec1ca5-ddb8-4c71-ace4-0571129b017c

<script type="text/javascript">
    window.JMAP_OPTIONS = {
    projectId: "57ec1ca5-ddb8-4c71-ace4-0571129b017c",
    restBaseUrl: "https://api.jmapcloud.io",
    ui: "minimal",
    anonymous: true,
    map: {
      zoom: 9.757829447748511,
      center: {
        x: -73.60243569463414,
        y: 45.504533166207324
      },
      scaleControlVisible: true,
      scaleControlPosition: "top-right"
    }
  }
</script>

Startup options Structure

JMAP_OPTIONS is organized in three groups.

1. Base Options

Base options are placed directly at the root of JMAP_OPTIONS.

They control startup behaviour shared by both minimal UI and full UI modes: project selection, authentication, locale, extensions, geolocation, and UI mode.

Example:

<script type="text/javascript">
    window.JMAP_OPTIONS = {
    restBaseUrl: "https://api.jmapcloud.io",
    ui: "minimal",
    projectId: "my-project-id",
    anonymous: true,
    locale: "en"
  }
</script>

Option

Description

JavaScript Example

URL Parameter Example

Value

Rest API URL

Mandatory. Base URL used by JMap Cloud NG to call the JMap Cloud REST API. (API doc).This option is required unless the application is running in an environment where the REST API URL is provided by the hosting page or deployment configuration.

restBaseUrl: “https://api.jmapcloud.io/“

string

minimal UI ready callback

This function is triggered only once at startup, when the JMap Cloud NG minimal UI API is ready. (API doc)

onReady: () => console.log("NG minimal UI is ready")

javascript function() => void

Login as anonymous user

If true, NG will try to log in as an anonymous user. (API doc)

anonymous: true

ngAnonymous=true

true | false

Disable project change

If true, changing project (after one has been loaded) will be disabled. (API doc)

disableProjectChange: true

ngDisableProjectChange= true

true | false

Extensions

You can provide your own minimal UI mode extensions. (API doc)

{ extensions: [ … ] }

json / javascript

Extensions overrides

During the development of a project extension, you can use this option to load your local code instead of the project's extension's jsUrl. (API doc)

{ extensionsUrlOverride: [ … ] }

json

Enable/Disable Geolocation

By default, the geolocation is activated (if the browser supports it). You can disable the geolocation by using this option. (API doc)

geolocationEnabled: false

ngGeolocationEnabled =false

true | false

Legacy authentication

If set to true, will revert to a REST API-based authentication setup (API doc)

legacyAuthentication: true

ngLegacyAuthentication=true

boolean

Project thumbnails

If true will load all project thumbnails (base 64 images) asynchronously. This has currently no effect in JMap Cloud (API doc)

loadProjectThumbnails: true

boolean

Session language

If set to any of the locales supported by JMap NG, it will define the session locale, bypassing browser or user-defined locale. (API doc)

locale: “en“

ngLocale=fr

string

Organization id

The JMap Cloud organization id. Used when passing a session refresh token (see below). (API doc)

organizationId: "my-organization-id"

organizationId="my-organization-id"

string

Project id

Id of the JMap project to open. (API doc)

projectId: "57ec1ca5-ddb8-4c71-ace4-0571129b017c"

ngProjectId=57ec1ca5-ddb8-4c71-ace4-0571129b017c

string

Project name

Name of the JMap project to open. If both a project id and a project name are provided, project id will be used. (API doc)

projectName: “World“

ngProjectName=The world url encoded => ngProjectName=World

string

Projects loaded callback

You can provide some JS code to be executed when all project definitions have been loaded from the backend. (API doc)

onProjectsChange: (params) => console.log( params.projects )

javascript function() => void

Session refresh token

A JMap Cloud refresh token used to initiate a session. If valid, will be used to identify the user. (API doc). Using this option will automatically activate the legacy authentication.

token: “v1.MRq[.....]Rehef72YWws“

ngToken=v1.MRq[.....]Rehef72YWws

string

UI mode

Selects how much of the JMap Cloud NG interface is loaded.(API doc)

ui: "minimal"

ngUi=minimal

string "minimal"|"full"

2. Map Options

Map options are placed under the map object.

They control the initial map state and map controls. These options apply in both minimal UI and full UI modes.

Example:

<script type="text/javascript">
    window.JMAP_OPTIONS = {
    restBaseUrl: "https://api.jmapcloud.io",
    map: {
      zoom: 10,
      center: {
        x: -73.6,
        y: 45.5
      },
      scaleControlVisible: false
    }
  }
</script>

Option

Description

JavaScript Example

URL Parameter Example

Value

Map initial bearing

The initial bearing of the map (counterclockwise rotation). (API doc). This option is overridden by the extent option

map: { bearing: 90 }

ngBearing=90

number

Center

Will center the map on the specified point. (API doc). This option is overridden by the extent option

map: { center: { x: 12.4, y: 45.34 } }

json

Html container id

You can place the map in the HTML div of your choice by identifying the div in the map parameter. If not set, a div is appended in the body root. (API doc)

map: { containerId: “my-div“ }

string

Initial Extent

Will adjust the map to fit the extent when it first loads. (sw = bbox south-west, ne = bbox north-east) (API doc). This option has precedence over the following options: bearing, center, rotation and zoom

map: { extent: { sw: { x: 12.4, y: 45.34 }, ne: { x: 24.4, y: 55.34} } }

ngExtent=12.48|45.34 |24.4|55.34 url encoded => ngExtent=12.48%7C45.34 %7C24.4%7C55.34

json | string

Initial extent control visibility

Controls whether the Initial Extent map control is visible. (API doc)

map: { initialExtentControlVisible: false }

ngInitialExtentControlVisible=false

true | false

Maximum Extent

Will constrain the map to the specified extent(sw = bbox south-west, ne = bbox north-east) (API doc).

map: { maximumExtent: { sw: { x: 12.4, y: 45.34 }, ne: { x: 24.4, y: 55.34} } }

ngMaximumExtent=12.48|45.34 |24.4|55.34 url encoded => ngMaximumExtent=12.48%7C45.34 %7C24.4%7C55.34

json | string

Rotation control

By default, the map rotation control is visible, but can be hidden with this parameter. (API doc)

map: { mapRotation ControlVisible: true }

ngMapRotationControl Visible=false

true | false

Google Maps Api Key

This option is not yet available for JMap Cloud.

If no Google Maps API key is set in the JMap Cloud or JMap Server configuration, you can provide the API key as a JS parameter. The Google Maps API key is not mandatory, but if you don't provide one you won't have access to the Google Maps basemaps. (API doc)

map: { googleMapsApiKey: “Bse….32k“ }

string

Mapbox token

If no Mapbox access token is set in the JMap Cloud or JMap Server configuration, you can provide the token as a JS parameter. The Mapbox token is not mandatory, but if you don't provide one you won't have access to the Mapbox basemaps. (API doc)

map: { mapboxToken: “xgb….4f5“ }

string

Navigation history control visibility

By default, the navigation history control is visible, but can be hidden with this parameter. (API doc)

map: { navigationHistory ControlVisible: true }

ngNavigationHistory ControlVisible=true

true | false

Map ready callback

This function is triggered only once, the first time the map is loaded. (API doc)

map: { onStartupMapReadyFn: map => { console.log(“The map is ready“, map) } }

javascript function(map: mapboxgl.Map) => void

Map initial rotation

The initial rotation of the map (clockwise rotation). (API doc)

map: { rotation: 45 }

ngRotation=45

number

Scale-control position

The scale control position on the map. (API doc)

map: { scaleControlPosition: “bottom-right“ }

“top-left” | “top-right” | “bottom-right” | “bottom-left”

Scale-control unit

The scale control unit. (API doc)

map: { scaleControlUnit: “imperial“ }

imperial | metric | nautical

Scale-control visibility

By default, the scale control is visible, but can be hidden with this parameter. (API doc)

map: { scaleControlVisible: true }

ngScaleControlVisible=false

true | false

Map Info-control visibility

By default, the Map Info control is visible, but can be hidden with this parameter. (API doc)

map: { mapInfoControlVisible: true }

ngMapInfoControlVisible=false

true | false

Terrain-control visibility

By default, the Terrain control is visible, but can be hidden with this parameter. (API doc)

map: { terrainControlVisible: true }

ngTerrainControlVisible=false

true | false

Search

When the map is loaded, will execute a search by attribute(s) on the layer, and zoom to the matching features. You can search using multiple attribute values by passing an array in the javascript form, or by passing trailing values in the URL form. An optional parameter lets you specify to display a MouseOver popup on the result feature. This popup will only be displayed if the showMapPopup parameter is true, and if there is only one result to the search. In the URL form, showMapPopup must be passed as a keyword, and at the beginning of the query string (API doc)

map:{ search: { layerId: "a23bb5ea-2db8-4742-be92-cf2985ff9aeb", attributeName: “PEC“, attributeValue: [“RT 201“, "RT 202"], showMapPopup: true } }

ngSearch=showMapPopup |a23bb5ea-2db8-4742-be92-cf2985ff9aeb|PEC|RT 201|RT 202 url encoded => ngSearch=showMapPopup%7C2a23bb5ea-2db8-4742-be92-cf2985ff9aeb%7CPEC%7CRT%20201%7CRT%20202

json | string

Zoom level

The initial zoom level of the map. (API doc). This option is overridden by the extent option

map: { zoom: 5.3456 }

number

3. Full UI Options

Full UI options are placed under the application object.

They only apply when JMap Cloud NG runs with the full interface, either explicitly with ui: "full" or by using the default mode.

Example:

<script type="text/javascript">
  window.JMAP_OPTIONS = {
    ui: "full",
    restBaseUrl: "https://api.jmapcloud.io",
    application: {
      containerId: "my-app",
      panel: "selection",
      sidePanelInitialVisibility: false
    }
  }
</script>

Option

Description

JavaScript Example

URL Parameter Example

Value

Div container id

You can choose the div where the Full UI (and the map) will be rendered in your page. (api doc)

application: { containerId: “my-app“, … }

string

Disable panels

Will disable (and hide) the specified panels. Specifying "all" will hide all panels and remove the side menu (api doc)

application: { disabledPanels: [ “print“, “mapcontext“ ], … }

ngDisabledPanels= print,mapcontext

Array | string

Extensions

You can provide your own Full UI extensions . See the examples section for details. (api doc)

application: { extensions: [ … ] }

json / javascript

Geocoding control visibility

By default, the Geocoding control is visible, but can be hidden with this parameter. (API doc)

application: { geocodingControlVisible: false, … }

ngGeocodingControlVisible=false

true | false

Login screen background image

You can set a custom background image for the login screen by setting an image url. This image will be displayed to the left of the JMap NG login form. (api doc). Only effective when using legacy authentication

application: { loginBackgroundImageUrl: “http://my-server/my-image“, … }

string

Logo image

You can set a custom logo image by setting an image url. The logo will be displayed above the JMap NG login form. (api doc). Only effective when using legacy authentication

application: { logoImageUrl: “http://my-server/my-image“, … }

string

Full UI loaded callback

You can provide JS code that will be executed when the full UI is ready. (api doc)

application: { onAppLoad: () => console.log(“Full UI is loaded“), … }

javascript function() => void

Full UI unloaded callback

You can provide JS code that will be executed when the full UI is unloaded. (api doc)

application: { onAppUnload: () => console.log(“Full UI is not loaded anymore“), … }

javascript function() => void

Display a panel

Will show the specified panel at startup. (api doc)

application: { panel: “query“, … }

ngPanel= selection

Project list background image

You can set a custom background image for the project list screen by setting an image url. This image will be displayed to the left of the project list. (api doc)

application: { projectBackgroundImageUrl: “http://my-server/my-image“, … }

string

Initial side panel visibility

Controls side panel initial visibility. (api doc)

application: { sidePanelInitialVisibility: false, … }

ngSidePanelInitialVisibility= false

true | false

Simple Search control visibility

By default, the Simple Search control is visible, but can be hidden with this parameter. (API doc)

application: { simpleSearchControlVisible: false, … }

ngSimpleSearchControlVisible=false

true | false

Theme

Will set the theme, dark or light. (api doc)

application: { theme: “light“, … }

ngTheme=light

light | dark

PrécédentJMap NG Developer Documentation SuivantExtensions