Hexagon Geospatial
MENU

Shared Samples

M.App Portfolio provides a modern, cloud-based platform for creating and delivering diverse geospatial web applications.
Through the M.App Studio, our partners can design, build, and deploy their own Hexagon Smart M.Apps.
Showing results for 
Search instead for 
Do you mean 

Exercise: Creating custom Upload Panel tutorial.

by Technical Evangelist ‎07-26-2016 04:24 AM - edited ‎10-11-2016 09:54 AM (1,262 Views)

Introduction

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.crs
  • $GP.map
  • $GP.ui.sidebar

An attachment contains files required to finish following exercise.

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

 

Description

Step 1. Creating the App.

  1. Create New M.App

appcreating.png

  1. Set content - world
  2. Customize

customize.png

 

Step 2. Customization

- JS Code

  1. Creating a new panel in the sidebar.
$GP.ui.sidebar.add({
    id: "sidebar-panel-2",
    title: "Upload Panel",
    style: "background-position: 0px 0px;" /* CHANGE_ICON */
}, function(ret) {
    //Uncomment line below to use debugger.
    //debugger;
    buildUploadPanel("sidebar-panel-2");
    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";
    input.id = "fileInput";

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

    sidebar = document.getElementById(sidebarId);
    sidebar.appendChild(input);
    sidebar.appendChild(button);
}

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.

uploadpanel.png

 

3. displayOnMap function.

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

    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]
            };

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

            $GP.map.zoom({
                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 $GP.crs.transform. Lastly, map zooms to the bbox - this can be achieved with the $GP.map.zoom method call.

 

4. AddToShoeBox function.

function addToShoeBox(itemId) {
    $GP.m_app.platform.shoebox.getList(function(shoeboxes) {
        var currentShoebox = shoeboxes[0],
            currentShoeboxId = currentShoebox.getId()
        $GP.m_app.platform.shoebox.addEntry({
            id: itemId,
            name: "shoebox entry name"
        }, currentShoeboxId, function(shoebox) {}, function(error) {
            console.error(error);
        });
    }, function(error) {
        console.error(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 = file.name;
    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)) {
            return;
        }

        itemId = response.itemId
        addToShoeBox(itemId);

        $GP.m_app.platform.publications.publish({
            id: itemId,
            title: "UploadedFile.tiff"
        }, function(publishInfo) {
            if (publishInfo.success === false)
                return;

            $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

upload.png

 

Uploaded file in content view.

uploadshoe.png