Skip to main content

Edit the Layout and App Config

important

This tutorial assumes you are using windows and can run the Universal Windows Version of VertiGIS Studio Mobile.

Many changes to VertiGIS Studio Mobile will require editing the layout and app config for your custom application. The app config (app.json) and layout files (layout-*.xml) are contained in the shared platform agnostic project. Each platform specific project links to these files as an asset or a reference, so editing the files in the platform agnostic project will change them for all platforms. Check out layout and app config to learn more about configuring VertiGIS Studio Mobile with these files.

Prerequisites#

Check out and setup the VertiGIS Studio Mobile SDK Quickstart project.

Simple Layout with a Map#

Replace the layout in the layout-large.xml file and the app config in the app.json file with the content below. Set App1.UWP as your startup project. Build and run VertiGIS Studio Mobile and ensure only a plain map appears.

App1/App1/layout-large.xml
<?xml version="1.0" encoding="utf-8" ?><layout    xmlns="https://geocortex.com/layout/v1"    xmlns:gxm="https://geocortex.com/layout/mobile/v1"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="https://geocortex.com/layout/v1 ../../ViewerSpec/layout/layout-mobile.xsd">    <map id="map1"></map></layout>

Add Buttons#

We can now add some buttons and populate them with some simple commands.

  • Add two <button> components to your layout.
  • Link the buttons to commands defined in the app config.
App1/App1/layout-large.xml
<?xml version="1.0" encoding="utf-8" ?><layout    xmlns="https://geocortex.com/layout/v1"    xmlns:gxm="https://geocortex.com/layout/mobile/v1"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="https://geocortex.com/layout/v1 ../../ViewerSpec/layout/layout-mobile.xsd">    <map id="map1" >        <button id="rotate-button" config="rotate-button" style="map-widget" show-title="true" margin="0.3" slot="top-right"/>        <button id="refresh-button" config="refresh-button" style="map-widget" show-title="true" margin="0.3" slot="top-left"/>    </map></layout>

You've now accomplished the basics of building a VertiGIS Studio Mobile Application using layout and app config. By using components in the layout to compose the visual structure of your application, and app config to describe behavior, you can create highly customized interfaces with custom behavior.

Relevant SDK Samples#

Check out the relevant VertiGIS Studio Mobile SDK Samples:

Next Steps#

Create a Custom Component

Learn how to create a custom component with the SDK

Deploy your Custom Layout and App Config

Deploy your custom layout and app config to a VertiGIS Studio Mobile Application

Learn More About Layout and App Config

Check out the concepts to learn more about the layout and app config

Explore the Tutorials

Check out the the various tutorials on configuring VertiGIS Studio Mobile