Today we wanted to show off something cool we’ve recently added for customers using VertiGIS Studio Mobile. With the recent release of version 5.19, the VertiGIS Mobile `Capital City` Try App now includes some new markup commands for you to try out.
To check out the new capabilities, launch the Capital City Try App.
Once in the Capital City Try App, you’ll notice a ‘markup’ button, located in the top right corner, under the I Want To… menu:
Clicking this button will reveal some new options for working with markup.
6 new buttons will appear, each configured with some markup operations. These buttons are configured as follows, from top to bottom, left to right:
- Text Markup Workflow – add text to the map, specifying the string, size, font, color, etc.
- Point Markup Workflow – add a point to the map, specifying the marker style, size, color, etc.
- Line Markup Workflow – sketch a line on the map, specifying the line style, thickness, color, arrow placement, etc.
- Shape Markup Workflow – sketch a shape on the map, specifying the fill style, line style, colors, etc.
- Clear Markup Command – calls a command that will clear all markup from the map.
- Markup Description Workflow – a basic display form workflow that describes the other button options.
You can freely try these markup Workflows within the Capital City app. After playing around with them, you may find yourself wondering “How can I add this functionality to my own VertiGIS Studio Mobile apps?”
Good news: if you are a VertiGIS Studio Mobile customer, these Text, Point, Line and Shape Workflows are publicly available, and can serve as guiding templates to get you started with markup.
Not a VertiGIS Studio Mobile customer yet? Learn more about this powerful framework for developing industry-leading mobile GIS apps here.
To get started, open one of the starter Workflows below. Save yourself a copy of the Workflow in Workflow Designer, incorporate it into your app, or adapt it to suit your needs!
Point Markup Workflow: https://apps.vertigisstudio.com/workflow/designer/#workflow=55315ec9c71d4bc08c2029e76c2160f0
Shape Markup Workflow: https://apps.vertigisstudio.com/workflow/designer/#workflow=d71f787d21d74a4295cb2645c23455b6
These workflows share a common structure. As an example, let’s take a closer look at the `Add Text` Workflow, to understand how they’re configured.
Each Workflow is driven by a Display Form, which takes user inputs and configures the look and feel of the markup we’re going to add to the map:
Drilling into the display form, we’ll observe that there are related inputs. For text, this includes options for specifying our markup string, font, bold, italic and bold, color, size and opacity.
Options that are specified in this form will be applied to our sketch when we click the `Add Text` button. We can see how that is done by selecting our button bar and examining the `click` Event. When we click `edit`, we can see how the sketch is constructed and executed, using our inputs.
We’ll start by constructing our RGBA color by combining our `Opacity` and `Color` inputs from the display form:
Next, we’ll construct the ESRI Text symbol. This is achieved through the use of the `Get Symbol From JSON` activity:
The JSON provided to this activity will reflect the user selections in the Display Form inputs:
When we go to draw, we can give a better user experience by showing a notification for how to place the text (double clicking on the map), and by snapping the panel closed:
Finally, we’ll invoke the drawing experience by calling a `drawing.draw` command. Most notable, we’ll need to specify the geometryType (point), and the symbol (the `esriTS` text symbol previously constructed).
Other properties like `finishOnDoubleClick` let us complete a drawing with a double click.
Once the double click is performed on the map, the text is placed at the cursor location. Some cleanup activities are then run to hide notifications and snap the panel back up.
And you’ll get a result that looks something like this:
Once text, point, line or shape markup is added to the map, you can save the map image and share it where required.
Currently, markup drawn on the map will persist for the app session duration, or until the app is refreshed. You can use the `eraser` button to clear all markup from the map.
We hope this inspires you to take a crack at adding these markup workflows to your VertiGIS Studio Mobile apps that could benefit from it. If you have any questions, please don’t hesitate to contact us.