Map V2 Component

Estimated Reading Time:  14 minutes

Overview

The Map V2 component is a Charts & Graphs component for displaying a visual map in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. can use a Data Reference Key containing an address string A string is an object that represents a sequence of characters. Strings typically hold data represented in text form. to move the map view to the address location and pin it. You can also enable other map features, like Satellite View and Street View.

IMPORTANT  A Google Map API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. key is required when using this component. Visit the Google Maps Platform website to obtain a key:  https://developers.google.com/maps/documentation/javascript/get-api-key.

Map V2 uses a Google Maps API key to access Google's Maps Javascript API and Geocoding APIs. Each API serves a different function:

• Maps Javascript API: Displays a map that includes imagery and local data from the same source as Google Maps.

• Geocoding API: Converts an address to a geographic coordinate. The Maps V2 component uses this API when referring to the address in the Data Reference Key field.

You'll find the Map V2 component in the Charts & Graphs group to the left side of the Module Builder.

About the Configuration Window

Display Panel

Data Panel

Data Source

Setting	Description
Data Reference Key	Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the component that contains a formatted address string. If a valid address exists, moves the map view to the address location and places a pin on it. TIP  To retrieve an address from an Address Search component, use a Data Workflow Get operator to extract the formatted address.
Google Key	Enter an API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. key to access Google's Maps API. *This field is required to use the Map V2 component. Acquire an API key here: https://developers.google.com/maps/documentation/javascript/get-api-key. IMPORTANT  The API Key in this field is hard-coded and cannot be dynamically changed.

Data Storage

Setting

Description

Store in Database

The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. Triggering a module save event using a Button component with an Action Type of Save. Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. NOTE  By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to (OFF) when you don’t want to store the values from this field in the database. NOTE  When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. To learn more about Store Data in Database in the context of API modules, see the panelResponse Panel section of the API Specification Snippet article in our In-Product Help. TIP  Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to  (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked.

Validation Panel

User Input

Setting	Description
Required	This setting is currently in development.

Advanced Panel

Adding a Map V2 Component

For this example, create a module that lets end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. search for map locations by entering an address into an Address Search component. You need a Google Map API key to configure this module. Visit the Google Maps Platform website to obtain a key:  https://developers.google.com/maps/documentation/javascript/get-api-key.

What You Need

To configure this module, you need the following components:

• 1 Address Search component
• 1 Decisions component
• 1 Data Workflow component
• 1 Hidden component
• 1 Map V2 component

Configure the Address Search Component

First, add an Address Search component, so end-users can enter an address that stores in the Map V2 component.

1.

In the Module Builder, drag and drop a Address Search component onto the canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter address.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Address Search.

4.

Under Address Display Options, set the Show Street, Show City, Show State, and Show Zip toggles to (ON).

5.

To the left of the component's configuration window, select Data.

6.

From the Select API drop-down, select an available Google Places API. If you are in the Unqork Training environment, select Test Google Places API.

7.

Click Save & Close.

Configure the Decisions Component

Add a Decisions component to make the Map V2 component visible and trigger a Data Workflow component to get the address from the Address Search component.

1.

Drag and drop a  Decisions component onto the canvas, placing it below the address Address Search component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter ruleMap.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter ruleMap.

4.

In the INPUTS table, enter the following:

5.

In the OUTPUTS table, enter the following:

6.

In the MICRO DECISIONS table, enter the following:

7.

Click Save.

Configure the Data Workflow Component

The Data Workflow component retrieves the formatted address from the Address Search component. Then, it sends it to a Hidden component that the Map V2 component references.

1.

Drag and drop a Data Workflow onto the canvas, placing it below the ruleMap  Decisions component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dwfFormatAddress.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter dwfFormatAddress.

4.

From the Trigger Type drop-down, select Watch.

Configure the Input Operator

The Input operator brings the data from the address  Address Search component into the Data Workflow.

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Get Operator

The Get operator selects the formatted key from the address Address Search component. The formatted key is an address in a string A string is an object that represents a sequence of characters. Strings typically hold data represented in text form. format.

1.

Drag and drop an Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (right) of the Input operator to the input port (left) of the Get operator.

Configure the Output Operator

The Output operator sends the data to the hiddenAddress  Hidden component to store it.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the Get operator to the input port (left) of the Output operator.

4.

Click Save.

Your completed Data Workflow looks like the following:

Configure the Hidden Component

The Hidden component stores the formatted address retrieved from the Data Workflow component. The Map V2 component uses the Hidden component as its Data Reference Key for placing a pin on the map view.

1.

Drag and drop a Hidden component onto the canvas, placing it below the dwfFormatAddress  Data Workflow component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter hiddenAddress.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter hiddenAddress.

4.

Click Save & Close.

Configure the Map V2 Component

Lastly, add a Map V2 component for end-users to visualize the address they search for. You'll configure the component to be hidden. The Decision component from earlier makes it visible when an end-user enters an address.

1.

Drag and drop a Map V2 component onto the canvas, placing it below the hiddenAddress  Hidden component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter mapAddress.

3.

In the Label Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Address.

4.

Set the Hide Field toggle to (ON). This hides the map view until the user has entered an address.

5.

In the Data Reference Key field, enter hiddenAddress.

6.

In the Google Key field, enter your Google Maps API key. You can acquire one here: https://developers.google.com/maps/documentation/javascript/get-api-key.

7.

Click Save & Close.

8.

Save your module.

Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. You'll see the following functionality:

Structure of a Map V2 Component's Data

When using a Data Reference Key, the Map V2 component stores the address string in a key and the coordinates in an array. From the previous example, you'll see the following see in Express View and in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.:

Resources

• Modify the Map V2 component using the toolbar settings.

• Search the Community Hub.

• Learn more about the Search Address Search component.

• External: Learn more about the Google Maps API.