How to track geo-location from Oracle APEX

In today’s data-driven world, location awareness has become a cornerstone of modern web and mobile applications. From logistics and field service management to attendance systems and customer engagement, knowing where an event or action occurs adds incredible value to your data insights. 

Oracle APEX, with its powerful integration capabilities and low-code flexibility, allows developers to seamlessly capture and utilize geo-location data directly within their applications—without relying on external tools or complex APIs. By combining HTML5 geolocation features with PL/SQL and APEX components, you can easily track a user’s current position, display it on a map, or even store it. You can find a visual assistance from here.

So, let's walk through the process step by step-

STEP- 1:

Create a blank page using the page creation wizard. Set the page name as "Location Capture". Under the "Navigation" section, set "No" for "Use Breadcrumb" option. Left other properties as it is. Click on "Create Page" button. A blank page will be create and redirect to the new page.

STEP- 2:

Create a new region and set its properties as like below-

        Name:             Location Capture

        Column Span: 3

STEP- 3:

Create 2 page items like P4_LATITUDE and P4_LONGITUDE under the "Location Capture" region which was created in STEP 2. Create a button and set it's properties as like below-

        

        Name                    : BTN_LOCATION_CAPTURE

        Label                    : Capture Location 

        Position                : Close

        Hot                       : Yes (Toggle On)

        Template Options:

                Size              : Small

Create another button and set it properties as like below-

        Name                    : BTN_LOCATION_REFRESH

        Label                    : Refresh Location 

        Position                : Create

        Hot                       : Yes (Toggle On)

        Template Options:

                Size              : Small

                

STEP- 4:

Create a dynamic action under the "BTN_LOCATION_CAPTURE" button which is created earlier. Set it's name like "Capture physical location". Select the true action and set it's properties like-

    

        Action      : Execute JavaScript Code

        Code        : captureLocation()

STEP- 5:

Select the page (At the top of the left side pane) and navigate to the "Function and Global Variables Declaration" properties under the JavaScript section. Open the code editor and paste the below code here-

        function captureLocation() {

            if ("geolocation" in navigator) {

                // Prompt user for permission to access their location

                navigator.geolocation.getCurrentPosition(

                    // Success callback function

                    (position) => {

                        // Get the user's latitude and longitude coordinates

                        const lat = position.coords.latitude;

                        const lng = position.coords.longitude;

                        apex.item("P4_LATITUDE").setValue(lat);

                        apex.item("P4_LONGITUDE").setValue(lng);        

                        // Do something with the location data, e.g. display on a map

                        console.log('Latitude: ${lat}, longitude: ${lng}');

                    },

                    // Error callback function

                    (error) => {

                        // Handle errors, e.g. user denied location sharing permissions

                        console.error("Error getting user location:", error);

                    }

               );

            } else {

                // Geolocation is not supported by the browser

                console.error("Geolocation is not supported by this browser.");

            };

        }

STEP- 6:

Add another region in this page and set it's properties like below-

        Name        : Map

        Type          : Map

        Source > Type: SQL Query

        SQL Query:

                                SELECT TO_NUMBER(:P4_LATITUDE) AS latitude

                                    , TO_NUMBER(:P4_LONGITUDE) AS longitude

                                FROM dual

        Page Items to Submit    : P4_LATITUDE, P4_LONGITUDE

        Start New Row              : No (Toggle Off)

        Geometry Column Data Type: Latitude/Longitude

        Longitude Column         : longitude

        Latitude Column            : latitude

        Static ID                         : location

        Point Objects                  :

                Style                       : Icon

                Icon Source            : Icon Class

                Icon CSS Classes   : fa fa-map-marker

        Fill Color                        : #161010

Select attribute tab immediate next to the region tab in the properties section and set the below properties-

        Background   : Custom

        Standard        : Oracle World Map

        Initial Position and Zoom:

                Type              : SQL Query

                SQL Query   : SELECT TO_NUMBER(:P4_LATITUDE) AS latitude

                                            , TO_NUMBER(:P4_LONGITUDE) AS longitude

                                        FROM dual

        Geometry Column Data Type: Latitude/Longitude

        Inital Longitude Column         : longitude

        Inital Latitude Column            : latitude

STEP- 7:

Create a dynamic action under the "BTN_LOCATION_REFRESH" button which is created earlier. Set it's name like "Refresh location". Select the true action and set it's properties like-

    

        Action      : Execute JavaScript Code

        Code        : apex.region('location').refresh();

STEP- 8:

Create a page process under the before header sub section in the pre-rendering section. Set it's properties like-

        

        Name    : Clear Page

        Type      : Clear Session State

Save the page and run. That's all for today.