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:
Or pass them as a JS object, through a globally scoped JS variable named JMAP_OPTIONS, like this:
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
anonymous: true
ngAnonymous=true
true | false
Default Basemap Id
defaultBasemapId: "mapbox-satellite-streets"
ngDefaultBasemapId=mapbox-satellite-streets
string
Disable Basemaps
disableBasemaps: true
ngDisableBasemaps= true
true | false
Disable project change
disableProjectChange: true
ngDisableProjectChange= true
true | false
Extensions
{ extensions: [ … ] }
-
json / javascript
Extensions overrides
{ extensionsUrlOverride: [ … ] }
-
json
Enable/Disable Geolocation
geolocationEnabled: false
ngGeolocationEnabled =false
true | false
Disable UI visibility
hideMainLayout: true
-
true | false
Session language
locale: “en“
ngLocale=fr
string
Project thumbnails
loadProjectThumbnails: true
-
boolean
Project id
projectId: 12
ngProjectId=12
number
Project name
projectName: “World“
ngProjectName=The world url encoded => ngProjectName=World
string
Projects loaded callback
onProjectsChange: (params) => console.log( params.projects )
-
javascript function() => void
Rest API URL
restBaseUrl: “http://your-server/services/rest/v2.0“
-
string
Session token
token: “123456789“
ngToken=123456789
number
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
map: { bearing: 90 }
ngBearing=90
number
Center
map: { center: { x: 12.4, y: 45.34 } }
-
json
Html container id
map: { containerId: “my-div“ }
-
string
Extent
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
map: { mapRotation ControlVisible: true }
ngMapRotationControl Visible=false
true | false
Google Maps Api Key
map: { googleMapsApiKey: “Bse….32k“ }
-
string
Mapbox token
map: { mapboxToken: “xgb….4f5“ }
-
string
Navigation history control visibility
map: { navigationHistory ControlVisible: true }
ngNavigationHistory ControlVisible=true
true | false
Map ready callback
map: { onStartupMapReadyFn: map => { console.log(“The map is ready“, map) } }
-
javascript function(map: mapboxgl.Map) => void
Map initial rotation
map: { rotation: 45 }
ngRotation=45
number
Scale-control position
map: { scaleControlPosition: “bottom-right“ }
-
“top-left” | “top-right” | “bottom-right” | “bottom-left”
Scale-control unit
map: { scaleControlUnit: “imperial“ }
-
imperial | metric | nautical
Scale-control visibility
map: { scaleControlVisible: true }
-
true | false
Search
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
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
application: { containerId: “my-app“, … }
-
string
Disable panels
application: { disabledPanels: [ “print“, “mapcontext“ ], … }
ngDisabledPanels= print,mapcontext
Array | string
Extensions
application: { extensions: [ … ] }
-
json / javascript
Login screen background image
application: { loginBackgroundImageUrl: “http://my-server/my-image“, … }
-
string
Logo image
application: { logoImageUrl: “http://my-server/my-image“, … }
-
string
App loaded callback
application: { onAppLoad: () => console.log(“App is loaded“), … }
-
javascript function() => void
App unloaded callback
application: { onAppUnload: () => console.log(“App is not loaded anymore“), … }
-
javascript function() => void
Display a panel
application: { panel: “query“, … }
ngPanel= selection
"layer" | "selection" | "measure" | "mapcontext"| "print" | "user" | "query" | "annotation" | "geometry"
Project list background image
application: { projectBackgroundImageUrl: “http://my-server/my-image“, … }
-
string
Initial side panel visibility
application: { sidePanelInitialVisibility: false, … }
ngSidePanelInitialVisibility= false
true | false
Theme
application: { theme: “light“, … }
ngTheme=light
light | dark
Dernière mise à jour