I often hear the same questions: "Can we show our current location on the map?", "Can we measure the distance between objects?" The answers can be found in the "Attributes" tab of our Map region. The component has eight attributes that can effectively improve our map.

Map region - attributes

Mousewheel Zoom - Zoom in or out by using the mouse wheel.

Rectangle Zoom - Zoom the map to an area by drawing a rectangle onto the map.

Scale Bar - Display a scale bar on the map (lower left corner).

Overview Map - Display an overview map in the lower right (lower right corner).

Infinite Map - Infinite map scrolling.

Get Browser Location - Get the user's current location from the browser.

Circle Tool - The Circle Tool allows end users to draw a circle on the map. When finished, an event is triggered, so that the circle can be processed by Dynamic Actions or JavaScript code.

Distance Tool - Allows end users to measure distances between points on the map.

Circle Tool - selecting multiple countries in the 'Have been' app

The Circle Tool attribute is useful if we want to implement the functionality of selecting multiple objects on the map. Later in this article I will show and explain how to do this. We will use our 'Have been' application from the previous article.

As I mentioned earlier (or rather, as the "Help" tab in Oracle APEX tells us) - The Circle Tool allows end users to draw a circle on the map. When finished, an event is triggered, so that the circle can be processed by Dynamic Actions or JavaScript code. So, implementing multi-object selection shouldn't be difficult. Additionally, thanks to the Oracle documentation, we get information about events that we can handle using DA and JS: link

Let's start! First, create a Hidden Item called P800_GEOJSON - in this item, we will store the GeoJSON of the circle created using the Circle Tool. Then create a dynamic action and configure it as follows:

Identification

• Name: Get GeoJSON from Circle Tool

When

• Event: Map Changed [Map]

• Selection Type: Region

• Region: Map (our Map region)

Client-side Condition

• Type: JavaScript Expression

• JavaScript Expression:

    this.data && this.data.changeType === "circle-drawn"
  

Then create three TRUE Actions:

Action: Set Value

Settings

• Set Type: JavaScript Expression

• JavaScript Expression:

    this.data.circle ? JSON.stringify(this.data.circle.data.geometry) : ""
    //you can also use this one: apex.region("MAP_ID").getCircle() (MAP_ID is a static id of our Map region)
  

Affected Elements

• Selection Type: Item(s)

• Item(s): P800_GEOJSON

Action: Refresh

Affected Elements

• Selection Type: Region

• Region: Map (our Map region)

Action: Execute JavaScript Code

Settings

• Code:

     apex.region("MAP_ID").call("clearCircle");
  

Our dynamic action saves GeoJSON generated with Circle Tool to the item. Now we need to work on displaying the selected objects. For that, we will create a new layer:

Identification

• Name: CIRCLE_TOOL_MY_COUNTRIES

• Layer Type: Polygons

Label

• Label: My Countries (Circle Tool)

Source

• Location: Local Database

• Type: SQL Query

• SQL Query

select 
    ID,
    sdo_util.from_geojson(geometry) geometry
from countries_all
where :P800_GEOJSON is not null 
and sdo_anyinteract( 
    sdo_util.from_geojson(geometry), 
    sdo_util.from_geojson(:P800_GEOJSON)
) = 'TRUE'

• Page items to Submit: P800_GEOJSON

Column Mapping:

• Geometry Column Data Type: SDO_GEOMETRY

• Geometry Column: GEOMETRY

Appearance

• Fill Color: #ffc757

• Fill Opacity: .4

• Stroke Color: #000000

Now our application should look like this:

Conclusions

Oracle APEX Map region has eight attributes that can improve our map. Additionally, thanks to dynamic actions and JS, we can quickly and easily implement the functionality of selecting multiple objects. Low-code again!