In this lab, you learn to add a map region to the search page in order to visually enhance the page. The search page includes facets on the left which can readily be used to limit the data shown in the map on the right. Once the final application is built, you learn to download and use the application as a Progressive Web App (PWA).
Estimated Time: 10 minutes
Watch the video below for a quick walk-through of the lab.
Objectives
In this lab, you will:
Create a Copy of an Existing page.
Add and Enhance a map region.
Install Progressive Web App.
Prerequisites
Completion of workshop through Lab 3
Task 1: Create a Copy of an Existing Page
In order to implement the map, we will copy the existing NYC Highschools Search page and modify the new page to include the Map region.
From the runtime application, go to the search page by clicking NYC Highschools Search. Assuming that you ran this app from the APEX App Builder, a Developer Toolbar is displayed at the bottom of the screen. Note - End users who log directly into the app will not see this toolbar.
In the Developer Toolbar, click Page 3.
Alternatively, you can also navigate back to the APEX App Builder tab in your browser manually by selecting the appropriate browser tab or window. Once in the App Builder click 3 - NYC Highschools Search.
To create a page similar to the existing page, click the + icon next to the redo button at the top right corner. Select Copy Page.
For Page to Copy, enter/select the following:
New Page Name: NYC Highschools Map
Breadcrumb: Breadcrumb
Click Next.
For Navigation Preferences, select Create a new navigation menu entry and click Next. This creates a new entry in the left side navigation menu of your application.
Under New Value, you can enter new names for the items and buttons. Accept the default names and click Copy.
A new page called NYC Highschools Map is created as Page 6.
Task 2: Add a Map Region
The newly created Page 6, NYC Highschools Map opens in the Page Designer. In the Rendering pane, navigate to Body and select the Nyc Highschools region. In the Property Editor, change the type to Map.
To customize a map region, you need to add layers. Under Layers, select New. In the property editor, enter/select the following:
Name: Schools
Source > Location: Region Source. This indicates that the layer fetches the data from it's parent region (Nyc Highschools) whose source is the local database table NYC_HIGHSCHOOLS.
In order to display the points on the map, you need to provide the coordinates. In the Property Editor, go to the Column Mapping group. Enter the following values:
Table 1: Converting your Spreadsheet into a Cloud App using Oracle APEX | Lab 4: Add a Map Region and Install PWA
Property
Value
Geometry Column Data Type
Longitude/Latitude
Longitude Column
Longitude
Latitude Column
Latitude
Click Save. Later, select Application \ at the top to navigate to the application home page.
Let us set an icon for the newly created NYC Highschools Map. Select Shared Components.
Under Navigation and Search, select Navigation Menu. Under Lists, select Navigation Menu.
Click the edit icon next to NYC Highschools Map list entry.
In the edit page, for Image/Class enter fa-map-marker and click Apply Changes.
Click Run Page. The NYC Highschools Map is displayed with a faceted search on the left and a map region on the right. Filter the values using faceted search and observe how the map changes accordingly.
Task 3: Enhance the Map Region
APEX allows customization of the map in a declarative way. In this step, you will enhance the map by adding tooltip and custom pin colors on the map.
From the NYC Highschools Map page in the application, click Page 6 in the developer toolbar to edit the page.
In the Rendering tab, navigate to Nyc Highschools. Under Layers, select Schools.
In the Property Editor, enter/select the following:
Tooltip > Advanced Formatting: Toggle On.
HTML Expression: Enter the following HTML snippet:
Click Save and Run Page. The NYC Highschools Map is displayed. Hover over a pin in the map to display the custom tooltip. The tooltip displays the Highschool name and the Borough name.
Now, you will customize the map by adding a condition such that the value of the GRADUATION_RATE will determine the pin color. To do so, click Page 6 in the developer toolbar to edit the page.
In the Rendering tab, navigate to Nyc Highschools region. In the Property Editor, under Source, select Local Database for Location and SQL Query for Type. Click on the Code Editor button next to SQL Query.
In the Code Editor, modify the SQL query to add a CASE statement to determine the color based on the value of GRADUATION_RATE. Replace the query with the following query:
Select Schools layer in the Rendering pane. In the Property Editor, do the following:
Identification > Name: Schools - Red
Under Row Assignment:
Column: PIN_COLOR
Value for this Layer red
Appearance > Fill Color: &PIN_COLOR.
In the Rendering Pane, right-click on Schools - Red and select Duplicate. In the Property Editor, do the following:
Identification > Name: Schools - Green
Row Assignment > Value for this Layer: green
In the Rendering Pane, right-click on Schools - Green and select Duplicate. In the Property Editor, do the following:
Identification > Name: Schools - Yellow
Row Assignment > Value for this Layer: yellow
Click Save and Run page. The NYC Highschools Map displays different colors for the pins.
The schools with a Graduation rate between 0-50 are displayed in red.
The schools with a Graduation rate between 50-75 are displayed in yellow.
The schools with a Graduation rate between 75-100 are displayed in green.
Task 4: Install a Progressive Web App (PWA)
Progressive Web Applications (PWA) are designed to be fast, responsive, installable to a home screen, reliable (online or offline), and engaging (providing support for push notifications).
Recall that you created a Progressive Web App by running the Create Application Wizard and enabling the Install Progressive Web App feature in Lab 1 of this workshop. In this step, you will learn to install and use a PWA.
Note:
To enable Progressive Web App, an Oracle APEX application must be served over a secured HTTPS environment, or localhost. If using an unsecured environment, PWA features will not be rendered.
PWA is available in Google Chrome, Microsoft Edge and Safari browsers. Firefox does not support PWA.
To install a PWA, go to your application and click Install App on the navigation bar.
A popup dialog appears in your browser asking you whether you want to install the app. Click Install.
After a few seconds, the application icon is created on your desktop/home screen. Double-click the application icon.
The application is now open as a PWA without the need for a browser. This provides a customizable offline page when users are offline and cannot request the network. It optimizes page loading speed on the mobile device. It also improves the page load rendering time.
Summary
You now know how to embed a maps in your application and to install a Progressive Web App (PWA).