Optional containerOptional disabledThe application have multiple panels available by default : "layer", "selection", "measure", "mapcontext", "print", "user", "query", "annotation".
But you can tell JMap Cloud NG 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 extensionsYou 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 JMap Cloud NG with your own code, written with your favourite dev tools.
Optional loginSet 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 logoSet 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 onIf provided this function will be processed each time the application is ready :
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 onIf provided this function will be processed each time the application is not loaded anymore :
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 panelBy 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 projectSet 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 sideControls the side panel default visibility state.
The JMap Cloud 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 themeSet the UI theme as dark or light.
<html>
...
<body>
<script type="text/javascript">
window.JMAP_OPTIONS = {
...
application: {
theme: "dark",
...
}
}
</script>
...
</body>
</html>
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 "jmapcloud-ng", but you can set the id of your choice like that :
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 Cloud NG will create and append it automatically in the body element of the web page.