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
Legacy authentication	If set to true, will revert to a REST API-based authentication setup	legacyAuthentication: true	ngLegacyAuthentication=true	boolean
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). Using this option will automatically activate the legacy authentication.	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). 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
Extent	Will adjust the map to fit the extent. (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
Rotation control	By default, the map rotation control is visible, but can be hidden with this parameter. (API doc). This option is overridden by the extent option	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: 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). This option is overridden by the extent option	map: { zoom: 5.3456 }	-	number

JMap NG App

The following table presents the list of JMap NG App's startup options:

Option	Description	JavaScript Example	URL Parameter Example	Value
Div container id	You can choose the div where the application (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 application extensions . See the examples section for details. (api doc)	application: { extensions: [ … ] }	-	json / javascript
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
App loaded callback	You can provide JS code that will be executed when the app is ready. (api doc)	application: { onAppLoad: () => console.log(“App is loaded“), … }	-	javascript function() => void
App unloaded callback	You can provide JS code that will be executed when the app is unloaded. (api doc)	application: { onAppUnload: () => console.log(“App is not loaded anymore“), … }	-	javascript function() => void
Display a panel	Will show the specified panel at startup. (api doc)	application: { panel: “query“, … }	ngPanel= selection	"layer" | "selection" | "measure" | "mapcontext"| "print" | "user" | "query" | "annotation" | "geometry"
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
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
Theme	Will set the theme, dark or light. (api doc)	application: { theme: “light“, … }	ngTheme=light	light | dark