How do I Create an Airport Map Report

Introduction
Creating an Airport Map Report in Oracle APEX allows you to visually display flight paths, terminal locations, gates, runways, or service zones on a dynamic and interactive map interface. Whether you’re tracking aircraft, showing airport facilities, or analyzing geospatial airport data, Oracle APEX’s built-in map components offer a powerful and flexible solution. This guide will walk you through the detailed process of building an Airport Map Report, including data preparation, map configuration, and enhancing interactivity with tooltips and links.

How to Create an Airport Map Report in Oracle APEX

1. Prepare the Spatial Data

   • Ensure your source table includes latitude and longitude for airport features such as terminals, gates, or runways.

   • Sample structure:

     SELECT 
       airport_id,
       facility_name,
       latitude,
       longitude,
       facility_type
     FROM airport_facilities
     

2. Create a New Page with a Map Region

   • In Oracle APEX, go to the App Builder.

   • Add a new Map region to an existing or new page.

   • Choose the Map (Leaflet) component for easy configuration.

3. Configure the Data Source

   • Point the map to your query or table/view.

   • Ensure the region uses columns for latitude and longitude.

   • Example query:

     SELECT 
       facility_name AS name,
       latitude,
       longitude,
       'Facility Type: ' || facility_type AS tooltip
     FROM airport_facilities
     

4. Customize Marker Layer Settings

   • In the Marker Layer, assign:

     • Name Column: name

     • Latitude Column: latitude

     • Longitude Column: longitude

     • Tooltip Column: tooltip

   • To differentiate facility types, use the Style Expression or Icon URL field.

5. Enhance with Interactivity

   • Add HTML links in the tooltip to navigate to a detail page.

     '<a href="f?p=&APP_ID.:30:&SESSION.::NO::P30_FACILITY_ID:' || airport_id || '">' || facility_name || '</a>'
     

   • Disable "Escape special characters" so the HTML displays correctly.

   • Set marker clustering if your data is dense, especially for large airports.

6. Style and Refine

   • Add color coding by facility_type.

   • Use distinct icons for terminals, runways, gates, etc.

   • Optionally, overlay flight path lines using a Feature Layer with GeoJSON.

7. Test and Deploy

   • Preview the page.

   • Hover and click on markers to verify tooltips and links.

   • Adjust zoom levels and pan constraints as needed.

 

To create a Map Report in Oracle APEX that displays airports using the AirportsLatLon table with airportname, IATACode, Latitude, and Longitude columns, follow the steps below.

Prerequisites:

The AirportsLatLon table should contain the columns: 

• airportname (VARCHAR)

• IATACode (VARCHAR)

• Latitude (NUMBER)

• Longitude (NUMBER)

Step 1: Create a New Page for the Map

1. Click on Create to create a new page.

2. Select Chart > Map from the options.

3. Click Next.

Step 2: Configure the Map Region

1. Choose Map Type: Select Google Maps or another map provider (e.g., OpenStreetMap). Google Maps is a common choice, but you can choose based on your needs.

2. Define the Data Source (If done manually):

• Select SQL Query as the data source for the map.

• Write the SQL query to pull the required data from the AirportsLatLon table. The SQL query should look like this:

SELECT airportname AS title,

       IATACode AS description,

       Latitude AS latitude,

       Longitude AS longitude

FROM AirportsLatLon;

3. Columns Mapping:

• Title: Set to airportname (to display the airport name in the map popup).

• Description: Set to IATACode (to display the IATA code in the popup).

• Latitude: Set to Latitude (the latitude of the airport).

• Longitude: Set to Longitude (the longitude of the airport).

Result:

Lets add more Faceted searches

Step 3: Set Map Region Attributes

1. Center of the Map:

• Set the initial center of the map to a default latitude and longitude, such as 37.7749 and -122.4194 (which corresponds to the center of the U.S., or adjust it to your preferred area).

For example, for the United States:

Latitude: 37.7749

Longitude: -122.4194

2. Zoom Level: Set a Zoom Level that suits the geographical coverage you want (e.g., zoomed out for a continent view or zoomed in for city-level details).

• Zoom Level: Choose a value that allows users to see multiple airports at once (e.g., 5 for regional coverage, 10 for more detailed zoom).

3. Map Markers: Configure how the markers will be displayed on the map.

• You can use Icons to represent different types of airports if you have that classification in your data.

• If you do not have specific icons, APEX will use a default map marker for each airport.

4. Popup Info: Set up the Popup Info when a user clicks on an airport marker. The popup can show details like the airport name and IATA code.

• The Title will display the airportname.

• The Description will display the IATACode.

Step 4: Customize Map with Additional Settings (Optional)

1. Clustering (Optional): If your map contains a lot of airports and markers are overlapping, you can enable Marker Clustering. This will group markers together when zoomed out, improving the map’s readability.

2. Enable Dynamic Interaction: If you want to allow users to interact with the map and select multiple filters (e.g., by region or airport code), you can add Faceted Search or Filters to the map.

3. Adding Other Data Points: You can enhance the map with additional data, such as airport images or links to flight data.

Step 5: Save and Run the Map

1. After configuring the map region settings, click Next and choose any additional report settings you want.

2. Click Finish to save the page.

Step 6: Run and Preview the Report

1. After creating the map, click Run at the top-right of the page.

2. You should now see a map with markers representing each airport in your AirportsLatLon table. Clicking on a marker will show a popup with the airport name and IATA code.

Example SQL Query for Map Data Source

SELECT airportname AS title,

       IATACode AS description,

       Latitude AS latitude,

       Longitude AS longitude

FROM AirportsLatLon;

This query will pull the airport names, IATA codes, and coordinates (latitude and longitude) for plotting the map markers.

Additional Customization

• Filter Data on the Map: You can add filtering options to your page (e.g., drop-downs for selecting regions or airport types) so that users can narrow down the map markers.

• Styling: You can customize the look and feel of your map by editing the page styles or adding custom CSS.

By following these steps, you can create a Map Report in Oracle APEX that displays airport locations using the AirportsLatLon table. The markers will be placed based on the Latitude and Longitude, and clicking on each marker will show more details about the airport, such as its name and IATA code.

Faceted Report with Cards

Creating a Faceted Search Report with Cards in Oracle APEX

A faceted search report with cards in Oracle APEX allows users to refine their search dynamically using multiple filter options while displaying the results in a visually appealing card layout. This approach is useful for applications requiring interactive filtering, such as product catalogs, employee directories, or real estate listings.

Understanding Faceted Search Reports and Cards

Faceted Search Report

A faceted search is a dynamic filtering system that lets users refine data using multiple criteria. The facets appear as filter options on the side, allowing users to drill down into data by selecting relevant attributes.

Cards Report

The Cards Report displays data in a grid-like structure, where each row from a query is represented as a card with a customizable layout. It is useful for presenting information in a more visual format than standard reports.

By combining faceted search and cards, we can create an interactive and visually appealing data display in APEX.

Step 1: Creating the Faceted Search Report with Cards

1. Create a New Page

1. Open Oracle APEX and navigate to your application.

2. Click Create > Page.

3. Select Faceted Search and click Next.

4. Choose Cards as the report type.

5. Select the table or SQL query that will provide the data.

6. Click Next, configure the attributes as needed, and click Finish.

Step 2: Configuring the Faceted Search

Once the page is created, APEX automatically generates the faceted search region and a cards report.

1. Adding Facets

1. Open the Faceted Search Region in Page Designer.

2. Click + Add Facet to define a new filtering option.

3. Choose a data column for filtering. Examples include: 

• Category (e.g., Department, Product Type)

• Price Range (e.g., Low, Medium, High)

• Date (e.g., Created Date, Last Updated)

4. Select the appropriate facet type: 

• Checkbox List: Multiple selections

• Range Slider: For numerical values like price

• Date Picker: For filtering by date

5. Configure the display settings, labels, and sorting.

6. Click Apply Changes.

Step 3: Configuring the Cards Report

1. Customizing the Card Appearance

1. Open the Cards Report region in Page Designer.

2. Under Appearance, customize: 

• Card Title: Select the column to display as the card title.

• Card Body: Choose additional columns for description or details.

• Card Media: Assign an image column if available.

• Card Actions: Add buttons or links for user interaction.

2. Adjusting the Card Layout

1. Under Attributes, modify the number of cards per row.

2. Choose different layouts like Grid, Floating, or Stacked.

3. Enable Lazy Loading to improve performance on large datasets.

Step 4: Enhancing with Dynamic Actions

1. Refreshing Cards When a Facet Changes

1. Go to Faceted Search Region in Page Designer.

2. Under Dynamic Actions, create a new action: 

• Event: Facet Value Changed

• Action: Refresh

• Affected Element: Cards Report

This ensures that selecting a facet automatically refreshes the results without a full-page reload.

Step 5: Adding Custom Styling with CSS

For a more refined appearance, apply CSS styling to modify the card design.

1. Adding CSS to Improve Card Display

1. Navigate to Shared Components > Themes > Custom CSS.

Add custom CSS:

.t-Card {

    border-radius: 10px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease-in-out;

}

.t-Card:hover {

    transform: scale(1.05);

}

This enhances the card appearance with rounded corners, shadows, and a hover effect.

Step 6: Testing the Faceted Search Report with Cards

1. Click Run Page in APEX.

2. Use the facet filters to refine the data dynamically.

3. Observe how the results update within the card layout.

4. Adjust facets and styling as needed for an optimal user experience.

Best Use Cases for Faceted Reports with Cards

• Product Catalogs: Allows filtering by category, price, and availability.

• Employee Directories: Filters employees by department, role, and location.

• Real Estate Listings: Enables searches based on price, location, and property type.

• Event Listings: Allows filtering by date, category, and venue.

A faceted search report with cards in APEX provides an interactive and user-friendly way to display data. By integrating filters, dynamic actions, and CSS styling, you can create a highly functional and visually appealing report.

This approach improves usability, enhances data exploration, and offers a modern, responsive interface.

EXAMPLE:

Conclusion
An Airport Map Report in Oracle APEX not only brings geospatial clarity to complex airport operations but also enhances user navigation and data interaction. With just a few steps—setting up your data, configuring the map region, and enabling interactivity—you can transform raw coordinates into a dynamic, navigable report. This visual tool becomes especially valuable in aviation apps where location-based data is central to operational insights and decision-making.

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

 

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:

1. 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, and P50_STORE_ID with the appropriate item name.

2. Configure the Map Region

   • In Page Designer, click on the Map region.

   • Under Map Attributes, go to Marker Layer.

3. 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.

4. 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.

5. 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.

How do I Add a tool tip information to a map

 

Introduction
When building interactive Map components in Oracle APEX, tooltips provide a simple yet powerful way to enhance the user experience. By displaying relevant details when hovering over a map marker or shape, users can quickly gather contextual information without needing to click or navigate away. Adding tooltip information to a map region allows you to present key insights like names, addresses, statuses, or numeric values in a compact and user-friendly format.

Detailed Instructions: How to Add Tooltip Information to a Map in Oracle APEX

To add tooltips to a map in Oracle APEX, follow these detailed steps:

1. Create or Edit a Map Region

   • Open your application in Page Designer.

   • Select an existing Map region or create a new one by adding a Map region to your page.

2. Set Up Your SQL Query with Tooltip Data

   • Your data source must include a column with the information you want to show in the tooltip.

   • Example:

     SELECT 
       id,
       store_name AS name,
       latitude,
       longitude,
       'Store: ' || store_name || '<br>Status: ' || status AS tooltip_text
     FROM store_locations
     

   • The concatenated string becomes your tooltip content. Use HTML (like <br>) to format multiline tooltips if needed.

3. Assign the Tooltip Column to the Marker Layer

   • In the Map Attributes section, go to Marker Layer > Tooltip.

   • Choose the column you defined for tooltips (e.g., tooltip_text).

   • This tells APEX to show that column’s content when a user hovers over a map marker.

4. Optional: Use HTML or CSS for Styling

   • You can add simple HTML (line breaks, bold text) or apply inline styles if HTML Escaping is disabled.

   • Example:

     '<b>' || store_name || '</b><br><span style="color:gray">Status: ' || status || '</span>'
     

5. Preview and Test

   • Run the page and hover over map markers.

   • Tooltips should now display the assigned content.

   • If nothing appears, ensure the Tooltip field is correctly mapped, and HTML escaping is set appropriately.

6. Advanced (Optional): Use Dynamic Tooltips

   • Tooltips can also be generated dynamically using PL/SQL functions or LOVs if you want to display real-time values or multilingual data.

 

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;

5. 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 Components → Themes → CSS.

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;

}

3. 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);

});

4. 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.

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

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

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

Conclusion
Adding tooltips to map markers in Oracle APEX significantly improves how users interact with spatial data. Tooltips provide instant, relevant information without cluttering the map or requiring additional clicks. Whether you're showing store details, customer metrics, or delivery statuses, tooltips offer a simple and elegant way to make your Map Reports more informative and user-friendly. With just a few steps, you can enrich your application’s usability and deliver a better visual experience to your users.