JApplicationOptions

Hierarchy

JApplicationOptions

Index

Properties

Optional containerId

containerId: undefined | string

When the application start it will create or use an existing div container in which the app will be inserted into.

All application dom elements will be inserted inside this div.

By default the div container id is "jmap-app", but you can set the id of your choice like that :

<html>
  ...
  <body>
    <div id="my-custom-container-id"></div>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          containerId: "my-custom-container-id"
        }
      }
    </script>
    ...
 </body>
</html>

In the above example the application will be inserted in the div having "my-custom-container-id" as id. You need to set the width and the height of this div by yourself.

If no container is found in the DOM with the specified id, JMap Application will create and append it automatically in the body element of the web page.

Optional disabledPanels

disabledPanels: string[]

The application have multiple panels available by default : "layer", "selection", "measure", "mapcontext", "print", "user", "query", "annotation".

But you can tell the JMap application to disabled some panels. If a panel is disabled it will disappear on the left menu.

The disabledPanels parameter is an array with the panel ids you want to be disabled.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          disabledPanels: [ "measure", "print" ],
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional extensions

extensions: JAppExtension[]

You can provide your own application extensions.

This mechanism offer a way to add your own panel, map interactor, redux store data, etc ...

You can fully customize the JMap application with your own code, written with your favourite dev tools.

Optional loginBackgroundImageUrl

loginBackgroundImageUrl: undefined | string

Set a custom application background login image, by default the JMap background is displayed. Background login image is used for login screen.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          loginBackgroundImageUrl: "https://images.pexels.com/photos/1227520/pexels-photo-1227520.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional logoImageUrl

logoImageUrl: undefined | string

Set a custom application logo, by default the JMap logo is displayed.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          logoImageUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Atari_logo.svg/640px-Atari_logo.svg.png",
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional onAppLoad

onAppLoad: undefined | function

If provided this function will be processed each time the application is ready :

A valid user session is set
A project is selected
The main menu is rendered

It could be called multiple times, if the user change the project, or the user logout and login.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          onAppLoad: () => console.log("App is ready !"),
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional onAppUnload

onAppUnload: undefined | function

If provided this function will be processed each time the application is not loaded anymore :

User session token become invalid
Project is changed and app is loading the new one

It could be called multiple times.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          onAppUnload: () => console.log("App is not ready anymore !"),
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional panel

panel: undefined | string

By default the active panel (the one displayed), is the "layer" panel.

Standard application panels ids are : "layer", "selection", "measure", "mapcontext", "print", "user", "query", "annotation".

But if panel is defined, it will display the corresponding panel on the screen.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          panel: "project",
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional projectBackgroundImageUrl

projectBackgroundImageUrl: undefined | string

Set a custom application background project image, by default the JMap background is displayed. Background project image is used for projects screen.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          projectBackgroundImageUrl: "https://images.pexels.com/photos/1227520/pexels-photo-1227520.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional sidePanelInitialVisibility

sidePanelInitialVisibility: undefined | false | true

Controls the side panel default visibility state.

The JMap NG side panel is open by default when the application starts, but you can change this behaviour by using this option.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          sidePanelInitialVisibility: false, // this will initially hide the panel
          ...
        }
      }
    </script>
    ...
  </body>
</html>

Optional theme

theme: "dark" | "light"

Set the UI theme as dark or light.

<html>
  ...
  <body>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        ...
        application: {
          theme: "dark",
          ...
        }
      }
    </script>
    ...
  </body>
</html>