Using MapApp Widget with Supertags

The MapApp Widget allows you to view a map containing graphics within a running application. At run time, the map enable users to pan to different areas of the map and zoom in or out to show more or less map detail. The graphics placed in a map typically represent business assets located within an area shown by the map.

For more information, see Map_App Widgets Properties in the Widgets Help.

You can integrate Supertags with MapApp widget to display it in WindowViewer or Web Client.

Follow the workflow to configure the MapApp widget in InTouch HMI.

Step 1: Create Supertags and Supertags instance.

Step 2: Create graphic for the Supertags

Step 3: Configure the Map Settings for the Supertags

Step 4: Configure and use an MapApp widget

Step 5: View the MapApp in WindowViewer or Web Client.

Create Supertags and Supertags instance

The MapApp widget uses the Supertag detail and the location attributes of the instances configured in the Supertag pane of the WindowMaker.

To add the location attributes:

1. Create Supertags and instances.

   For example, you can create an asset $Tank and instances called Tank1 and Tank2.

2. Add attributes to each of the instances. Example, Flow and Temp.

3. Add the location attributes such as "Latitude" and "Longitude".

4. Use the tag dictionary to set the attribute values.

   Example:

   Double click on Tank1 to open the tag dictionary. Set below member (attribute) values:

   Tank1\Flow = 11

   Tank1\Latitude = 33

   Tank1\Longitude = -114

   Double click on Tank2 to open the tag dictionary. Set below member (attribute) values

   Tank2\Flow = 21

   Tank2\Latitude = 36.746

   Tank2\Longitude = -119.773

Create Graphic for the Assets

Use the Graphic Toolbox to create graphics to represent the assets.

Example: Graphics created areTank1Sym and Tank2Sym

To add a graphic to an asset

• Type the name of the graphic

  Or, drag & drop the graphic from the Graphic Toolbox.

Example:

Use Tank1Sym for Tank1 asset’s graphic

Use Tank2Sym for Tank2 asset’s graphic

The graphic can have reference to the other attributes of the asset instance, such as the flow and temp.

Configure the Map Settings for the Assets

Use the MapApp widget to configure the map settings for each asset instance.

To configure the map settings

5. Open WindowMaker.

6. In the Industrial Graphic Toolbox pane, navigate to Widgets, and double-click Map_App.

   The Map Settings configuration screen appears as a tab on the canvas.

7. Configure the Sources for the Map

   

   1. Click Add.

      A new entry is created in the Sources grid.

   2. Enter a name of the source.

   3. Select a map provider from the Provider list, such as Bing.
      This is optional. If no map provider is selected, the MapApp uses the default Map App provider.

   4. Enter the Configuration value
      APIKey: An6Grh5_YKz-_CYnREoNn3nOaBU_rlnVEoc7o8HpSj3GWCvjseEguPvN3rJkZ95T

8. Configure the zoom layers.

   The zoom layers allow you to add the zoom percentage for the map.

   

   To add a zoom layer:

   1. Click Add.

   2. Enter a name to the zoom layer. The Name provided here populates in the Layer column of the Locations tab.

      For example, you can set the layer for Tank1 as Default, and the Tank2 as "State.

   3. Enter the minimum and maximum zoom percentage.

      For example, if you set the minimum and maximum zoom percentage for the State layer as 9% and 31% respectively, then the graphic Tank2Sym is only shown in the map if the zoom percent is between 9% to 31%.

   4. Set a Default Layer: The zoom layer which is set as default shows True, and all other entries show False.

   To delete a Zoom Layer, click Delete.

   To set a zoom layer as default, click Set Default.

9. Configure the Locations

   The location details of each of the asset is retrieved from the Asset attribute value configured in the Asset configuration screen.

   

   The Layer information is retrieved from the Zoom Layers tab.

   For example, you can set the layer for Tank1 as Default, and the Tank2 as "State".

   This means that the graphic Tank2Sym is only shown in the map if the zoom percent is between 9% to 31%.

10. Click OK to save and close the page.

Embed the MapApp widget

You must embed the MapApp widget into a graphic to view it on a map.

To embed the MapApp widget:

11. Create a new graphic. Example, MyApp.

12. Edit this graphic in graphic editor.

13. Right-click anywhere in the graphic editor and select Embed Industrial Graphic.

14. In the Galaxy Browser, select Widgets in the Graphic Toolbox.

15. From the list of Widgets, select Map_App.

    

16. Select and embed the Map_App widget on to the canvas and adjust the size.

17. Edit the widget property for the Map_App widget.

    The Config name is the mandatory field. We recommend you update atleast the following attribute values – ConfigName, CurrentZoom, InitialLatitude, InitialLongitude, and InitialZoom.

    For example, you can set the attribute values as follows:

    ConfigName = Default

    CurrentZoom = 5

    InitialLatitude = 33

    InitialLongitude = -114

    InitialZoom = 30

    

18. Click OK.

19. Embed the graphic on to a frame window and then close and save the window.

View the MapApp in WindowViewer or Web Client

You can view the configured asset and MapApp either in WindowViewer or Web Client.

To view the MapApp in WindowViewer

20. Fast switch to WindowViewer and then open the window containing the MyMap graphic.

21. The Map_App widget and the Supertags are displayed in the configured location on the map.

    

22. Adjust the zoom percentage to zoom-in our zoom-out on the map.

To view the MapApp in Web Client

23. Install Chrome browser and make it the default browser.

24. With WindowViewer running, launch .

25. From the menu, click "MyMap" graphic.Web Client

    The Map_App widget and the Supertags are displayed in the configured location on the map.

26. Adjust the zoom percentage to zoom-in our zoom-out on the map.