Making a polygon layer transparent

The case

In our application we needed to show the user regions (polygons) where they had work to do. When clicking on the region it should show all the work-items within that region in a report next to the map. But the region-polygon should be transparent so all any features on other layers would be clearly visible.

Basically we wanted a clickable transparent polygon with a distinctive outline:

Finding a solution

At first I tried setting the opacity of the polygon layer to “0” but that would simply not show anything anymore. Then I found out it is allowed to use “transparent” as the fill-color of a map. But the APEX-builder either won’t allow that or automatically changes it to “#000000” (depending on the version of APEX it seems). “#000000” is of course just plain old black….

So, what now? Initially I went through the MapLibre documentation and found a function called setPaintProperty() which would allow me to set the fill color of a layer to transparent! Problem was that this only works if the layer is already loaded into the map. The dynamic actions “Map Initialized” and “After Refresh” trigger too early for this so I’d have to use setTimeout() and hope it executes late enough…. We actually used this initially and just executed the setPaintProperty() in a “loop” until it found the layer and changed it. The user would initally see the layer which would then magically disappear… not ideal to say the least.

Added to all of the above is the outline of the polygon which wasn’t thick enough to show clearly on the map unless zoomed in. Then I had a bit of a “happy accident” while trying out stuff. I had added a tooltip to the polygon layer to test something and noticed this was still visible when the opacity was set to “0”:

I added a “Map Object Clicked” dynamic action to see if that would execute when I clicked the invisible polygon. And lo and behold it did! That means the polygon is kind of what we like it to be (transparent) but without an outline.

The outline though is of course derivable from the Polygon! And Oracle has some nice utilities in their database to achieve this. So I added a lines-layer to my map with the same base query but converted the Polygon to a Line using the function POLYGONTOLINE from the database package SDO_UTIL:

select SDO_UTIL.POLYGONTOLINE(GEO_SDO) as outline
from   geo_table

(“GEO_SDO” is the column in my table containing the SDO_GEOMETRY with the polygons)

Now I can control the look of the outline seperately from the polygon, ideal!

The Result

So my final solution is to set the opacity of the polygon layer to “0”, duplicate the layer, set the layer-type to “lines” and use the above function to create an outline of the polygon and style it whatever way I see fit.

The final result is a clickable transparent polygon which is still clearly visible:

A few mumblings

You might want to hide one of the 2 layers as to not confuse the user. In case it is necessary to let the user hide the polygon-layer you might want to check out another article on my blog here so the outline layer will be hidden as well.

For this solution I didn’t have to use any non-APEX API’s or JavaScript which makes the solution more maintainable in my book as it’s fully declarative.

My solution is based on the SDO_GEOMETRY datatype in the database. If you have GeoJSON it will need extra conversions to use the database functions I used in this solution

Initially I was worried the extra layer for the outline and the conversion to a line would impact the performance. But Oracle did a good job apparently because we haven’t seen any noticable performance issues with this extra layer. Of course the “Lazy Loading” was set to “On” for the map, so even if it does take a bit longer the user will hardly notice it.

(The above solution was made using Oracle APEX 24.2.8 and might or might not work on other versions)