Search This Blog

Monday, June 30, 2025

How do I make the map’s tooltip display a detail page

 In Oracle APEX, enhancing your map’s tooltip to link directly to a detail page provides users with immediate access to comprehensive information about a location without cluttering the map. By embedding a URL or APEX page link in the tooltip’s HTML expression, you can turn each marker’s hover text into a clickable link that opens the corresponding detail page—either in a new window, modal dialog, or the same page. This approach creates a seamless user experience, allowing you to combine high‑level geographic visualization with in‑depth data exploration.

In Oracle APEX, you can turn a map marker’s tooltip into a clickable link that opens a detail page, giving users quick access to more information without cluttering the map. First, ensure your SQL query for the Map region returns the primary key of the record you want to view, for example:

SELECT latitude AS lat,
longitude AS lon,
id AS record_id,
name AS location_name
FROM locations

Next, in Page Designer, edit your Map region’s Layer settings. Change the Tooltip Column property to an HTML Expression rather than a static column. Enter an expression like this:

'' || name || '' ||
'View Details' ||
''

Here, replace 20 with the target detail page number and P20_RECORD_ID with the page item that the detail page uses to fetch the record. This HTML will render the name in bold and a “View Details” link below it.

If you prefer to open the detail page in a modal dialog, adjust the link to use the APEX modal link syntax:

'' || name || '' ||
'View Details' ||
''

This code uses the apex.navigation.dialog JavaScript API to open page 20 as a modal, passing the record ID.

Finally, save and run your page. When you hover over a marker, the tooltip will display the HTML with a clickable link. Clicking “View Details” will navigate to or open the detail page, passing the correct record ID so that your detail region or report shows the specific data for that location.

Example

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.

A screenshot of a computer

AI-generated content may be incorrect. 

Step 2- Go to the Link area and select the type of redirect that you want

A screenshot of a computer

AI-generated content may be incorrect. 

Step 3 – Set the link

A screenshot of a computer

Description automatically generated 


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.


A screenshot of a computer

AI-generated content may be incorrect.


Save your changes and browse. In this example we open a “drawer” form of the location.

A screenshot of a computer

AI-generated content may be incorrect.


By configuring your map tooltip to direct users to a detail page, you bridge the gap between spatial overview and record‑level insights, greatly improving navigation and data discovery. Whether you choose to open the detail page in a modal dialog for quick reference or navigate to a full‑page report, integrating tooltips with page links makes your Oracle APEX map both interactive and informative, ultimately providing a richer application experience.

No comments:

Post a Comment