Search This Blog

Monday, June 30, 2025

How do I Add a tool tip information to a map

 In Oracle APEX, adding tooltip information to a map enhances user interaction by displaying contextual details when users hover over map markers. Tooltips can show any relevant data—such as location names, descriptions, or statistics—pulled from your underlying SQL query. By configuring the Map region’s tooltip settings, you create a more informative and engaging geographic visualization without cluttering the map itself.

To add tooltip information to a Map region in Oracle APEX, follow these detailed steps:

  1. Prepare Your Data
    Ensure your SQL query returns at least these columns: latitude, longitude, and the text you want in the tooltip (for example, LOCATION_NAME, DESCRIPTION, or a concatenation of fields).

  2. Create or Edit the Map Region
    In Page Designer, locate the region you want to use as a map or create a new region of type Map.

  3. Configure the Data Source
    Under the Map region’s Source section:
    • Set Type to SQL Query.
    • Enter a query such as:

    SELECT latitude  AS lat,
           longitude AS lon,
           location_name || ' (' || city || ')' AS tooltip_text
      FROM my_locations
    

    Here, tooltip_text combines columns into the value you’ll display in the tooltip.

  4. Define the Map Layer
    Under Layer settings:
    • Set Layer Type to Point.
    • Set Latitude Column to LAT.
    • Set Longitude Column to LON.
    • Set Tooltip Column to TOOLTIP_TEXT.

  5. Customize Tooltip Display (Optional)
    If you need HTML formatting or multiple lines:
    • Under Tooltip Column, choose HTML Expression instead of a column name.
    • Enter an expression like:

    '<div><strong>' || location_name || '</strong><br/>' ||
    'Population: ' || TO_CHAR(population, '999,999') ||
    '</div>'
    

    This will render bold labels and line breaks in your tooltip.

  6. Adjust Map Attributes
    Under Attributes:
    • Choose your Map Provider (Oracle Map or Google).
    • Set initial Zoom Level and Center coordinates.
    • Enable Marker Cluster, Heat Map, or other layers as needed.

  7. Preview and Test
    Run the page and hover over the map markers. The tooltip should appear, displaying the text or HTML you defined.

By mapping a dedicated tooltip column (or HTML expression) to your Map layer, you provide users with rich, on‑hover information that enhances the utility and interactivity of your geographic visualization.

Adding a Tooltip to a Map Faceted Report in Oracle APEX

A Map Faceted Report in Oracle APEX provides users with an interactive way to visualize data based on geographic locations while allowing them to refine results using facets. Adding a tooltip enhances the user experience by displaying additional details when they hover over map points, allowing them to get more information without clicking or navigating away.

 

Why Use Tooltips in a Map Faceted Report?

Tooltips provide an efficient way to show extra details about a location without cluttering the interface. They allow users to quickly understand key attributes of a map point, such as address, population, revenue, or other relevant information.

 

Steps to Add a Tooltip to a Map Faceted Report

Step 1: Create a Map Faceted Report

  1. Open App Builder in Oracle APEX and navigate to your application.

  2. Click Create Page and select Faceted Search under the Report section.

  3. Choose a table or SQL query containing location-based data (such as latitude and longitude).

  4. Click Next, set up the page attributes, and click Create.

  5. Once the report is created, go to Page Designer and locate the Map Report Region.

 

Step 2: Enable Tooltips for Map Points

  1. Select the Map Region in Page Designer.

  2. Open the Attributes section and find the Tooltip settings.

  3. In the Tooltip Column option, choose the column that contains the text you want to display in the tooltip.

  4. If no tooltip column exists in the dataset, create a custom SQL Query to concatenate necessary information: 

SELECT location_name, latitude, longitude, 

       'Address: ' || address || '<br>Population: ' || population AS tooltip_info

FROM locations_table;

  1. Save the changes and run the report. Now, hovering over a map point will display the information from the selected tooltip column.

 

Step 3: Customize the Tooltip Appearance Using CSS

APEX allows styling tooltips using CSS to improve readability.

  1. Navigate to Shared ComponentsThemesCSS.

  2. Add the following CSS code to customize tooltip appearance: 

.apex-map-tooltip {

    background-color: rgba(0, 0, 0, 0.8);

    color: white;

    padding: 8px;

    border-radius: 5px;

    font-size: 12px;

}

  1. Save the CSS changes and refresh the page to see the customized tooltip.

 

Step 4: Enhancing Tooltips with JavaScript for Dynamic Content

To further enhance tooltips, use JavaScript to display dynamic content:

  1. Open Page Designer and select the Map Region.

  2. In the JavaScript section, add a dynamic action triggered on Mouse Over for map points.

  3. Add the following JavaScript to format and enhance tooltips dynamically: 

function customizeTooltip(mapPoint) {

    return `<b>${mapPoint.location_name}</b><br>

            Address: ${mapPoint.address}<br>

            Population: ${mapPoint.population}`;

}


apex.region("map_region_static_id").widget().on("mouseover", ".a-map-point", function(event) {

    let tooltipContent = customizeTooltip(event.data);

    apex.tooltip.show(event.target, tooltipContent);

});

  1. Save the changes and test the tooltip behavior.

 Best Practices for Tooltips in Map Faceted Reports

  • Keep tooltip text concise to avoid overwhelming users.

  • Use HTML formatting to make the tooltip content more readable.

  • Ensure tooltips contain relevant and useful information based on the use case.

  • Optimize the dataset query to avoid performance issues when rendering tooltips.

  • Test tooltips on different devices to ensure usability across various screen sizes.

 

Adding tooltips to a Map Faceted Report in Oracle APEX enhances the user experience by providing contextual information without requiring extra clicks. Using APEX’s built-in tooltip options, custom CSS styling, and JavaScript enhancements, developers can create visually appealing and informative tooltips that improve usability and data exploration.

EXAMPLE:

Step 1 – click on the Layer that you’re wanting to use for the tip placement.

A screenshot of a computer

AI-generated content may be incorrect.

Step 2-  Select the Tool Tip area and switch to “Advanced Formatting”.

A screen shot of a computer

AI-generated content may be incorrect.

Step 3 – Add the HTML and table tags to display the data

A screenshot of a computer

Description automatically generated

Here is the code:

Location code: &LOCATION_CODE. <br>

Location name: &LOCATION_NAME.<br>

Address: &ADDRESS_LINE_1.<br>

City: &CITY.<br>

State: &STATE_OR_PROVINCE.<br>

Postal Code: &POSTAL_CODE.<br>

Weather Station: &WEATHER_STATION.<br>

Notice that:

  • Table column names are ALL upper case

  • Table column names start with a “&” and end with a period “.”

  • You can mix HTML and the column names to generate the tool tip.

Save and preview

A map with blue pins

AI-generated content may be incorrect.

To implement tooltips, ensure your SQL query returns the fields you want to display (for example, lat, lon, and location_name). In Page Designer, edit your Map region’s Layer attributes and set the Tooltip Column to the column containing your descriptive text. You can further customize the tooltip format by specifying HTML expressions, combining multiple columns, or adding conditional logic. Once configured, tooltips appear instantly on hover, providing users with rich information at a glance and making your map reports both interactive and user‑friendly.

How do I Work with a Map Report

 In Oracle APEX, a Map Report provides a powerful way to visualize spatial data directly within your application. By using either the built‑in Map region or the REST‑enabled Google Maps component, you can plot geographic information—such as locations, routes, or service areas—on an interactive map. Working with a Map Report involves preparing your data with latitude and longitude columns, creating the Map region in Page Designer, configuring layer types (markers, heat maps, or clusters), and customizing the appearance and behavior through region attributes and dynamic actions.

Using Arial font, size 14px, plain text:

To work with a Map Report in Oracle APEX, begin by ensuring your table or query returns geographic coordinates (latitude and longitude). In the Page Designer, add a new region and select Map as the region type. Choose Static Data if you have a fixed set of points, or SQL Query to dynamically pull location data. In your SQL query, include columns named lat and lon (or map them in the region attributes) alongside any tooltip or label fields.

Next, configure the Map region’s Layer settings. For a simple marker layer, set the layer type to “Point,” specify lat and lon for the latitude and longitude fields, and choose the column that provides the marker’s title or tooltip. If you need clustering—for when many points overlap—enable clustering and adjust the cluster radius. For heat maps, switch the layer type to “Heat Map” and select a weight column if you want point intensity to reflect a data value.

Under Attributes, customize the map provider (Oracle Maps or Google Maps), initial zoom level, and center coordinates. You can also set map controls like zoom buttons, pan controls, or a scale bar. If you want interactive behavior, create Dynamic Actions on map events such as “Marker Click” to populate page items or open a modal with detailed information.

To style the map, use the Appearance section to choose marker icons, colors, and shapes. You can supply a URL for custom marker images or select from the built‑in icon set. For further customization, add JavaScript in the Execute when Page Loads section to manipulate the map object directly (for example, drawing polylines or polygons).

Finally, test the map in the runtime environment. Verify that all markers appear correctly, tooltips display the right information, and interactive features work as expected. By following these steps—preparing your data, configuring layers and attributes, and adding interactivity—you can leverage Oracle APEX Map Reports to deliver compelling geographic visualizations in your applications.

The first thing that you need to make a map work is a way to map your points of interest into the map. This can be done using one of three categories:

Geospatial Data Types in Oracle APEX

Oracle APEX supports multiple geospatial data formats, each suited for different use cases in mapping and spatial analysis.

1. SDO_GEOMETRY (Oracle Spatial Object Type)

  • SDO_GEOMETRY is a specialized Oracle Object Type used by Oracle Spatial to store and manipulate geographic data.

  • It includes details such as the coordinate system, geometry type, dimensions, and spatial data points stored in an array.

  • Ideal for map layers in APEX and advanced spatial operations.

  • Utilized by the SDO_UTIL and SDO_SAM packages for: 

    • Calculating distances between points.

    • Performing spatial analysis and geometric transformations.

  • Supports all geometry types, including points, lines, and polygons.

2. GeoJSON (Geospatial JSON Format)

  • GeoJSON is a widely used JSON-based format for representing geographic data.

  • Follows the GeoJSON standard, making it easy to read and exchange between systems.

  • Oracle supports storing and indexing GeoJSON data.

  • Particularly useful in JavaScript-based applications and dynamic map interactions.

  • Supports all geometry types, including points, lines, and polygons.

3. Longitude/Latitude (2D Coordinates)

  • The simplest and most common way to represent locations on a map.

  • Uses two numeric values

    • Longitude (X-axis) – Horizontal position.

    • Latitude (Y-axis) – Vertical position.

  • Familiar to most users and widely available in public datasets and APIs.

  • Suitable for basic mapping needs and integration with mapping tools like Google Maps.

Each of these geospatial data types serves a unique purpose in Oracle APEX, from simple mapping to complex spatial analytics

EXAMPLE:

In this case we will use Longitude/Latitude.

Step 1 – Create a map page

A screenshot of a computer

Description automatically generated

Select table

A screenshot of a computer

Description automatically generated

Select map style

A screenshot of a map

Description automatically generated

Save and Browse

A map of the world

Description automatically generated

By integrating Map Reports into your Oracle APEX applications, you unlock new insights and improve user engagement through geographic visualization. Whether you’re displaying customer locations, tracking asset movements, or highlighting regional trends, maps make your data more intuitive and actionable. With a few configuration steps, you can turn raw coordinate data into an interactive, visually rich report that enhances decision‑making and user experience.

UI Defaults

 In Oracle APEX, User Interface (UI) Defaults are a set of metadata-driven, table- and column-scoped attributes that APEX consults when it g...