MapLibre, Custom Layers and Oracle APEX Map

What are layers? What types of layers can we define in a map region? What attributes do layers have, and how can we customize them? I wrote about all this here. In this article, we will look at layers from a slightly different perspective. As we already know, the map region in Oracle APEX is based on the MapLibre library. MapLibre GL JS is an open-source TypeScript library for publishing maps on your website. But can we define our own layers using MapLibre? The answer is simple: yes, we can. But why would we want to do that?

To create a layer, I need to go to the Page Designer and modify the map region by adding a layer, specifying the type, data source, geometry column, and more. It’s simple, but I need my APEX Developer account to do that. However, our users don’t have this access but want to create their own layers, modify sources, appearance, etc. Therefore, we need to give them the ability to create custom layers from the application level. This is where MapLibre can be beneficial. :)

Custom Layers with MapLibre: Step by Step

1. Create a New Dynamic Action

   1. Event: Map Initialized [Map]

   2. Selection Type: Region

   3. Region: Your Map Region :)

2. Create a TRUE Action

   1. Action: Execute JavaScript Code

   2. Code:

//Get MapLibre GL JS map object (use your Map region static ID)
var map = apex.region('map_id').getMapObject();

//Create GeoJSON source
map.addSource('GeoJSON Source', {
    'type': 'geojson',
    'data':
        {"type": "FeatureCollection","features": [
        {"type": "Feature","properties": {},"geometry": {"coordinates": [17.031886060772507,51.10959056655955],"type": "Point"}},
        {"type": "Feature","properties": {},"geometry": {"coordinates": [17.01170439017099,51.126261821012775],"type": "Point"}},
        {"type": "Feature","properties": {},"geometry": {"coordinates": [17.03808613985592,51.09791225198302],"type": "Point"}},
        {"type": "Feature","properties": {},"geometry": {"coordinates": [17.07436073427695,51.10437264042079],"type": "Point"}},
        {"type": "Feature","properties": {},"geometry": {"coordinates": [17.005245052243396,51.098923052364825],"type": "Point"}}
        ]}
});

//Create GeoJSON layer
map.addLayer(
    {
    'id': 'wroclaw_geojson_layer_id',
    'type': 'circle',
    'source': 'GeoJSON Source', //Previously created source (lines 5-15)
    'paint': {
        'circle-radius': 10,
        'circle-color': '#B42222'
        }
    }
);

3. Save and run the page

You should see a new custom layer on your map that looks like this:

Of course, the source of our map does not have to be GeoJSON; it can also be WMS. To display a new custom layer based on WMS, I will use the code below.

//Get MapLibre GL JS map object (use your Map region static ID)
var map = apex.region('map_id').getMapObject();

//Create WMS source
map.addSource('wms', {
    'type': 'raster',
    'tiles': [
        'https://gis1.um.wroc.pl/arcgis/services/ogc/OGC_ortofoto_2022/MapServer/WMSServer?'.
        concat('SERVICE=WMS',
        '&LAYERS=1',
        '&STYLES=',
        '&VERSION=1.1.1',
        '&request=GetMap',
        '&request=GetMap',
        '&bbox={bbox-epsg-3857}',
        '&format=image/png',
        '&srs=EPSG:3857',
        '&transparent=true',
        '&width=256',
        '&height=256')
    ]
});

//Create WMS layer
map.addLayer(
    {
        'id': 'wroclaw_wms_layer_id',
        'type': 'raster',
        'source': 'wms', //Previously created source (lines 5-22)
    }
);

Now my map looks like this:

Conclusions

In one of the previous articles, I showed how to create layers in a map using Page Designer. Thanks to MapLibre, we have many new possibilities; we can create custom layers and implement solutions that allow users to manage layers without requiring access to an APEX Developer account. Of course, MapLibre offers much more - it includes numerous ready-made examples and plugins that you can find here. Because of this, you can easily implement many new GIS functionalities in your APEX applications. Have fun!