Introduction
In Oracle APEX, maps are a powerful way to present location-based data visually. But what if you want to go beyond simple tooltips and allow users to drill into a full detail page directly from a map marker? By configuring your map tooltips to act as clickable links, you can guide users from a high-level overview to specific information with just one click. This blog will explain how to make your map’s tooltip open a detail page, creating a smooth and interactive experience.
How to Make the Map’s Tooltip Display a Detail Page
To configure a map in Oracle APEX so that tooltips display links to detail pages, follow these steps:
-
Prepare Your Data Source
-
Your SQL query should return all the data needed for the marker and the link.
-
Example:
SELECT id, store_name AS name, latitude, longitude, 'Click for details' AS tooltip_text, 'f?p=&APP_ID.:50:&SESSION.::NO::P50_STORE_ID:' || id AS detail_link FROM store_locations
-
Replace
50
with the page number of your detail page, andP50_STORE_ID
with the appropriate item name.
-
-
Configure the Map Region
-
In Page Designer, click on the Map region.
-
Under Map Attributes, go to Marker Layer.
-
-
Set Marker Tooltip
-
Set the Tooltip field to the
tooltip_text
column, or build it dynamically using the link. -
To embed a hyperlink, use HTML in the tooltip:
'<a href="' || 'f?p=&APP_ID.:50:&SESSION.::NO::P50_STORE_ID:' || id || '">View Store: ' || store_name || '</a>'
-
Be sure to set Escape Special Characters to No so the HTML renders.
-
-
Optional: Open in Modal Dialog or New Tab
-
To open in a new tab:
<a href="..." target="_blank">...</a>
-
To open in a modal dialog, use a Dynamic Action or link to a page configured as a modal.
-
-
Test and Deploy
-
Run your app.
-
Hover over a map marker, confirm that the tooltip shows the correct link, and test that clicking it navigates to the right detail page.
-
In this example we are going to make the tool tip “clickable and display a pre-existing detail page.
Step 1 – Go to the layer that displays the tooltip.
Step 2- Go to the Link area and select the type of redirect that you want
Step 3 – Set the link
Step 4 - Select
Type- In this case “Page in this application”
Page – This is the application page number. In this case is page #5.
Set Items
Name: The name of the control IN THE DESTINATION page
Value: The value you are passing TO the destination screen. We are passing the Identity column value.
Save your changes and browse. In this example we open a “drawer” form of the location.
Conclusion
Enabling users to navigate from map tooltips to detailed views adds depth and interactivity to your Oracle APEX applications. With just a few changes to your SQL and map region settings, you can create dynamic, data-driven maps that double as navigation tools. This small enhancement provides a big improvement to the user experience, helping your application feel more connected, responsive, and intuitive.
No comments:
Post a Comment