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

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

Organization id

organizationId: "my-organization-id"

organizationId="my-organization-id"

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: “https://api.jmapcloud.io/“

-

string

Session refresh token

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

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

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

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

Dernière mise à jour

K2 Geospatial 2023