Showing results for 
Search instead for 
Do you mean 

Exercise: Creating custom Upload Panel tutorial.

by Technical Evangelist on ‎07-26-2016 04:24 AM - edited on ‎10-31-2019 02:38 AM by Community Manager (1,517 Views)


This tutorial shows a step by step process of creating a custom user interface control in the MapViever sidebar. The Upload Panel allows user to upload some content/map and display it on the map. 

API methods used in this tutorial:

  • $GP.m_app.platform.catalog
  • $GP.m_app.platform.publications
  • $GP.m_app.platform.shoebox
  • $GP.legend
  • $
  • $
  • $GP.ui.sidebar

An attachment contains files required to finish following exercise.

Link to repository containing code snippets for following exercise: BitBucket repository



Step 1. Creating the App.

  1. Create New M.App


  1. Set content - world
  2. Customize



Step 2. Customization

- JS Code

  1. Creating a new panel in the sidebar.
    id: "sidebar-panel-2",
    title: "Upload Panel",
    style: "background-position: 0px 0px;" /* CHANGE_ICON */
}, function(ret) {
    //Uncomment line below to use debugger.
    document.getElementById("fileUpload").addEventListener("click", previewFile);

This part of the code adds a new panel named "Upload Panel" to the sidebar with "+" icon. The callback activates function "previewFile" after clicking on the "Upload" button.


2. Inner part of the Upload Panel.

function buildUploadPanel(sidebarId) {
    var input, button, sidebar;
    input = document.createElement("input");
    input.type = "file";
    input.className = "custom-file-input"; = "fileInput";

    button = document.createElement("button");
    button.type = "file";
    button.className = "custom-file-upload"; = "fileUpload";
    text = document.createTextNode("Upload");

    sidebar = document.getElementById(sidebarId);

Now, inner parts like buttons are created in the new panel. These elements are created in HTML using DOM methods. Upload panel will contain 2 buttons:

  • "select some files" which opens a window to choose actual files and
  • "upload" which uploads content after clicking.



3. displayOnMap function.

function displayOnMap(mapComponentId, publicationProperties, catalogItemProperties) {
    if (mapComponentId !== "map1")

    var wmsUrl = "/api/v1/services/ogc/wms/" + publicationProperties.serviceName,
        legendDefinition = {
            definitionName: "MAppPlatformWms",
            url: wmsUrl,
            id: publicationProperties.catalogItemId,
            name: publicationProperties.capabilitiesTitle,
            bbox: catalogItemProperties.footprint.envelope.slice(0, 4),
            bboxCrs: catalogItemProperties.footprint.envelope[4],
            supportedCrses: publicationProperties.outputCSList

    $GP.legend.add(legendDefinition, function() {
        var bottomLeftCorner = {
                x: legendDefinition.bbox[0],
                y: legendDefinition.bbox[1]
            topRightCorner = {
                x: legendDefinition.bbox[2],
                y: legendDefinition.bbox[3]

            points: [bottomLeftCorner, topRightCorner],
            sourceCrsId: legendDefinition.bboxCrs,
            targetCrsId: $
        }, function(transformationResult) {
            var points = transformationResult.points,
                bbox = [points[0].x, points[0].y, points[1].x, points[1].y];

                bbox: bbox

Function displayOnMap adds a new content which is published by the WMS service. M.App Studio has functionality which allows user to create a WMS endpoint with content from the M.App Chest. This WMS has the following properties:

 - mapComponentId

 - publicationProperties

 - catalogItemProperties

This properties contain array with coordinates of the content. In the snippet above, coordinates are taken from property catalogItemProperties.footprint.envelope. Next they are used to define the bbox and the crs of the content is set in $ Lastly, map zooms to the bbox - this can be achieved with the $ method call.


4. AddToShoeBox function.

function addToShoeBox(itemId) {
    $GP.m_app.platform.shoebox.getList(function(shoeboxes) {
        var currentShoebox = shoeboxes[0],
            currentShoeboxId = currentShoebox.getId()
            id: itemId,
            name: "shoebox entry name"
        }, currentShoeboxId, function(shoebox) {}, function(error) {
    }, function(error) {

ShoeBox is a place on the list of content displayed in the M.App Studio. This function adds an uploaded file with the name "shoebox entry name" to the list of content. It can be used in the other apps now. 


 5. Uploading function.

function previewFile() {
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    button = document.getElementById("fileUpload")
    button.disabled = true;
    button.innerHTML = "Uploading..."

    fileName =;
    var fileToBeUploaded = {
        mimeType: "image",
        fileName: fileName,
        file: file
    $GP.m_app.platform.catalog.upload(fileToBeUploaded, null, function(response) {
        if (!((typeof response !== "undefined" && response !== null) || !reponse.success)) {

        itemId = response.itemId

            id: itemId,
            title: "UploadedFile.tiff"
        }, function(publishInfo) {
            if (publishInfo.success === false)

            $GP.m_app.platform.publications.get(itemId, function(publicationProperties) {
                $GP.m_app.platform.catalog.get(itemId, function(catalogItemProperties) {
                    displayOnMap("map1", publicationProperties, catalogItemProperties);
                    button = document.getElementById("fileUpload")
                    button.disabled = false;
                    button.innerHTML = "Upload"


Function "previewFile" defines what happens when the user clicks on the "Upload" button and how this button will change after the click action.

At first, the status bar will change from "File not choosen" to "Uploading..". Next, the properties of uploaded file are set in the variable "fileToBeUploaded". Then the file is uploaded using $GP.m_app.platform.catalog.upload method. If uploading the file is succesful, the content is added to the ShoeBox - addToShoeBox(itemId) and published.


Uploaded content



Uploaded file in content view.