Perspective - Custom Controls Example

In this example, we'll set up three custom controls on a map component. The controls will be icons in the top right corner. When a user clicks on the home icon, the map will return to its default settings. When they click on the waves icon, the map navigates to the big island of Hawaii. When the snowflake icon is clicked, the map navigates to the Sierra Mountain range near South Lake Tahoe California.

1. Create a folder under Views called Components.

2. Next we'll create the view that will have the custom controls. In the Components folder, create a flex view called MapLocations. The MapLocations view will be embedded directly into the map component, and will provide some icons that users can click on to modify the map.

3. Set the Direction to "Row", and Justify to "Space Evenly".

4. You'll want to resize MapLocations so that it's close to the size you'd like to see it. Using the guides in the Designer, we'll set the width to about 200px and the height to about 50px.

5. To help the controls stand out from the map, let's give them a background. Select the root container, open the Style Editor, and apply the following changes:

   1. backgroundColor: #D5D5D5

   2. BoarderRadius: Set to 10px on each corner

      

6. Drag an icon component onto the view.

   1. Set the following properties for the icon:
      
      • color: #3CACF9
        
      • path: material/home
        
      • style: Open the style editor. Under Misc, set Cursor to "Pointer"
   2. Right-click on the icon and select Configure Events.
   3. Select the Mouse Events, onClick event.
   4. Click the Add icon and select the Script action:

   

   1. In the Configure Script Action window, scroll down to the second line and enter the following:

   system.perspective.sendMessage("NavigateMap", payload = { "lat": 38.660867, "lng": -121.159728, "zoom": 13 }, scope = "session")

   The script above will attempt to invoke a message handler named "NavigateMap", and pass some coordinates to it. At this point, we have not configured NavigateMap yet. We will do so in a later step.

   1. Click OK to save the script.
   2. Next, duplicate the icon. We'll configure this icon to represent a different location. Select the first icon, copy it, and paste it. Make the following property change to it:
      
      • path : material/ waves
   3. Right-click on the second icon and select Configure Events.
   4. Select the Mouse Events, onClick event.
   5. There should already be an action defined on this event, since our copy also has the script we wrote earlier. Select the script action.
   6. In the Configure Script Action window, scroll down to the second line and replace the "lat" and "lng" values in the payload with the following:
      
      • lat: 19.6089562306
        
      • lng: 155.385131836
        The script should look like the following:

      system.perspective.sendMessage("NavigateMap", payload = { "lat": 19.6089562306, "lng": -155.385131836, "zoom": 13 }, scope = "session")
   7. Click OK to save the script.
   8. Next, duplicate either of the icons again, and change the following property:
      
      • path : material/ac_unit
   9. Right-click on the third icon and select Configure Events.
   10. Select the Mouse Events, onClick event.
   11. Select the Script action.
   12. In the Configure Script Action window, scroll down to the second line and replace the "lat" and "lng" values in the payload with the following:
       
       • lat: 38.8665777761
         
       • lng: -119.848823547
         The script should look like the following:
         

       system.perspective.sendMessage("NavigateMap", payload = { "lat": 38.8665777761, "lng": -119.848823547 }, scope = "session")
   13. Click OK to save the script.

   

7. Next we'll set up the view with the Map component. In the Components folder, create a new Flex view and name it Map.

8. Drag a Map component onto the view.

9. In the Perspective Property editor, set position.grow on the map to 1, so the map takes up all available space.

10. Also in the Perspective Property editor, expand the props.customControls property.

11. Click the Add icon to add an array element.

12. For the props.customControls.0 properties, set the following:
    

    • enabled: true
      
    • path: Components/MapLocations
      
    • position: top-right
      You'll now see the icons from the MapLocations view appear in the upper right corner of the Map component.

    

13. Next, we need to configure a message handler on the Map, so when our icons the map will respond. With the Map component selected, right-click and select Configure Scripts.

14. Double click on Add handler to add a new message handler.

15. Set the Message Type to the handler name we used in the icon scripts: NavigateMap.

16. Set Listen Scopes to only "Session".

17. Type the following script:

    self.panTo(payload)

    

18. Click OK to commit the script.

19. Save your project.

20. Put your project into Preview mode and test it out. Click each icon and see how the location on the Map changes.