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=36
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: 1,
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 |
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. Not used for JMap Cloud. (api doc) | restBaseUrl: “http://your-server/services/rest/v2.0“ | - | string |
Session token | A JMap session token (aka sessionId). If valid, will be used to identify the user. Not used for JMap Cloud. (api doc) | 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 | 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 |
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 (api doc). An optional parameter lets you specify to display a MouseOver popup on the result feature. This popup wil 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 | 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 |
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. (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) | 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) | 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 |
Theme | Will set the theme, dark or light. (api doc) | application: { theme: “light“, … } | ngTheme=light | light | dark |