Creating Interactive Pop-Ups Using Map Hovering Events in VertiGIS Studio Web – VertiGIS Support

Overview

In this article, we will guide you through using the Map Hovering and Map Hovered events in VertiGIS Studio Web to display a pop-up panel. This panel will provide feature details, reverse geocoding information, map coordinates, and actions for interacting with the identified feature.

What is a Pop-Up?

Pop-ups provide details about map features like hiking trails, land cover, and unemployment rates. They can include attachments, images, charts, text, field lists, and links to external sites.

Previously known as "map-tips" in Geocortex Essentials, pop-ups improve user interaction by offering contextual information without cluttering the map.

For example, they can display detailed property, business, or geographic statistics, showcasing a flexible approach for different applications.

Prerequisites

Access to VertiGIS Studio Web Designer, with a configured VertiGIS Studio Web app with a map.
Familiarity with command chains and results configuration.

Command Chain Configuration

Command chains in VertiGIS Studio Web facilitate interaction between app components based on user inputs. For instance, hovering over the map triggers an identify task that displays a summary of results, ensuring components like the map and pop-up panel work together for a seamless experience.

It's essential to understand how these chains function. The results.set-display-components command controls which UI elements, such as the results summary, are visible. The tasks.identify command fetches data about map features, while results.display-summary presents this data to users. The ui.deactivate command hides the pop-up panel when the mouse moves off a feature.

This interaction enhances app responsiveness and user-friendliness. GIS administrators can customize these chains to emphasize specific map features or initiate actions like updating external data systems or sending notifications.

Example item links

You can access the example app designer here to make your own copy, or download the example app to import it.

Steps to Configure a Pop-Up Panel

1. Panel Setup

You can use individual components directly inside the Popup slot of the Map component. However, in this example, we are using a Panel because it provides greater control over how it appears and allows us to group multiple components into one tidy and cohesive unit.

Create a panel in the Map component under the Popup slot.

Panel Name: Pop-Up Panel Example

Encapsulate this panel in Rows and Columns to control its size and layout. Configure the panel with the following components:

Text Component: Add static or dynamic text to provide context.
Results Summary (Feature Summary): Displays the attributes of identified features.
Columns with Buttons:
- Button 1: Zoom to the identified feature.
- Button 2: Reset the map to the default view.
Address Component: Provides reverse geocoding results.
Map Coordinates Component: Displays the current coordinates of the map pointer.

2. Panel Interface Settings

Enable the following interface buttons on the Pop-Up Panel Example that suit your application behavioural needs. For demonstration purposes, I have enabled all of these - though you may not need them all (or any of them!)

Close Button
Back Button
Maximize Button
Minimize Button
Pop-out Button

3. Configure Map Events

Browse to your Map component, and scroll down to the Events section.

Map Hovering Event

This event is triggered when the user hovers over the map. Configure a custom command chain as follows:

[
  {
    "name": "results.set-display-components",
    "arguments": "item://feature-summary/feature-summary-config-1"
  },
  "tasks.identify",
  "results.display-summary"
]

results.set-display-components: Configures which components to display in the results panel.
tasks.identify: Performs an identify task on the map.
results.display-summary: Displays the identified feature details in the configured results panel.

Map Hovered Event

This event is triggered after the user moves the pointer off a map feature. Add a command to hide the Pop-Up Panel Example:

[
    {
        "name": "ui.deactivate",
        "arguments": "item://stack/42e8a4a4-3c14-4fb8-baeb-64a9e85b5507"
    }
]

ui.deactivate: Deactivates a component with the given ID, causing it to disappear. In this case, we are targeting the Pop-up Panel Rows Model URI.

Additional Considerations

Command Chain Logic for Buttons

Example buttons in this configuration demonstrate how to use the selected feature context to achieve different behaviors:

Zoom to Feature: Configure the button to execute a command chain that zooms to the identified feature.
```
[
   {
       "name": "results.get-features",
       "arguments": "item://feature-summary/feature-summary-config-1"
   },
   "map.go-to-features",
   "highlights. Add-focus"
]
```
This command chain retrieves the selected feature, zooms to its location on the map, and adds a highlight focus for better visibility.

Reset to Default: Configure the button to reset the map view to its default state.
```
[
 "results.clear",
 "map.go-to-initial-viewpoint",
 {
   "name": "ui.display-notification",
   "arguments": {
     "title": "Run away!!",
     "message": "Example notification"
   }
 }
]
```
This chain clears the results, resets the map to its initial viewpoint, and displays a notification with a playful message.

These are just examples—the potential configurations are nearly endless! Buttons can be tailored to trigger additional behaviors such as exporting data, updating related records, or dynamically interacting with other UI components.
Component Styling
- Adjust the layout and styling of the panel components to align with your app’s design requirements.
Testing
- Test the app to verify that hovering over features displays the pop-up panel and that moving the pointer away hides it correctly. Validate that buttons and other interactions perform as expected across various scenarios.

Relevant Links

VertiGIS Studio Documentation

Relevant ArcGIS Documentation

Conclusion

This example demonstrates how you can configure a Pop-Up Panel using the Map Hovering and Map Hovered events in VertiGIS Studio Web. By incorporating feature details, reverse geocoding, map coordinates, and interactive buttons, you can create a powerful and user-friendly interface for exploring map data.

Related to

Example - Pop-Up Panel Hovering - VSW.zip
200 KB Download