Advance Map control

The Advance Map Control is used to display certain locations to the user or accept a location from the user. It is very similar to the existing Map control, but the difference is that in this you can not only search for locations or navigate to your current location using the built-in options but also can mark locations with various coordinates.

This advance map is useful to mark multiple coordinates using various available tools. This control also can handle an array of objects as data in the bind data section.

Control Properties

Info

  • Label : Label is the text that is displayed above the Map and helps the user to understand the significance of the map.

  • Properties : These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

  • Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “map” type.

  • Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name based on the Label name given to the control.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.

  • Submit Data : This field lets you determine whether to send the value of the control or not in the Workflow, based on various control states. There are three conditions that could be set for this field.

  • Always : If this condition is selected, the data in the Map Control will be submitted irrespective of the state of the Map Control.

  • Never : If this condition is selected, the data in the Map Control will never be submitted irrespective of the state of the Map Control.

  • No When Hidden : If this condition is selected, the data in the Map Control will be submitted when the Map Control is visible. It will not be submitted when the Map Control is hidden.

  • Required : If you select the required option, the field becomes a mandatory field and the user can not submit without filling it.

  • Read Only : When you select this option, the user will no longer be able to edit this field.

  • Hidden: The hidden option helps you to hide the field from the user. This might help to perform some computation that you do not want the user to view or when you want to show certain fields only when a specific condition is met/not met.

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the Map Control even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

  • Hide Label : This option hides the label of the Map Control from the view.

  • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here .

  • By default Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

  • Hide on desktop: This option hides the selected control in the desktop view.

  • Hide on Mobile: This option hides the selected control in the mobile view.

  • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.

  • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.

Note: Dynamic height, Hide on Mobile, Hide on Desktop, Maintain space when hidden properties are used in Freeflow Editor only.

Properties

  • Column Mappings:

    • Type: When you have bound the data to the control, you can select from here to choose the column defining the type of tool to be used.
    • Coordinates: When you have bound the data to the control, you can select from here to choose the column defining the coordinates for the map to be used.
    • Radius: When you have bound the data to the control, you can select from here to choose the column defining the radius of the circle for circle type marking tools, on the map.
    • Allow Editing: This option allows users to edit points and coordinates on the map…
    • Edit Options: This dropdown enables users to select from different tools to mark coordinates/areas on the map. You can select single or multiple tools from the tools’ list – polyline, polygon, rectangle, circle, marker, and circlemarker.

If you switch to the Advance editor option, you will have an additional property for your advance map control.


Map Height: This option lets you set the height of the map in pixels.

How to Use Advance Map Control?

Start with selecting the Advance Map Control from the Advance section of the Controls Menu.

Advance Map control – tools

So, when you preview the advance map control you can see that there are various tools on the left side of the control. These tools support getting a better view of the map, searching for places on the map, locating positions on the map, and also for marking positions on the map.

Draw a polyline: This tool helps in drawing lines on the map by selecting different points on the map. When you select the draw a polyline tool, it will ask you to click to start drawing line, and with every click, on the map, you will mark different coordinates on it. To end this, you can either click on the last point or click finish right beside the tool.

This tool returns an array of objects with two keys: type and coordinates. For this tool, the type is polyline, and coordinates consist of the latitude and longitude of each point.

Draw a polygon: This tool helps in drawing polygon shapes on the map by selecting different points on the map. When you select the draw a polygon tool, it will ask you to click to start drawing shape, and with every click, on the map, you will mark different coordinates as well as the enclosed areas by the points, on it. To end this, you can either click on the first point or click finish right beside the tool. These marked points will create a polygon shape and the area within will be marked.

This tool returns an array of objects with two keys: type and coordinates. For this tool, the type is polygon and coordinates consist of the latitude and longitude of each point/side of the polygon.

Draw a rectangle: This tool helps in drawing rectangle shapes on the map by dragging a rectangle of the desired size on the map. When you select the draw a rectangle tool, it will ask you to click and drag to draw rectangle, and you just have to click and drag to draw the desired size rectangle with four corners as coordinates. To finish the drawing just release the mouse.

This tool returns an array of objects with two keys: type and coordinates. For this tool, the type is rectangle and coordinates consist of the latitude and longitude of four corners of the rectangle.

Draw a circle: This tool helps in drawing circle shapes on the map by dragging a circle of the desired size on the map. When you select the draw a circle tool, it will ask you to click and drag to draw circle, and you just have to click and drag to draw the desired size of the circle with a center coordinate of the circle. To finish the drawing just release the mouse.

This tool returns an array of objects with three keys: type, coordinates, and radius. For this tool, the type is circle, coordinate consists of the latitude and longitude of the center, and radius is the radius of the circle.

Draw a marker: This tool helps in drawing marker shapes on the map by simply placing markers on the desired location on the map. When you select the draw a marker tool, it will ask you to click map to place marker, and you just have to click on the map, and the marker will be added on that particular coordinate.

This tool returns an array of objects with two keys: type and coordinates. For this tool, the type is marker, and the coordinate consists of the latitude and longitude of that point of the marker.

Draw a circlemarker: This tool helps in drawing circle shapes on a map of a fixed size. When you select the draw a circlemarker tool, it will ask you to click map to place circlemarker , and you just have to click on the map. This will create a circle with a fixed radius on the map.

This tool returns an array of objects with three keys: type, coordinates, and radius. For this tool, the type is circle, the coordinate consists of the latitude and longitude of the center. and the radius is fixed to 10 pixels.

Edit Layers: This tool will help to edit existing coordinates and markers on the map.

Delete Layers: This tool helps in deleting a single feature (markers or coordinates or marked areas) or deleting all features on the map.

Data Bind Section

The Advance Map Control will then appear on the screen in the builder, you can then set different methods to bind data.

  1. Data: This is the data that does not change over a period of time. Such data is used to assign default values in fields in your application. The static data should be based on JSON data type of array of objects consisting of type and coordinates.

  2. Controls: This allows you to get data from one of the App controls.

  3. Variables & Keywords: This assigns the value of the variables and keywords defined or available in the app.

  4. Query String: You can also select from the available query string to bind data to the control.

  5. LoggedIn User: You can display the properties related to the LoggedIn User like username, usermail, Admin, status, and so on. You can select a single property only. Select column and click Save .

  6. Connectors: This allows you to select a configured connector and call its API to fetch values and bind the values returned by the respective API. You can select multiple keys to display values.

  7. Custom Formula: This can be used to apply formulas and store the output of those formulas. You can learn more about formulas here.

  8. Custom JavaScript: You can also add a Custom JavaScript to fetch data and use it for your app operations.

NOTE: The data with array of objects used to bind in the advance map control must have at least two keys – type and coordinates, and the type key must be one of the tools present in the control, which are – polyline, polygon, rectangle, circle, marker and circlemarker.

Now let’s see the result after binding static JSON data to the advance map control.

Data:

App preview: