Create a custom layer ZIP file

Important: The instructions and explanations in this topic assume you have a basic knowledge of coding in Javascript.

To use a custom layer with the MapApp, you must code the layer using JavaScript. There is a sample project that you can use for development at this site:

https://codesandbox.io/s/zen-cloud-ieb2mm?file=/main.js.

You can edit this sample code, preview the results as you go, then create the ZIP file and download it to your local computer whenever you want.

The sample contains these seven files:

• index.html

• index.js

• locations.json

• main.js

• map.js

• package.json

• webpack.common.js

You will do your editing in the main.js file.

Note: You should develop the custom layer based on OpenLayer 6.15.1.

Editing main.js

The editing changes in the main.js file fall into three main areas: creating the custom layer, exposing the custom layer so it can be used in a map, and associating assets with the layer.

1. The first part of the file is custom code to create the layer.

   

   Create the layer in the function CreateCustomLayer. Here, the layer name is VectorLayer:

   

   

2. Expose the custom layer so it can be used. The exposed function of this class is customLayer.CreateCustomLayer:

   

   Note: You cannot change the class name customLayer or the function name customLayer.CreateCustomLayer.

3. If you want users to be able to associate locations on the custom layer with assets, you can use code similar to the sample shown below.

   The registAssetChange function takes the parameter assetChange. assetChange is a callback function that will trigger an asset change on the map. You can add any logic here and invoke the callback function to change the asset. For example, the example in the sandbox changes the specified asset when the user clicks a pin on the custom layer.

   Note: You cannot change the function name registAssetChangestomLayer. The assetChange function must pass the asset name as a parameter.

   

4. To have the code take further action when the asset is changed, use the onAssetChanged function. This function is triggered when the asset is changed--for example, when the user selects a different navigation node in the VIewApp. You can add any code to handle asset change logic based on the assetName parameter. In the sample below, it invokes the view.setCenter map function to set the map center position.

   

   Note: You cannot change the function name onAssetChanged.

   If you want to set the map center position you must use the map function view.setCenter.However, if both a symbol and a pin are associated with the same asset, view.setCenter may set the map center to either one, because it may query the asset's position several times. When the navigation changes, the map needs to be zoomed to a certain level to set the pin to center.

Resource files

You can create JSON resource files to use in main.js. For example, the sample in the sandbox includes locations.json. To use a JSON file, import it with requires(<path/filename>.json), as shown below, and use it directly.

You can also use other resource files, such as images, CSS files, and so on. When referring to these files, make sure the path to them is correct.

To match the MapApp path, baseUrl is exposed to specify the ViewApp path. All resource file paths should include customLayer.bareUrl, resulting in this format:

customLayer.baseUrl + "/<resource_file_relative_path>"

For example:

Note: Other files found in the template in the sandbox are used to preview the map or compiled into the final .js file. Do not change or remove these files.

Generating the package

Once you have completed developing your custom layer, you need to create the ZIP file which can be used to define the custom layer to the MapApp. If you have used the sandbox described above, follow these steps:

5. Click the down arrow to export all of the files in the sandbox to a local file.

   

6. Install node.js if you do not already have it installed.

7. Launch a command prompt and change to the directory where you have saved the generated custom layer file.

8. Run this script to compile the custom layer with webpack:

   npm run build_customLayer

   

   If the compile is successful, this creates a CustomLayer.js file in the dist folder.

9. Coy all of your other resource files--JSON files, image files, CSS files, and so on--into the folder with CustomLayer.js.

10. Make sure the relative path is correct, then combine all of the files in the dist folder into a ZIP file.

You can now use the ZIP file when creating a custom layer as one of the source maps for the MapApp.

Important: The ZIP file must be les than 2MB in size, or you will not be able to use it in the MapApp.