Search for a command to run...
See how I combined the APEX Geocoded Address item, several map layers, GeoJSON, SDO_UTIL and SDO_GEOMETRY packages to find nearest stadiums around
Creating apps built with ❤️ using Oracle APEX. PL/SQL dev. Exploring the AI and ML world. Keen on front-end, visual arts and new technologies. Love travel, sports, photography.
Excellent post Plamen, very detailed! Lots of good tips in here on how to work with these components, I especially like the tip on how to center the map.
Just a quick suggestion on the Geocoded Address item.
There's actually a declarative way to hide the map. I found it by accident because it's not intuitive, but if you go to Shared Components > Component Settings > Geocoded Address, you can turn off the Map Preview by unchecking the "item" box:
Ah, cool, thanks for the tip! Didn't know that setting.
I guess it's general to all Geocoded Addresses, so if I want to show it somewhere but hide it somewhere else I'll still have to use some CSS class, right?
That's a good point! I wish it was possible to disable the map per item, but you are correct, CSS is the only way to disable it for some and not others.
Your CSS method can also be used to only hide it on mobile devices, or do other things, so definitely very useful!
Impressions from APEX Alpe Adria 2026
The Use Case Oracle APEX has a special template for Dialog Pages, called Drawer. This template is also available for any Region on you Page (this time called Inline Drawer). 💡 A Drawer is an overlay
The Use case (and the issue) What you see on this screenshot is a pretty common requirement in an APEX application - A form, where you have some text item or dropdown menu, followed by a button or som
The power of Claude Code - offline, free, secure
Using a REST Media Resource as an image source
In this article, I will show you a solution for a situation that I often have while travelling abroad - finding the nearest stadium around me to watch some sports game. What I used is some native APEX functionality, available since version 21.2 - the new Maps region and the Geocoded Address item. The Maps region allows us to have several different layers inside, as the ones I have in my app are:
See a demo of the app on my free Oracle APEX workspace here:
US Nearby Stadiums Locator
The stadiums information I have is for all stadiums in the US, used by NBA, MLS, MLB and NHL elite teams. So to get some good results please do search on addresses in the USA. Hovering over a map item will give you the name of the stadium, the league they are playing in and the distance to your location.
However it's not as rich as the Map region, so I will just use it to get the GeoJSON of my search and keep it hidden using the
hidden-xxs-upCSS class.
map_search.It will have three layers. We should have P27_GEOLOCATOR as item to submit.
Having created the Map, add three new Layers:
select :P27_GEOLOCATOR geolocation from dual
with trip_details as (
select :P27_GEOLOCATOR geolocation --'{"type": "Point", "coordinates": [-0.03377, 51.50347]}' geolocation
from dual
)
select sdo_util.circle_polygon (
--point => geolocation,
center_longitude => JSON_VALUE(geolocation,'$.coordinates[0]'),
center_latitude => JSON_VALUE(geolocation,'$.coordinates[1]'),
radius => mcl_app_util.fn_convert_distance (
distance => :P27_DISTANCE,
unit_from => :P27_UNIT,
unit_to => 'km' ) * 1000, -- in meters
arc_tolerance => 5 )
as geometry
from trip_details
with nearby_stadiums as (
select distinct
sdo_geometry(2001, 4326, sdo_point_type(longitude, latitude, null), null, null) sdo_geometry_stadium,
sdo_geometry(2001, 4326, sdo_point_type( JSON_VALUE(:P27_GEOLOCATOR,'$.coordinates[0]'),
JSON_VALUE(:P27_GEOLOCATOR,'$.coordinates[1]'),
null), null, null ) sdo_geometry_selected,
a.*
from stadiums a
where longitude is not null
and latitude is not null
)
select round(sdo_geom.sdo_distance( sdo_geometry_stadium, sdo_geometry_selected, 0.01, 'unit=KM' ),0) distance,
a.*
from nearby_stadiums a
where sdo_geom.sdo_distance( sdo_geometry_stadium, sdo_geometry_selected, 0.01, 'unit=KM' ) < mcl_app_util.fn_convert_distance (
distance => :P27_DISTANCE,
unit_from => :P27_UNIT,
unit_to => 'km' )
Additionally, add the following HTML after selecting the Tooltip Advanced Formatting option:
<h6>&TEAM.</h6>
<p>&LEAGUE.{if STATE_NAME/} ,&STATE_NAME.{endif/}, &DIVISION.</p>
<p>Distance: &DISTANCE. km</p>
Note that Template Directives are supported here, so you can create some really advanced Tooltips for each data point on your map.
Add the following Before Header Computation, so your map has some default state. Otherwise, it might fail, because no Geocoded Address is currently selected.
You will need two Dynamic Actions:
The last True Action you have to add is the one that Zooms and centres the Map, using the Geolocation selected:
var lMapRegion = apex.region("map_search"),
// important: Use the layer name exactly as specified in the "name" attribute in Page Designer
lLayerId = lMapRegion.call("getLayerIdByName", "Map Search"),
lCurrentZoom = lMapRegion.call("getMapCenterAndZoomLevel").zoom,
lLocationId = apex.item("P27_GEOLOCATOR").getValue(),
lFeature = lMapRegion.call("getFeature", lLayerId, lLocationId ),
lPosition;
console.log("lLocationId -> " + lLocationId);
//if ( lFeature.geometry ) {
//lPosition = lFeature.geometry.coordinates;
lPosition = jQuery.parseJSON( lLocationId );
console.log("lPosition -> " + lPosition);
// close all Info Windows, which might currently be open
lMapRegion.call( "closeAllInfoWindows" );
// focus the map to the chosen feature
//lMapRegion.call( "setCenter", lPosition );
apex.region( "map_search" ).setCenter( lPosition.coordinates );
// if the current zoom level is below 12, zoom to 9. Otherwise do nothing.
if ( lCurrentZoom < 12 ) {
lMapRegion.call( "setZoomLevel", 9 );
}
setTimeout( function() {lMapRegion.call( "displayPopup", "infoWindow", lLayerId, lLocationId.toString(), false )}, 500 );
//}