JMap Cloud is a geospatial platform dedicated to application developers who want to easily add cartographic features to their software.

JMap Cloud offers very efficient cloud services and powerful APIs to integrate geospatial data from different formats and systems in order to produce rich interactive maps that facilitate decision-making. The platform implements the latest trends and standards in the geospatial field.

The following figure illustrates the JMap Cloud ecosystem, with its microservices and relations with the systems in place in an organization as well as the applications that allow you to interface with users.

JMap Cloud Portal is the web tool that allows you to manage data, projects, users and technological ecosystem around JMap Cloud through visual interfaces for a given organization. JMap Cloud Portal users can integrate data, create projects and disseminate it to end users through cartographic applications.

This user guide details the main steps that in JMap Cloud Portal lead to the distribution of JMap Cloud data via a public or restricted access cartographic application.

Each member of an organization has one of three roles in JMap Cloud Portal: administrator, editor, or viewer. The Roles section details the functions specific to each role. Only administrators and editors access JMap Cloud Portal. Viewers access applications that stream data from JMap Cloud. Administrators and editors view all sections of JMap Cloud Portal but only the functions that correspond to their role are activated.

The following figure summarizes the workflow with the roles involved.

Connecting data

This step requires the editor to connect the data to JMap Cloud by creating spatial data sources. These can be GIS files, spatial data servers, satellite images, etc. Files are uploaded and their data is copied into JMap Cloud databases or connections to data web services are created to make the data available to configure projects.

See Connecting Data: Spatial Data Sources for more details on this.

Organizing data into projects

JMap Cloud data is organized into projects. A project contains information about map layer definitions, as well as settings governing access control (security), queries, units, etc. By creating a project, the editor defines the visual appearance of the map and the information it will contain.

See Organizing Data into Projects for more details on this.

Configuring cartographic layers

In this step the editor creates the cartographic layers of the project. Each layer of the map is associated with a spatial data source. For each layer, the editor defines the style (the way the elements of the layers will be drawn), the labels, the themes, etc. It can also define access control layer by layer.

See Configuring Cartographic Layers for more details on this.

Accessing data

The project is disseminated to end users via mapping applications. Depending on the access controls configured by the editor, the applications may be public or may be accessible through the authentication of the user who holds the viewer role.

The JMap NG User Guide provides details on JMap Cloud mapping applications.

The dashboard is the home section of JMap Cloud Portal. As its name suggests, this section offers an overview of the status of resources such as projects and spatial data sources and also allows you to create some of them directly.

Roles are categories of JMap Cloud Portal users, defined by a set of general privileges to access and modify the organization's resources.

Each member of an organization has one of three roles:

• Administrator

• Editor

• Visualizer

Each role allows you to perform specific functions and access relevant sections of JMap Cloud Portal. Only users who hold the Administrator or Editor role access JMap Cloud Portal.

The figure schematizes the relationship between the three roles: the administrator accesses all the functions of JMap Cloud Portal and applications, the editor accesses the functions and resources linked to the data while the viewer only accesses the data and functions available in the applications.

Administrator

An organization administrator is a JMap Cloud Portal user who performs administrative management tasks for their organization, including membership, payments, and API keys.

The administrator:

• Create, modify and delete API keys

• Configure organization settings

• Invites members to join JMap Cloud Portal

• Creates, edits information, and deletes organization members

• Assigns and modifies the role of each member of the organization

• Manages organization extensions

Tasks are performed from the Organization section of JMap Cloud Portal. The Managing the organization chapter offers details on each function.

The admin can also access the Dashboard from where can quickly create API keys.

Additionally, the administrator can perform all the tasks of the Editor role.

Editor

This is the default role of a member of an organization.

The editor accesses JMap Cloud Portal functions not related to the organization's administrative tasks. Its main task is to configure the maps that will be distributed through the applications.

The editor:

• Creates, accesses, configures, modifies and deletes resources from JMap Cloud

  • Spatial data sources

  • Projects

  • Map layers

These tasks are performed from the Dashboard, Spatial Data Sources, and Projects sections of JMap Cloud Portal.

Viewer

This is a user who accesses project data and functions through JMap Cloud applications.

This user does not access JMap Cloud Portal.

The viewer:

• Access a project with its data layers

• Navigates the map and interacts with the data in different ways (interactively selecting items, performing searches, displaying information, etc.)

• Can edit the geometries and/or attributes of a map layer if they have edit permissions for the layer

First connection

A JMap Cloud administrator in your organization will send you an invitation to join the JMap Cloud Portal.

The invitation sent by JMap Cloud contains a hyperlink that takes you to the JMap Cloud Portal login page. The interface for accepting the invitation to join JMap Cloud Portal displays your email address and the field for creating your password.

Once the password is created, click on Continue to progress through the login procedure detailed in the next section. If you already have an account, you can log in directly by clicking on Sign in.

Login procedure

Once you have created your account, you access JMap Cloud Portal via:

• The JMap Cloud website https://www.jmapcloud.io when you press the Login button.

• The JMap Cloud Portal website: https://portal.jmapcloud.io/login

To continue the connection:

1. Click on Login to display the JMap Cloud Portal login page.

2. Enter the email address and password with which to log in to JMap Cloud Portal and press Continue. Once authentication is successful, the following interface prompts you to select your organization.

3. Click on the organization you want to connect to. A new authentication is performed and you access the JMap Cloud Portal of the selected organization.

The home interface displays the dashboard which provides an overview of the JMap Cloud Portal resources for which you have access permissions.

The JMap Cloud Portal user interface looks like this:

Sections

In the sections, information is presented in table mode and sometimes also in card mode.

In the tables, the rows correspond to the section's resources: organization members, API keys, files, tasks, spatial data sources, etc.

You can select the quantity of rows to display per page: 25, 50, 100. A table can have multiple pages. The footer displays the number of rows on the page and the total number of rows in the table.

For each resource, a menu is displayed when the cursor is placed on the attribute name. The functions offered in the menu vary depending on the resource:

• Show information

• Edit information

• Create a source

• Interrupt

• Delete

• ...

The table columns correspond to the attributes. The table header presents the attribute names.

• Sort table rows ascending or descending

• Hide attribute

• Show column

• ...

A display of resources in cardboard mode is available in the Projects section. Buttons allow you to add resources in each section except the Jobs section.

This section allows you to give a name to the organization and copy the organization's unique identifier to access JMap Cloud Portal.

1. Write the name of the organization in the Name field.

2. Click on if you want to copy your organization ID to the clipboard for use in another context.

The unique organization identifier is used by external systems and platforms to connect to JMap Cloud. JMap Server, for example, uses this ID to connect to JMap Cloud. The JMap Server Administrator's Manual provides details on this topic.

This section displays a table of your organization's API keys. For each API key the table displays the title, the unique identifier (Id), the name of the user who created it, the creation date and the expiration date.

The menu displayed in the header of each attribute in the table allows you to sort the keys, filter them, hide or display attributes.

Adding an API key

To add an API key:

1. Click on Create new API key.

2. Enter the name for the key, the expiration date, and select the role to assign to the API key from the drop-down list (only Editor and Viewer roles can be assigned to an API key). Fields marked with an asterisk are mandatory.

3. Click on Create. A message displays: This is a private API key that should be kept secret and secure. Once this window is closed, it will no longer be possible to see the API key again.

4. If you want to copy the API key to the clipboard for use in another context, click on .

5. Press OK. The key is created and displayed in the table.

Managing API keys

1. Place the pointer over an API key to display the key's menu .

2. Click to access the available functions: Display information and Delete.

3. Click on Display information to open the key's interface. This displays the title, the name of the user who created it, their role, email and expiration date.

4. If you want to copy the email to the clipboard, click on .

5. Click on Delete if you want to delete the key. Deleting an API key has resource impacts. The Delete an API Key section provides details on this topic.

Delete an API key

To better manage your organization's API keys, you can delete keys that are no longer useful.

To retain resources, you can transfer their ownership to other members of the organization. If you don't do this, the resources are deleted along with the API key.

To delete an API key:

2. Click on Delete. A message asks you to confirm your intention.

3. Press OK. If the selected API key owns resources, a list of members with the Editor role is displayed for you to select the member to transfer ownership of the API key resources to. If the API key does not own resources, a message asks you to confirm the deletion.

4. If so, select the Editor member who transfers ownership of the assets to. The selected member is registered as an owner in each data source and project that owns the API key.

5. Click OK to confirm deleting the API key. API key resource access permissions (access control list, ACL, entries) are removed. Resources that are solely owned by the API key are permanently deleted.

This section displays a table of organization members as well as a button to invite new members to JMap Cloud Portal.

For each member, the table displays the name, username and email address. The menu displayed at the far right of each member's line provides access to functions such as displaying the member's information, modifying it or even deleting the member.

The menu displayed in the header of each table attribute allows you to sort the members, filter them, hide or display attributes.

Adding a member

To add a member to the organization:

1. Click on Invite Member.

2. Enter the email address of the person to invite.

3. Select the person's role from the drop-down list.

4. Select the correspondence language.

5. Click on Create. A message appears indicating that an email has been sent to the person. You also have the option to copy the invitation link.

6. Click on to copy the invitation link to the clipboard.

7. Close the window. The invitation appears in the Invitations tab.

Displaying and editing a member's information

1. Click on to display options: View information, Edit, Delete.

2. Click on Display info. The Member window opens displaying the member's name, email, and role.

3. Click on Edit. The Invitations window opens displaying the member's name, email, and role. The attribute you can modify is Role.

4. Select a role from the drop-down list.

5. Save the change. The role is updated and the window closes automatically.

6. Click on Delete. This action has impacts on resources that belong to the member, as detailed in the following section.

Removing a member

Organization members who hold the Administrator or Editor role own resources such as files, data sources, and projects with its layers.

When an Administrator or Editor member is deleted, the administrator must decide the fate of the resources belonging to him.

1. Press Delete, the following message is displayed.
2. Check the Transfer ownership to field and select the member from the drop-down list if you want to transfer ownership of the resources to another member.

3. Click on Delete. The deleted member's permissions (access control list entries, ACLs) are removed. The designated member is registered as the owner of the resources that belonged to the deleted member.

4. You can also click on Delete directly, without transferring ownership of the resources. The member and the resources (with their dependencies) belonging to it are deleted. The member's permissions (access control list entries, ACLs) are removed.

Deleting a member means that they can no longer connect to JMap Cloud Portal.

You can add access permissions to vector and raster spatial data sources (SDS) that you own.

You can grant permissions to members of your organization who hold the Editor and Viewer roles. Each role has different permissions.

Granting permissions

To grant permissions to a SDS:

1. Click on and then on Permissions. The permissions configuration interface opens displaying the members with the permissions each has.

2. To grant permissions to a member, open the Add member drop-down list.

3. Select the member you are interested in. Their name along with a letter that indicates their role appears in the Add member field. You can clear the selection by clicking .

4. Select the other members you want to add, one at a time. Their names appear in the Add member field. You can clear the selection by pressing .

5. Once members are selected, click on to add the members. These are displayed in the permissions table.

6. Check the permissions you want to grant to each member.

Modifying permissions

You can modify the permissions granted to members, grant permissions to new members, or remove all permissions from one or more members.

2. Change the permissions by checking or unchecking the relevant boxes. Résultat de traduction

   To remove all permissions from a member, you must first uncheck the permissions at the top of the hierarchy. When you uncheck the Owner permission box, Modify automatically becomes the most important permission. To remove the View permission when associated with Viewer type permissions, you must uncheck those first.

This section allows you to create and send invitations to members of your organization to join JMap Cloud Portal.

A table displaying the invitations that were made from this tab or from the Members tab, detailing for each their identifier, the email address of the member who sent the invitation, the email address of the invited, the creation and expiration dates of the invitation. The menu displayed at the far right of the row of each invitation provides access to functions such as view information and delete the invitation.

The menu displayed in the header of each attribute in the table allows you to sort the invitations, filter them, hide or show the attributes.

Inviting a member

This is the function of the tab. To invite a member:

1. Click on + Invite member.

2. Provide the email address, select the role you are assigning to the guest member from the drop-down menu and select the language of correspondence.

3. Click on Create. An interface appears indicating that the email has been sent and allowing you to copy the invitation link to the clipboard.

4. If you want to copy the invitation link to the clipboard, click on .

5. Close the window. The invitation appears in the invitations table.

Displaying information or removing an invitation

1. Click on to view the options: Display Info, Delete.

2. Click on Display info. The Invitation window opens displaying the email address of the invitee, the email address of the member who created the invitation, the invitation creation and expiration dates, the language of correspondence, the assigned role to the guest as well as the invitation link, which you can copy to the clipboard.

3. Click on Delete to remove the JMap Cloud Portal invitation link. The invited member can no longer use the link to access it.

Invited members

The invited member receives an email from JMap Cloud inviting them to join the organization in JMap Cloud Portal.

In addition to displaying the name of the member who created the invitation, the email shows the invited member's email, organization name, and invitation link. An Accept Invitation hyperlink also appears at the end of the message.

If the invited member has the Administrator or Editor role, he accesses JMap Cloud Portal. If he has the Viewer role, once connected he accesses, via the JMap NG cartographic application, the projects for which he has access permissions.

Web Map Service (WMS) and Web Map Tile Service (WMTS) are two standards proposed by the (OGC) that determine how client applications should make requests to obtain maps from a server compatible with WMS or WMTS respectively.

-compatible servers use the HTTP protocol and the returned maps are usually images in popular formats (PNG, GIF, JPEG, etc.). WMS server capabilities are published in an XML document that specifies the types of queries supported as well as metadata (lists of layers, supported projections, etc.).

-compatible servers allow you to obtain map data in the form of predefined tiles from a data server.

JMap Cloud can query servers compatible with both standards in order to create spatial data sources.

The settings you need to complete are as follows:

The first step in the workflow that leads to map distribution is connecting JMap Cloud to spatial data through the creation of Spatial Data Sources (SDS).

In the context of JMap Cloud, a spatial data source is any source that provides spatially referenced data.

JMap Cloud allows you to create SDS from vector or raster data files, WMS/WMTS services, vector tile services and feature services.

Vector and raster SDS can also be created from JMap Server when a JMap Server administrator synchronizes data sources, layers, or entire projects from a JMap Server to JMap Cloud. The details of this synchronization are presented in the .

The Spatial data sources section of JMap Cloud Portal provides functionality for uploading files to create data sources as well as directly creating spatial data sources from new files and data services.

These spatial data sources are subsequently available to create project map layers.

You can create spatial data sources (SDS) from four types of data sources:

• Vector or raster data files: different formats are supported (SHP, CSV, GML, GeoJSON, FileGeoDB, GeoPackage, DWG, Tab, GeoTIFF).

• WMS/WMTS Services

• Vector Tiling Services

• Feature Services

The Data sources tab contains functions for creating and managing spatial data sources that you will use in your projects.

This section presents a table of the SDS of which you are the owner and the sources of the data for which you have access permissions. See the section for details on access and management of resources.

Each data source is a row in the table, and the columns show the attributes: source type, status, CRS (coordinate reference system), labels, and last modification date.

Creating a spatial data source

To create a SDS click on Create a spatial data source. The drop-down menu allows you to select the source type: Data File, WMS/WMTS Service, Vector Tile Service, Feature Service.

The following steps depend on the type of data source.

JMap Cloud creates spatial data sources (SDS) from multiple vector and raster data file formats: CSV, KML, DXF, DWG, SHP, TAB, GeoPackage, FileGeoDatabase, GeoJSON, GeoTIFF.

Files can be uploaded when creating a spatial data source or uploaded in advance. For more information, see the section.

An SDS can include multiple vector or raster data files that form a continuous map. For example, a common CAD practice is to separate the territory into rectangular tiles. By reading all tile files together, JMap Cloud can recreate continuous maps as long as the files contain the same data structure (geometry, layers and attribute types). In these cases, the different files that will be used to create the SDS must be combined in the same .zip format file.

Creating an SDS from vector data files involves the steps of uploading the files to JMap Cloud, analyzing the metadata, validating and completing the SDS parameters. When you complete the creation of the SDS, the data and its configuration are copied into the JMap Cloud databases.

In the case of creating an SDS from raster data files, these are uploaded to JMap Cloud, their characteristics are analyzed and validated and when you complete the creation of the SDS several processes are carried out:

• Data is reprojected to the reference coordinate system EPSG:3857

• Data is converted to COG optimized format

• A pyramid of internal resolution images is created to optimize the display of data

This image, optimized for easy display and navigation, is stored in JMap Cloud.

Creating a SDS from files

1. On the Data sources tab, click on Create a spatial data source.

2. Select Data file. The selection interface offers two choices: New File, to upload a data file to JMap Cloud and Existing File, to select files that are already on JMap Cloud. See for more information.

3. If you are creating the data source from a new file, in the New File tab select the data file to upload. Because typically a vector spatial dataset is made up of multiple files, you must combine them into a single .zip format file. Compression is not necessary for uploading raster data files unless you want to upload multiple files that will make up a mosaic dataset. In this case you must combine them in a single .zip format file. If you are creating the data source from files that already exist on JMap Cloud, select them in the Existing File tab.

4. Configure the SDS settings. When you select a new file, before displaying the settings configuration window JMap Cloud analyzes the file's metadata in order to identify the format, the type of data it contains, it coordinate reference system (CRS), geographic extent and other metadata. When you select an existing file, JMap Cloud has already performed this analysis (and the conversion in the case of raster type files) and the configuration window is displayed directly. The settings to configure vary depending on the data type format. The section details them.

5. Add a description of the SDS and tags that may be useful for filtering data sources. You can create new labels by entering the text in the Tags field.

6. Click on Create. The new SDS is displayed in the table. Its status is Preparing while the creation is completed. Subsequently the status is Ready.

The files that you upload when creating an SDS are displayed in the table in the Files tab. After a period of 10 days the files are automatically deleted from JMap Cloud.

File settings

The table shows the general settings to configure when creating an SDS from files.

Organization management is carried out in the Organization section of JMap Cloud Portal. This section is structured into four tabs: , , and .

You can edit data from a vector spatial data source. The procedure allows you to modify the file or web service that provides spatial data to the SDS.

1. Select Update data to open the interface which allows you to select a new file or an already existing file in JMap Cloud or, in the case of a web service, to reconfigure the connection request to the service. If the file is not a recognized vector file, the file is refused and this message is displayed: This file is not compatible with the data source. The current SDS name, SCR, description and labels are displayed in the interface and you can keep them as is or change them. The attributes of the new file are displayed, and you can index attributes for easier searches. You must complete certain settings, depending on the file format. The settings are detailed in the Data Files section. A new spatial table is created with the new data, and the new table is associated with the existing data source. The old spatial table is deleted.

2. Save. When the changes are completed the status of the SDS becomes Ready. If the SCR of the new file is not the same as the SCR you selected for the SDS, the data is not displayed in the map when you press Display Info.

The table presents the different statuses that can have a spatial data source.

The organization's administration functions as well as the management of service subscriptions are reserved exclusively for administrators.

To delete an SDS:

1. Click on Delete. A message asks you to validate your choice.

2. Press OK to delete the spatial data source. All the SDS configuration is deleted.

You can access several functions from the menu of a spatial data source: view information, modify its configuration, update the data or delete it.

To display and edit SDS information:

1. Select Display information. The interface displays SDS data in a map that you can navigate. The dotted box indicates the extent of the data source. The base map comes from p. The elements of the SDS are progressively loaded into the map up to a maximum of 50,000 elements. When the maximum number is reached, the other elements are not loaded. Digital elevation models (DEMs) from geoTIFF files are displayed in shades of gray. Other parameters displayed are: the unique identifier of the SDS in JMap Cloud, the coordinate reference system (CRS), the number of elements loaded, tags, description and a table with attributes.
2. Click on to copy the unique identifier of the data source to the clipboard.

3. When you hover over the Description, Tags, Unique identifier settings as well as Indexed heading of the attribute table , the icon is displayed allowing setting edition.

4. Click on or on to save or discard changes.

You can upload files to JMap Cloud to later use them to create spatial data sources. The Files tab in the Spatial data Sources section provides functionality for uploading and managing files.

Data from the files you upload is stored in JMap Cloud databases. Files in the Files table are automatically deleted after a period of 10 days.

Files tab

This tab shows a table of files you have uploaded. A button allows you to upload new files.

The table contains the file name, file data type (vector or raster), format (CSV, KML, DXF, DWG, SHP, TAB, GeoPackage, FileGeoDatabase, GeoJSON, GeoTIFF), size, and the date of upload. Multiple files can have the same name.

You can select one or more files in the table by checking them and the Delete function becomes available. This allows you to delete multiple files at once.

Uploading a new file

Since a vector spatial dataset typically consists of multiple files, you must combine them into a single file in compressed .zip format.

Compression is not necessary for uploading raster data files, unless you want to upload multiple files that will make up a mosaic, in which case you must combine them into a single .zip format file.

1. Drag and drop one or more files to upload directly into the board. The upload begins automatically.

OR

1. Click on Upload file to open the file explorer.

2. Select the files to upload. The upload begins automatically.

In both cases, the files are displayed in the table and messages indicate the upload progress.

Status of a file

The status of each file indicates which step of the process was completed by JMap Cloud.

Managing a file

Like other resources, to manage a file:

Create a spatial data source

1. Click on Create source. This function is available when the file status is Analyzed. The interface for creating a data source opens.

Pause upload

This function is available when the file is being uploaded or analyzed and allows you to stop the current process.

Display information

1. Click on Display informations. The interface displays the following information: file name, size, format, status, user ID of the user who uploaded it, date and time of upload and metadata. Metadata includes in addition to the above information, the unique identifier of the file, organization and task; the name of the data layers, the name and type of each attribute, the number of elements.

Delete a file

1. Click on Delete. A message asks you to validate your choice.

The deleted file disappears from the table. The spatial data source created from the file is not affected.

You can create a new project from the or from the Projects section.

To create a new project:

1. Click on Create a new project.

2. Complete the project settings.

The project displays in the Projects section. In both display modes, cardboard or list, the menu offers functions for .

Project settings

Coming soon.

Coming soon.

Projects that you have created (and of which you are then the owner) as well as projects for which you have access permissions appear in the Projects section.

Two display modes are available in this section: table mode, similar to the display mode of other JMap Cloud Portal resources, or card mode. You can switch between modes by pressing the and icons respectively.

When projects are displayed in list mode you can sort and filter them based on their name or modification date.

The Menu available in both display modes offers functions for managing each project: Open, Edit, Permissions, Get the project's public link, MVT cache, Delete. The following sections describe these functions in detail.

When the visibility of a project is Public, users access the project without the need for authentication. When visibility is Private, users must have at least View permission to access the project.

To obtain the sharing link to share a Public project:

1. Click on and then on Get project's public link. This function is inactive for projects with Private visibility type.

You can copy this link also from the project configuration interface. This is relevant when you make a project Public:

1. Click on and then on Edit to open the project configuration interface.

2. If you have Owner permission, check the Public box to make the project public. The icon appears next to the box.

3. Click on to copy the project share link to the clipboard.

Vector tiles are a very effective vector data format for web mapping. The principle consists of dividing all of the vector data of a project into tiles, in a manner analogous to raster data tiles (WMTS).

There are several standards for producing vector tiles. Mapbox proposed a standard based on the Protocol buffers ("Protobuf") encoding created by Google (https://developers.google.com/protocol-buffers). Mapbox vector tiles (mvt) are supported by a wide range of mapping products including JMap Cloud, JMap Server and JMap NG.

A grid that defines the tiling is applied to the vector data which is then cut into tiles. Each tile can contain vector data from multiple layers.

A set of tiles is produced for each scale level. In web cartography in general, 23 scale levels are considered, level 0 corresponding to the Earth and level 22 corresponding to the street. The vectors of the lower levels are simplified (generalized) to optimize the display of data while keeping tiles of an efficient volume.

The vectors (lines, polygons) of each layer are cut at the tile boundaries. When geometries cross the border between tiles, the tiles are cut and each tile contains part of the geometry. It is the mapping application that unifies the vectors to obtain the complete geometry.

Attributes of map elements are included in the tiles. This makes the data more dynamic and interactive, allowing for example to display thematics created on the fly or to display data based on the application of filters based on their attributes.

The vector tiles therefore contain the geometries and their attributes, the styles are not included in the tiles. The information defining the styles is stored and managed in a separate JSON file. This feature allows application users to define styles dynamically because the applications manage the styles. Additionally, when the data style changes it is not necessary to generate new tiles.

The tiles can be created in advance and cached, the server response being much faster to requests from the web mapping application, which gives a very fluid and efficient rendering.

Production of vector tiles by JMap Cloud

A JMap Cloud project generates three sets of data that are used by applications:

• A JSON file containing style. This file accompanies the vector tiles. It contains the definition of each layer contained in the vector tiles, their style settings, themes, etc.

• A set of vector tiles that contain the geometries and attributes of non-editable layers. JMap produces one mvt format file per tile. These tiles can be created on demand as users navigate JMap NG applications. They can also be created in advance and cached.

• Vector data in GeoJSON that corresponds to the geometries and attributes of the editable layers. This data is sent on-demand by region to apps.

Factors that affect the performance of vector tiles

In general vector tiles are lighter than raster tiles but certain factors can affect the size of the tiles and have an impact on the performance of JMap NG applications. The size of the tiles is associated with the time of their production, the storage volume, the volume of data exchanged with the applications and the dedicated memory of the applications.

Among the factors to consider we can cite:

• Number of attributes linked to layers: Attribute data influences the size of the tiles, which increases with the number of attributes.

• Layer visibility scales: Setting visibility thresholds for layer display is appropriate when layers have very dense data. Limiting the display of these layers to larger scales is a good strategy because tiles at smaller scales will not contain data from these layers and tile production time will be reduced.

• Caching: Producing and caching tiles in advance greatly improves application performance.

Managing the project's MVT cache

Pour gérer le cache de tuiles vectorielles du projet :

To manage the project's vector tile cache: Press to access functions. Tap MVT Cache to open the Manage MVT Tile Cache interface of the project. This interface has four sections:

1. Cache state

   Indicates the cache status, if available.

   Fill

   This option allows you to indicate whether you want to create tiles for all 23 levels or for a specific range of levels. In this case, specify the minimum and maximum levels of the range. This option does not overwrite tiles that are already cached.

   Delete

   This option allows you to specify whether you want to remove tiles from all 23 levels or from a specific range of levels. In this case, indicate the minimum and maximum levels of the range.

   Running task

   Indicates the progress of the creation or deletion by cache level as well as the overall progress of the creation or deletion.

2. Indicate the task you want to perform.

3. Click on Launch task. The Running task section displays task progress graphically and in percentage..

Coming soon.

Once the data is connected, the next step is to organize it into projects that can be distributed to end users through mapping applications.

A project is composed of an ordered list of layers. A JMap Cloud mapping application opens projects and displays their layers. You can create as many projects as you want.

Each layer of a project is associated with a spatial data source. The data source provides the layer data. Different projects can contain layers sharing the same data sources, allowing for a variety of styles, information, themes, etc. for displaying the same data. It is also possible for several layers of the same project to share the same data source, using filters.

A project is a secure resource, which means that it has permissions associated with it to control access by end users. It is therefore possible to exercise precise control over which users will be authorized to open each project.

The Projects section of JMap Cloud Portal allows you to create and manage projects. You can also create projects directly from the Dashboard.

The following sections describe the steps for creating a new project as well as managing the projects you have access to.

JMap NG is an online cartographic application that offers users an interactive tool for navigation, querying and editing spatial and descriptive data from JMap Cloud

To open the project to explore it and fine-tune the configuration before making it available to users:

1. Click on and then on Open. A JMap NG application displaying the project opens in a new tab.

2. Log in to the application with your JMap Cloud Portal login information.

3. Navigate the map and explore the app. The functions offered by JMap NG are available (see details in the JMap NG User Guide). It is the cartographic application that broadcasts the project to members whose role is Viewer.

4. In JMap NG, click on and then Logout to close the application.

You can delete a project for which you have Owner permission. Deleting the project deletes the project's map layers as well as these configurations.

To delete a project:

1. Click on and then on Delete. A message asks you to validate your choice.

The project disappears from the Projects section.

To change project settings:

1. Click on and then on Edit.

2. Edit the project settings. You can change all settings.

3. Click on Edit to save the changes. The date of the modification is displayed in the Modification column (in the list view mode).

You can grant permissions to other JMap Cloud members in your organization for projects that you own.

Three permissions are offered. The permissions are hierarchical, in the sense that the broadest permission includes the other two permissions.

Granting permissions

To grant permissions to a project:

1. Click on and then on Permissions. The permissions configuration interface opens displaying the members with the permissions each has.

2. To grant permissions to a member, open the Add member drop-down list.

3. Select the member you are interested in. Their name along with a letter that indicates their role appears in the Add member field. You can clear the selection by clicking .

4. Select the other members you want to add, one at a time. Their names appear in the Add member field. You can clear the selection by pressing .

5. Once members are selected, click on to add the members. These are displayed in the permissions table.

6. Check the permissions you want to grant to each member. The Owner permission automatically includes the other two permissions.

Modifying permissions

You can modify the permissions granted to members, grant permissions to new members, or remove all permissions from one or more members.

2. Change the permissions by checking or unchecking the relevant boxes. To remove all permissions from a member, you must uncheck all three permissions. When you uncheck the Owner permission box, Modify automatically becomes the most important permission.

Several tools allow you to navigate the map.

Looking for a place

You can search for a specific place in the map:

1. Press to open the box and write location information.

2. Enter search terms. You can enter an address, a postal code, a city name, a place, etc. JMap NG uses the Mapbox Geocoding service to find the location. As you enter information, places with matching information are displayed.

3. Select the desired location by clicking on it. The map zooms and centers on the place identified by a mark . Location information is displayed in a tooltip.

   When you search for another location, the mark of the previously selected location disappears.
4. Press to close the place search and clear the last place information.

5. Press to close the search and erase the information of the last location.

Searching features on the project

You can search for an feature in the project based on the value of one of its attributes.

2. Enter the search terms. As you enter terms in a list, elements in the project layers whose attribute value matches the terms you enter are displayed.

3. Click the list the element you want to find. The map centers on the element which is selected.
4. Click the layer name to select all features in the layer whose attribute value matches the terms you enter. The map centers on them.

Navigating the map using fingers or the pointer

You can navigate on the map using your fingers or the pointer:

1. Using your fingers you can zoom in and out, move the map, and tilt it to navigate on it in 3D, as shown in the figure below.

Centering the map at a coordinate and changing the scale

You can center the map at a specific coordinate and change the map scale:

2. Press Scale to open the Change the map scale window.

3. Enter the new scale or select it using the arrows. The scale of the map changes as you change the numbers.

4. Press OK to close the window. The map is displayed at the scale you have chosen.

5. Press the Latitude and Longitude (Lat Lon) data to open the Recenter the map window.

6. Enter the new Latitude and / or Longitude or select them using the arrows. The map automatically recenters at the chosen coordinate.

7. Press OK to close the window.

The Profile and user settings panel offers some basic functionality to customize JMap NG's interface.

1. Click on to open the Profile and user settings panel.

2. Click on if you want to edit your name.

3. If you want to change the app password, open the Modify password menu.

4. Enter your current password.

5. Enter the new password.

6. Confirm the new password.

7. Click Change to save the new password.

8. Select the Theme of the application.

9. In the Distance unit drop-down menu, select the unit that will apply to the scale and the distance and area measurements.

10. Click on to display the available languages and change the application's language. The change can take a few moments because it may involve changing the language of the application and data (layer titles, attribute names, tooltip content, etc.).

11. Click on Logout if you wish to log out of the session. You will return to the JMap NG login interface.

12. Click on to close the Profile and user settings panel or on another icon in the sidebar to open another panel.

JMap NG is accessible from a web browser (Edge, Google Chrome, Firefox, Safari, etc.) through an invitation link sent by your organization.

The following image shows JMap NG's login interface.

The login interface and the application itself are displayed in the language you configured for your web browser.

1. The version of JMap NG as well as the JMap product to which the application is connected are also displayed at the bottom of the interface.

   If access to the application is controlled, sign in with the username given by your organization and choose a password.

   Once you are logged into the application, the following interface allows you to select the project you wish to access. The projects you have permission to access will be displayed.

3. Click on a project to access it.

Project data is organized into layers. Each layer contains data related to a specific theme. Layers are superimposed on one another to form the map that is displayed in the interface.

Some layers are comprised of objects or elements that are represented using a type of geometry (points, lines, polygons) and descriptive attributes. For example, a layer can represent trees using points, and the attributes associated with them can include the species of tree, diameter, height, and state of health. Thus, each object (tree) of the layer has a geometry that is located in space and attributes that describe it.

Other layers are comprised of raster data (pixels) that form images, such as aerial photographs, satellite images or digital elevation models.

Layers can be grouped hierarchically based on themes, such as urban planning, the environment, transportation, etc. A multi-level hierarchical structure makes it easier to work with projects when they contain many layers and different themes.

Some layers are called base maps because they provide a context to display the data layers. Interaction with base maps is limited to selecting the base map to be displayed in the application.

You can select the layers to display in the map.

To display a layer, you must display the group and the subgroups in which the layer is found.

1. Slide the switch on the group's card from to in order to enable the display of the group.

2. Click on to open the group card and display the layers and subgroups it contains.

3. Slide the switch on the subgroup's card to enable its display. The icon of the subgroup will change color .

   The icon appears in the layers' cards whose display is disabled. No icon appears in layers' cards whose display is enabled.

4. Click on to display the layer. The icon disappears, and the layer is displayed in the map.
5. To disable the display of a layer, bring the mouse pointer to the card of that layer. The icon appears.
6. Click on the icon, which turns to . The layer will no longer be displayed in the map. Its symbol will turn gray.

7. Slide the display switch of the group to this position if you wish to disable the display of all layers comprising this group. Even the layers whose display is enabled will no longer be shown.

Displaying layers based on the map scale

Some layers are configured to be displayed within a given scale interval. Displaying an abundance of small map elements when a small scale is selected (i.e. when the map displays a large territory with few details) can make it very difficult to read the map. Layers that have elements with these characteristics are usually displayed at a larger scale, when the map contains more details on a limited territory.

When a layer is not visible because of the map scale, its name and symbol will appear in very light gray. When you change the scale, these colors will become darker, indicating that the layer appears in the map if its display is enabled.

The user interface is comprised of the following:

• A lateral bar with icons allowing you to access menus with the application features, which are organized into panels.

• Geographic positioning and map scale tools.

• The map itself, which displays the application data.

Each panel contains features and information. Each panel contains a breadcrumb that allows you to switch projects.

The Layers panel contains the details of the project's layers and tools for different functions such as controlling the display or making the elements of a layer selectable.

1. Click on to open the Layers panel. The icon changes color .

   Within a project, groups of layers appear in the panel in the form of cards. A group can be opened to display its subgroups and layers, or it can be closed to show only its name.

2. Click on the arrow in the card of a group to open it. The subgroups and layers it contains will be displayed.

   Each subgroup and layer has a card that presents different functions and details of the subgroup or layer. A subgroup is displayed using the icon, and a layer is displayed using an icon representing its style.

3. Click on to open the subgroup card and display the layers it contains. The icon changes to , indicating that the subgroup has been deployed.

4. Click on to close the subgroup card.

5. Click on to close the group of layers card.

6. Pass the mouse over a layer to display the available tools. The Data Layers section offers details on these tools.

7. Select a base map from the BASE MAP group. The name of the selected map is displayed with the name of the group.

   The base map attributions display at the bottom of the map.

Filtering layers

To speed up the identification of the layers that interest you, you can apply a filter.

2. Enter characters in the range Layer Name to filter the layers based on their name.

4. Select the attribute from the Filter by list, the operator from the Operator list, and the value by which you want to filter the layers.

5. Click Add. The filter is displayed in the Layer filters box. Only the layers that pass the filter are displayed in the Layers panel.

To display the geographic extent of a layer, even if it is not displayed in the map:

1. Click on and then on Zoom to layer extent. The map automatically displays the area corresponding to the extent of the layer. A rectangle delimiting the extent of the data is displayed for a few moments.

2. Click on if you wish to return to the previous geographic extent.

Some map elements will display a tooltip when you touch them or when you click on them. The tooltip contains information on the element's attributes, and it can include text, hyperlinks to open documents or videos in their native applications, photos, etc.

Sometimes elements from several overlaying layers have tooltips. In this case, when you open the tooltip of an element, it displays the contents corresponding to each overlaying element, being that of the upper layer displayed first, followed by the contents of the elements of the lower layers. The order of display of the content in the tooltip follows the order of overlay of the layers.

Tooltips are displayed temporarily for one element at a time.

To display a tooltip:

1. Click on an element whose tooltip you wish to display. The tooltip automatically appears.
2. Click on to close the tooltip or click on another map object to open its tooltip.

This section displays the tasks that your organization runs on JMap Cloud. Its purpose is to provide information on problems that may appear when performing some functions.

A table displays a task in each row and the following attributes in columns:

To perform some functions such as interactively selecting elements of a layer using the selection tools, you must first make the elements of the layer selectable.

1. Pass the cursor over the card of the layer you are interested in to display the icon .

2. Click on to make the layer elements selectable. The icon is permanently displayed in the form.

3. Click on to make the elements of the layer non-selectable. The icon stops displaying and when you pass the cursor over the card, the icon appears.

To display layer information:

1. Click on and then on More information to open the GENERAL panel. Several information are presented there:

   • Number of layer features that are visible on the map. The number varies as you navigate the map.

   • Extent: X and Y indicate the position of the southwest point of the layer, width and height indicate the layer extent in meters from this point.

   • Metadata: information about the data in the layer such as quality indicators, the organization producing the data, update dates, etc. Metadata may be missing.

2. The Transparency function, available for raster data layers, allows you to adjust the transparency level between 0% (default) and 100%.
3. Click on the THEMATIC(S) and/or FILTER(S) tabs to display these panels.

4. Click Back to return to the Layers panel.

Layers can have thematics, the appearance of that layer's elements vary based on one or more attributes.

You can display more than one thematic for a layer at the same time.

To display the THEMATIC(S) panel of the layer:

1. Click the layer icon. The THEMATIC(S) panel displays the legend of the thematics.
2. Use the switch to enable or disable each thematic. The appearance of the icons representing the layer's objects will change according to your choice.

3. You can uncheck one or more classes or categories of the thematic so as not to display on the map the elements of these classes.

4. If the JMap administrator has configured it in this way, the thematic legend can be dynamic, i.e. the legend only shows the classes or categories of the elements displayed in the map. The classes of elements that are not displayed in the map are not shown in the legend. As you navigate the map, the legend changes depending on what is displayed there.

5. Click on or to close or open the thematic's card.

6. Click on Back to return to the Layers panel.

Thematics management

This option is only available for layers that have thematics configured.

JMap NG Developer Manual

This manual is for developers who want to use JMap NG to create map visualization applications for the web, integrate mapping capabilities into their web applications or extend existing JMap NG tools. JMap NG connects to your instance of JMap Server and opens JMap projects.

Depending on the needs, one of two different approaches may be selected: using JMap NG Core or using JMap NG App.

Both JMap NG Core and JMap NG App can be easily embedded in you web applications or web sites. This manual explains how to do it and provides running examples that you can use to get started.

JMap NG Core

JMap NG Core is a library for building map visualization applications for the web. It connects to a JMap Server instance to load and display a map project. It is based on the MapLibre GL JS open source project. It does not include any UI except for the mouseover popups and basic map controls. It is useful when you need only the map but want to build your own UI around it.

JMap NG Core provides a JavaScript API to perform simple tasks and JMap related tasks like getting a JMap Project, managing layers and accessing feature attributes. It also exposes the full MapLibre GL JS API for other tasks.

The latest version of the JMap NG Core Javascript API documentation is available here.

JMap NG App

JMap NG App is a complete map visualization application based on JMap NG Core. It provides a complete UI with many ready to use tools such as measuring, selecting, editing features, printing. It does not require any programming but provides a JavaScript API and can be extended by writing JMap NG extensions. JMap NG extensions are modules that plug easily into JMap NG to extend its capabilities, perform custom tasks or to support the integration of JMap NG into another web application.

The latest version JMap NG App Javascript API documentation is available here.

Extensions are plug-ins for JMap NG App that extend its functionalities. With the JMap NG API, you can develop your own extensions.

Extensions can add their own UI, typically an icon and a side panel. It is possible to have extensions with a different UI and even with no UI at all.

NG Extensions are javascript objects that respect an interface (either JCoreExtension or JAppExtension) and that are loaded by NG at application startup or project load, depending on the type of the extension. Every extension must have a unique id property, a initFn implementation, if implementing JCoreExtension, and a onPanelCreation implementation if implementing JAppExtension.

Extension life cycle

Extensions are being "registered" by NG in 2 different ways:

• if included in the JMap NG startup options, they will be automatically registered by NG.

• If loaded from a javascript <script> tag or via a project load, the extension must register itself. This is typically done in the extension "entry point" by calling the JMap.Extension.register method, for a Core extension, or JMap.Application.Extension.register method, for an Application extension.

The registering process most importantly includes incorporating your extension's redux reducers, if provided, your translation bundle, if provided, and the extension service to expose, if provided.

When NG registers your extension, it automatically calls your extension's initFn and onPanelCreation methods. In your initFn or onPanelCreation method, you can handle all your extension's initializing process. Once the initFn method is called, you can start calling NG's API to communicate with it.

Extension unique ID

The Extension Unique ID serves a dual purpose for NG: it used by NG to identifiy and manage the loading process of extensions, while also establishing a connection with a server-side extension. This connection can link your extension to specific JMap projects, optionally allowing for the transmission of configuration data to your extension during project loading. The nature of your unique id thus depends on your way of deploying it.

How to deploy your extension

Once your extension is ready to deploy, you can compile it and host it on any CDN of your choice. If your extension is loaded via a project, the URL of your CDN will be configured in the server-side part of your extension. If you include your extension as a <script> tag in an HTML page, you will be able to use the CDN's url. In all cases, this url should always be accessible from the location where NG will run.

You can see a full extension example here.

The card for each layer contains information such as the name of the layer, the presence of thematics, etc.

To access the available tools, pass the pointer over the card of the layer you are interested in.

The following pages contain source code examples that you can run or modifiy in Codepen.io.

In all examples, you must import the JMap NG core or app library from our CDN with a command like this:

or

The specific version of the library that you import must match the version of your backend. For JMap Cloud, always use version 'jmapcloud'. For JMap Server, use the version that matches your setup (for instance, 7_Jakarta_HF6 or 7_Kathmandu_HF3). New versions of JMap NG libraries are published for each release of JMap Server.

You can start JMap NG Core in a div of your website, or as a full page application.

Import the library from CDN

To use the JMap NG Core library, simply import the JMap NG Core Javascript library from our CDN link.

Make sure the version of the library matches the version of your JMap Server instance.

Set library options

You have to specify options to the library:

Display the map in a div

Display the map full page

Instead of running JMap NG Core inside a DIV, you can start it directly in the body of the web page for a full page experience.

This example shows how to toggle the visibility of a JMap layer on the map.

Try it out in Codepen.io

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <style>
      #toggle-button {
        margin-bottom: 1rem;
      }
      #my-custom-map {
        width: 600px;
        height: 600px;
        border: 1px solid grey;
      }
    </style>
  </head>
  <body class="jmap_wrapper">
     <div>
       <span>Toggle layer visibility: </span>
       <button id="toggle-button">Wait the map is loading</button>
    </div>
  	<div id="my-custom-map"></div>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        projectId: 1,
        restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
        anonymous: true,
        map: {
          onStartupMapReadyFn: function() {
            var button = document.getElementById("toggle-button");
            button.onclick = function () {
              const layerId = 4
              const currentLayerVisibility = JMap.Layer.isVisible(layerId);
              JMap.Layer.setVisible(layerId, !currentLayerVisibility);
            };
            button.innerHTML = "Toggle";
          },
          containerId: "my-custom-map",
          zoom: 8.794068040447577,
          center: {
            x: -73.66584749530894,
            y: 45.54275797936188
          },
          scaleControlVisible: true,
          scaleControlPosition: "top-right"
        }
      }
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>  
  </body>
</html>

In this example, we will create a custom layer that fetches GeoJSON data from a file. It will display on top of all other layers.

The GeoJSON file for this example is located at this URL: link.

Example

Try it out in Codepen.io

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <style>
      #my-custom-map {
        width: 600px;
        height: 600px;
        border: 1px solid grey;
        margin-top: 1rem;
      }
    </style>
  </head>
  <body class="jmap_wrapper">
    <div id="my-custom-map"></div>
    <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.573700695830425,
          center: {
            x: -73.7219880403544,
            y: 45.53690235213574
          }
        },
        onReady: () => {
          JMap.Event.Map.on.mapLoad("my-listener", params => {
            const map = params.map;
            map.addSource("my-custom-source", {
              type: "geojson",
              data: "https://data.montreal.ca/dataset/ab112a84-0661-4360-9573-652eed16beeb/resource/a90678ac-7ea7-464c-b615-e8f5cb9f527b/download/rsqa_secteurs.geojson"
            });
            map.addLayer({
              id: "my-custom-layer",
              type: "fill",
              source: "my-custom-source",
              paint: {
                "fill-color": "#0080ff",
                "fill-opacity": 0.5
              }
            });
          });
        }
      };
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@7_Kathmandu_HF3"></script>  
  </body>
</html>

In this example, we will show how to add an event on move end in JMap NG.

Example

We add an event to display the current center of the map. The value is updated each time the move ends.

Try it out in Codepen.io

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta charset="UTF-8">
  <style>
    #my-custom-map {
      width: 600px;
      height: 600px;
      border: 1px solid grey;
      margin-top: 1rem;
    }
  </style>
</head>
<body>
  <label><b>Center of the displayed map:&nbsp;</b></label>
  <br/>
  <label>Latitude:&nbsp;</label>
  <span id="latitude"></span>
  <br/>
  <label>Longitude:&nbsp;</label>
  <span id="longitude"></span>
  <div id="my-custom-map" class="jmap_wrapper"></div>
  <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: 13.797865986918877,
        center: {
          x: -73.48063889179525,
          y: 45.664231577062765
        },
        onStartupMapReadyFn: () => {
          const initialCenter = JMap.Map.getMap().getCenter()
          document.getElementById("latitude").textContent = initialCenter.lat
          document.getElementById("longitude").textContent = initialCenter.lng
          JMap.Event.Map.on.moveEnd("move-end", (params) => {
            const center = params.map.getCenter()
            document.getElementById("latitude").textContent = center.lat
            document.getElementById("longitude").textContent = center.lng
          })
        }
      },
    };
  </script>
  <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-core-js@jmap-ng-doc"></script>
</body>
</html>

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

Core Map options

Map options are gathered in a "map" json object in the javascript configuration.

JMap NG extensions are plug-in modules taht can exetend the functionalities present in JMap NG App. You can develop and add your own extensions.

For more information about JMap NG extensions, refer to this section.

The JMap NG App extension API documentation is available here.

A simple example

The example bellow shows a simple extension that creates a panel and displays some text on it.

Try it out in Codepen.io

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
  	<script type="text/javascript">
      const extensionId = "my-extension"
      window.JMAP_OPTIONS = {
        restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
        anonymous: true,
        projectId: 1,
        map: {
          center: {
            x: -74.17355888315548,
            y: 45.504030591808856
          },
          zoom: 8.04872607654608
        },
        hideMainLayout: true,
        application: {
          panel: `${extensionId}-panel`,
          extensions: [{
            id: extensionId,
            panelIcon: "fa-unlock-alt", // this is a font-awesome icon, but you can pass an image url
            panelTitle: "My custom extension",
            panelTooltip: "My custom extension",
            onPanelCreation: containerId => {
              const container = document.getElementById(containerId)
              const span = document.createElement("span")
              span.id = "my-text"
              span.innerHTML = "This is a custom panel"
              container.append(span)
            },
            onPanelDestroy: (containerId) => {
              document.getElementById(containerId)
              const text = document.getElementById("my-text")
              if (text) {
                text.remove()
              }
            }
          }]
        }
      }
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>
  </body>
</html>

There is another way to load your extension, after the JMap NG App has been loaded.

You can register the previous extension like this:

JMap.Application.Extension.register({
  id: "my-extension",
  panelIcon: "fas fa-wrench",
  panelTitle: "My custom extension",
  panelTooltip: "My custom extension",
  onPanelCreation: containerId => {
    const container = document.getElementById(containerId)
    const span = document.createElement("span")
    span.id = "my-text"
    span.innerHTML = "This is a custom panel"
    container.append(span)
  },
  onPanelDestroy: (containerId) => {
    document.getElementById(containerId)
    const text = document.getElementById("my-text")
    if (text) {
      text.remove()
    }
  }
})

A more complete example

The example bellow shows you a more sophisticated extension named "Favourite locations".

It adds points on the map where you click, and displays a list of your "favourite" locations. You can also toggle the visibility of the point layer.

Try it out in Codepen.io

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta charset="UTF-8" />
    <style>
      html,
      body {
        padding: 0px;
        margin: 0px;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <script type="text/javascript">
      function getFavouriteExtension(extensionId) {
        const LAYER_ID = "favourite-custom-layer"
        const CLICK_LISTENER_ID = "favourite-click-listener"
        const ACTION_ADD = "FAVOURITE_ADD_LOCATION"
        const ACTION_DEL = "FAVOURITE_DEL_LOCATION"
        const ACTION_SET_VISIBILITY = "FAVOURITE_SET_LAYER_VISIBILITY"
        let panelContainerId
        let visibilityContainerId
        let locationsContainerId
        let reduxUnsubscribe
        let map
        let previousLocationCount = 0
        let previousLayerVisibility = true
        // return the JMap application current redux state
        function getAppState() {
          return JMap.getDataStore().getState().external["jmap_app"]
        }
        // return the favourite extension current redux state
        function getFavouriteState() {
          return JMap.getDataStore().getState().external[extensionId]
        }
        // return the primary color in use by JMap Application
        function getPrimaryColor() {
          return getAppState().ui.theme.palette.text.primary
        }
        // return the secondary color in use by JMap Application
        function getSecondaryColor() {
          return getAppState().ui.theme.palette.text.secondary
        }
        /**
         * This is the favourite service.
         * It is where we change the redux store values,
         * then the reduxChangeHandler function will react to state changes.
         **/
        const favouriteSVC = {
          // returns all existing locations
          getLocations: () => getFavouriteState().locations.slice(),
          // return true if the layer is displayed on the map
          getLayerVisibility: () => getFavouriteState().isLayerVisible,
          // add a location in the redux store
          add: location =>
            JMap.getDataStore().dispatch({
              type: ACTION_ADD,
              location: location
            }),
          // remove a location in the redux store at the index
          del: index =>
            JMap.getDataStore().dispatch({
              type: ACTION_DEL,
              index: index
            }),
          // if false, hide the layer on the map, else show it
          setLayerVisibility: visibility =>
            JMap.getDataStore().dispatch({
              type: ACTION_SET_VISIBILITY,
              visibility: visibility
            })
        }
        /**
         * This is the redux reducer, a pure javascript function.
         * It reacts to the actions you dispatch, and changes the data in the store.
         **/
        function reduxReducer(currentFavouriteState, action) {
          if (!currentFavouriteState) {
            currentFavouriteState = {
              locations: [],
              isLayerVisible: previousLayerVisibility
            }
          }
          switch (action.type) {
            case ACTION_ADD: {
              const newFavouriteState = { ...currentFavouriteState, locations: currentFavouriteState.locations.slice() }
              newFavouriteState.locations.push(action.location)
              return newFavouriteState
            }
            case ACTION_DEL: {
              const newFavouriteState = { ...currentFavouriteState, locations: currentFavouriteState.locations.slice() }
              newFavouriteState.locations.splice(action.index, 1)
              return newFavouriteState
            }
            case ACTION_SET_VISIBILITY: {
              return { ...currentFavouriteState, isLayerVisible: action.visibility }
            }
          }
          return currentFavouriteState
        }
        // Create the dom elements to display the layer visibility checkbox
        function displayLayerVisibility() {
          if (!visibilityContainerId) {
            visibilityContainerId = `${panelContainerId}-visibility`
          }
          const panelContainer = document.getElementById(panelContainerId)
          panelContainer.style.color = getPrimaryColor()
          panelContainer.style.padding = "1rem"
          const container = document.createElement("div")
          container.id = visibilityContainerId
          const span = document.createElement("span")
          span.innerHTML = "Display locations on map"
          container.append(span)
          const input = document.createElement("input")
          input.type = "checkbox"
          input.style.cursor = "pointer"
          input.style.marginLeft = "1rem"
          input.checked = favouriteSVC.getLayerVisibility()
          input.onclick = () => favouriteSVC.setLayerVisibility(!favouriteSVC.getLayerVisibility())
          container.append(input)
          panelContainer.append(container)
        }
        // Create the dom elements to display the locations list
        function displayLocations() {
          if (!locationsContainerId) {
            locationsContainerId = `${panelContainerId}-locations`
          }
          const panelContainer = document.getElementById(panelContainerId)
          const container = document.createElement("div")
          container.id = locationsContainerId
          container.style.marginTop = "1rem"
          container.style.display = "flex"
          container.style.flexDirection = "column"
          const locations = favouriteSVC.getLocations()
          if (locations.length === 0) {
            const span = document.createElement("span")
            span.innerHTML = "Click on the map to add your favourite locations"
            span.style.color = getSecondaryColor()
            container.append(span)
          } else {
            for (var i = 0; i < locations.length; i++) {
              const location = locations[i]
              const index = i
              const locationContainer = document.createElement("div")
              locationContainer.style.marginTop = "1rem"
              locationContainer.style.display = "flex"
              locationContainer.style.alignItems = "center"
              locationContainer.style.justifyContent = "space-between"
              const locationSpan = document.createElement("span")
              locationSpan.innerHTML = `LNG = ${location.x.toFixed(5)} | LAT = ${location.y.toFixed(5)}`
              locationContainer.append(locationSpan)
              const button = document.createElement("button")
              button.innerHTML = "X"
              button.title = "Click to remove the location"
              button.style.cursor = "pointer"
              button.onclick = () => favouriteSVC.del(index)
              locationContainer.append(button)
              container.append(locationContainer)
            }
          }
          panelContainer.append(container)
        }
        // Remove in the dom the container, given the container id
        function removeContainer(containerId) {
          const container = document.getElementById(containerId)
          if (container) {
            container.remove()
          }
        }
        function refreshLocations() {
          removeContainer(locationsContainerId)
          displayLocations()
        }
        // Locations have changed in the store, we add or remove it in the mapbox source.
        function refreshLayer() {
          map.getSource(LAYER_ID).setData({
            type: "FeatureCollection",
            features: getFavouriteState().locations.map(l => ({
              type: "Feature",
              geometry: { type: "Point", coordinates: [l.x, l.y] }
            }))
          })
        }
        /**
         * The redux function that is called when the redux state changed.
         * If a favourite value has changed it refreshes the ui or the map.
         **/
        function reduxChangeHandler() {
          const state = getFavouriteState()
          if (previousLocationCount !== state.locations.length) {
            previousLocationCount = state.locations.length
            refreshLocations()
            refreshLayer()
          }
          if (previousLayerVisibility !== state.isLayerVisible) {
            previousLayerVisibility = state.isLayerVisible
            map.setLayoutProperty(LAYER_ID, "visibility", state.isLayerVisible ? "visible": "none")
          }
        }
        /**
         * The map interactor, more details on:
         * https://k2geospatial.github.io/jmap-app/latest/modules/jmap.map.interaction.html
         **/
        const mapInteractor = {
          init: mapboxMap => {
            map = mapboxMap
            map.addSource(LAYER_ID, {
              type: "geojson",
              data: { type: "FeatureCollection", features: [] }
            })
            map.addLayer({
              id: LAYER_ID,
              type: "circle",
              source: LAYER_ID,
              paint: {
                "circle-radius": 10,
                "circle-color": "#0066ff"
              }
            })
            JMap.Event.Map.on.click(CLICK_LISTENER_ID, params => {
              favouriteSVC.add(params.location)
            })
            JMap.Event.Map.deactivate(CLICK_LISTENER_ID)
          },
          activate: () => {
            JMap.Map.getMap().doubleClickZoom.disable()
            JMap.Event.Map.activate(CLICK_LISTENER_ID)
          },
          deactivate: () => {
            JMap.Map.getMap().doubleClickZoom.enable()
            JMap.Event.Map.deactivate(CLICK_LISTENER_ID)
          },
          terminate: () => {
            JMap.Event.Map.remove(CLICK_LISTENER_ID)
            map.removeLayer(LAYER_ID)
            map.removeSource(LAYER_ID)
          }
        }
        // Returns the extension object that will be registered by the JMap Application
        return {
          id: extensionId,
          panelIcon: "fa-thumbtack",
          panelTitle: "My favourite locations",
          panelTooltip: "My favourite locations",
          onPanelCreation: containerId => {
            if (!panelContainerId) {
              panelContainerId = containerId
            }
            displayLayerVisibility()
            displayLocations()
            reduxUnsubscribe = JMap.getDataStore().subscribe(reduxChangeHandler)
          },
          onPanelDestroy: () => {
            removeContainer(visibilityContainerId)
            removeContainer(locationsContainerId)
            reduxUnsubscribe()
          },
          interactor: mapInteractor,
          serviceToExpose: favouriteSVC,
          storeReducer: reduxReducer
        }
      }
      const extensionId = "favourite"
      window.JMAP_OPTIONS = {
        restBaseUrl: "https://jmapdoc.jmaponline.net/services/rest/v2.0",
        anonymous: true,
        projectId: 1,
        map: {
          center: {
            x: -73.92251114687645,
            y: 45.52559621002098
          },
          zoom: 9.07038517536697
        },
        hideMainLayout: true,
        application: {
          panel: `${extensionId}-panel`, // will display the favourite panel when application starts
          extensions: [getFavouriteExtension(extensionId)] // will register the favourite extension
        }
      }
    </script>
    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/jmap-app-js@7_Kathmandu_HF3"></script>
  </body>
</html>