Overview

Integrating third-party imagery or map services into your VertiGIS Studio Web application is simple and highly effective. By using the system.open-url command, you can dynamically generate URLs for services like Google Street View or other providers with a supported API. This functionality is easily implemented via the Map Context Menu, allowing users to right-click on the map to access these services directly.

This example serves as a basic starting point, showcasing a straightforward approach to integration. For more advanced use cases, consider implementing guided user interfaces using VertiGIS Studio Workflow or embedding the imagery directly within your application for a more seamless user experience using a custom component.
 

Disclaimer

When integrating third-party services into your application, always ensure you comply with their licensing, usage, and attribution requirements. For example, Google’s Terms of Service may require specific attribution or usage limits when leveraging their APIs. Failing to adhere to these requirements may result in the termination of service or legal implications. It is your responsibility to review and follow the terms provided by the third-party provider.
 

Example Resources

• Live Application Example: App Link
• Designer Configuration Example: Designer Link
• ArcGIS Online Item: AGOL Item Link

Steps to Configure

1. Open your app in VertiGIS Studio Web Designer.
2. Find the Map component to configure it, and in the properties menu on the right scroll down to "Context Menu"
3. Add a Context Menu Action

   • Click 'Add Menu Item', then from the Commands list 'Open a URL'

      

4. Set up the command:
   • Use the following example JSON syntax to configure the system.open-url command:

[
    {
        "name": "system.open-url",
        "arguments": {
            "url": "https://maps.google.com/maps?q=&layer=c&cbll={Location.Feature.Latitude},{Location.Feature.Longitude}",
            "coordinateOption": "xy"
        }
    }
]

• This example specifically integrates Google Street View but can be modified to support any third-party service with a URL-based API.

5. Configure the map context menu item details

• Add a title, icon and description if you so choose. You're done!

Testing the Integration

1. Right-click on the map to open the context menu.
2. Select "Open Google Street View" (or your configured action).
3. Verify that a new browser tab opens with the corresponding imagery or map service for the map point.

Explanation of Key Parameters

url Parameter

• The url defines the external service’s link with placeholders for latitude and longitude:
  • {Location.Feature.Latitude}: The latitude of the selected map point.
  • {Location.Feature.Longitude}: The longitude of the selected map point.
• Example dynamic URL for Google Street View:
  • https://maps.google.com/maps?q=&layer=c&cbll=48.4284,-123.3656

coordinateOption Parameter

• The coordinateOption specifies the type of coordinates used in the URL.
  • xy: Indicates geographic coordinates (latitude, longitude), commonly required by third-party services.
• This ensures accurate handling of the map point’s location.

Why This Is Easy and Flexible

• Minimal Configuration: The command requires only a simple JSON input to setup.
• Dynamic Integration: By leveraging placeholders for coordinates, the solution adapts to any map point selected by the user.
• Customizable: Replace the Google Street View URL with any third-party imagery service URL that accepts latitude and longitude parameters.

Additional Resources

• VertiGIS Studio Web Documentation: system.open-url
• Google Maps Documentation: Constructing URLs for Google Maps
• Other Third-Party API Documentation: Refer to your chosen service’s URL construction guidelines.