Startup Options

You can provide startup options to the JMap NG Core library or the JMap NG App.

Those options let you customize the behaviour of JMap NG at startup.

You can pass those options as URL parameters:

https://jmapdoc.jmaponline.net/services/ng/?ngProjectId=57ec1ca5-ddb8-4c71-ace4-0571129b017c

Or pass them as a JS object, through a globally scoped JS variable named JMAP_OPTIONS, like this:

<script type="text/javascript">
    window.JMAP_OPTIONS = {
    projectId: "57ec1ca5-ddb8-4c71-ace4-0571129b017c",
    restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
    anonymous: true,
    map: {
      containerId: "my-custom-map",
      zoom: 9.757829447748511,
      center: {
        x: -73.60243569463414,
        y: 45.504533166207324
      },
      scaleControlVisible: true,
      scaleControlPosition: "top-right"
    }
  }
</script>

All options are available as JS parameters, and some are also available as URL parameters. All URL query parameters are prefixed with "ng", to avoid naming collisions with eventual third-party query parameters (especially true if JMap NG is embeded in a div for instance).

JMap NG Core

The following tables present the list of JMap NG Core library's startup options:

Core options

Option

Description

JavaScript Example

URL Parameter Example

Value

Login as anonymous user

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

anonymous: true

ngAnonymous=true

true | false

Default Basemap Id

If set, will use the basemap id as default basemap when loading a project. Using "none" will disable any default basemap.(API doc)

defaultBasemapId: "mapbox-satellite-streets"

ngDefaultBasemapId=mapbox-satellite-streets

string

Disable Basemaps

If true, no basemap will be available/displayed. In JMap NG App, no basemap panel will be displayed in the left panel. (API doc)

disableBasemaps: true

ngDisableBasemaps= 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 Core 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

Disable UI visibility

If set to true, NG Core will not display a basic UI providing loading progress information, a login form and a project list. By default, this option is disabled in NG App. (API doc)

hideMainLayout: true

-

true | false

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 thumbnails

If true will load all project thumbnails (base 64 images) asynchronously. (API doc)

loadProjectThumbnails: true

-

boolean

Project id

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

projectId: 12

ngProjectId=12

number

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

Rest API URL

The Rest API URL of your JMap Server instance. (API doc)

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

-

string

Session refresh token

A JMap Cloud refresh token used to initiate a session. If valid, will be used to identify the user. (API doc)

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

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

string

Core Map options

Map options are gathered in a "map" json object in the javascript configuration.

Option

Description

JavaScript Example

URL Parameter Example

Value

Map initial bearing

The initial bearing of the map (counterclockwise rotation). (API doc)

map: { bearing: 90 }

ngBearing=90

number

Center

Will center the map on the specified point. (API doc)

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

Extent

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

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

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 }

-

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: 2, attributeName: “PEC“, attributeValue: [“RT 201“, "RT 202"], showMapPopup: true } }

ngSearch=showMapPopup |2|PEC|RT 201|RT 202 url encoded => ngSearch=showMapPopup %7C2%7CPEC %7CRT%20201 %7CRT%20202

json | string

Zoom level

The initial zoom level of the map. (API doc)

map: { zoom: 5.3456 }

-

number

Dernière mise à jour

K2 Geospatial 2023