Vector Tiles in Oracle Spatial 23

- February 15, 2025

Vector tiles are an efficient way to deliver and render map data in web applications. Unlike raster tiles, which are pre-rendered images, vector tiles contain raw geometries and attributes, allowing for dynamic styling and interaction on the client side.

🕮 What Are Vector Tiles?

Imagine a large map divided into small, manageable square sections called "tiles."

There are two primary types of tiles:

Raster Tiles: Static images representing the map. Zooming in can cause pixelation, and any style changes require generating new images.
Vector Tiles: Contain raw geometric data and attributes. They allow for smooth scaling without loss of quality and enable dynamic styling, such as changing colors or labels, directly in the browser.

Oracle Spatial 23c introduces support for generating and serving vector tiles directly from spatial data stored in the database.

Step 1: Prepare Your Spatial Data

Ensure your spatial data is stored in a table with an SDO_GEOMETRY column.

 
CREATE TABLE city_boundaries (
    id NUMBER PRIMARY KEY,
    name VARCHAR2(100),
    geom SDO_GEOMETRY
);

Step 2: Generate Vector Tiles

Use the SDO_UTIL.GET_VECTORTILE function to generate vector tiles. This function supports both Google and TMS tiling schemes.

 
SELECT SDO_UTIL.GET_VECTORTILE(
    'CITY_TILES', -- Layer name
    geom,
    10,   -- Zoom level
    123,  -- X tile coordinate
    456   -- Y tile coordinate
) AS vector_tile
FROM city_boundaries; 
🕮 Why we should use Vector Tiles ?
Smaller file sizes lead to faster loading times.
Dynamic styling without the need to regenerate tiles.
Clear and sharp rendering at any zoom level.
 Enhanced user interactions, such as tooltips and feature highlighting.

Step 3: Enable Vector Tile Caching

To improve performance, enable caching for vector tiles. Oracle Spatial supports caching, which reduces the need to regenerate tiles for repeated requests.

 
BEGIN
    SDO_UTIL.ENABLE_VECTORTILE_CACHE(
        'CITY_BOUNDARIES', -- Table name
        'GEOM'             -- Geometry column
    );
END;

Step 4: Serve Tiles via Oracle REST Data Services (ORDS)

Expose the generated vector tiles through RESTful services using ORDS.

 
BEGIN
    ORDS.ENABLE_OBJECT(
        p_object        => 'CITY_BOUNDARIES',
        p_object_type   => 'TABLE',
        p_auto_rest_auth => FALSE
    );
END;
/

BEGIN
    ORDS.DEFINE_MODULE(
        p_module_name    => 'vectortiles',
        p_base_path      => '/vectortiles/',
        p_status         => 'PUBLISHED'
    );

    ORDS.DEFINE_TEMPLATE(
        p_module_name    => 'vectortiles',
        p_pattern        => 'tile/{z}/{x}/{y}',
        p_source_type    => 'json/query'
    );

    ORDS.DEFINE_HANDLER(
        p_module_name    => 'vectortiles',
        p_pattern        => 'tile/{z}/{x}/{y}',
        p_method         => 'GET',
        p_source_type    => 'json/query',
        p_source         => 'SELECT SDO_UTIL.GET_VECTORTILE(
                                 ''CITY_TILES'', geom, :z, :x, :y
                             ) AS vector_tile 
                             FROM city_boundaries'
    );
END;
/

This setup creates an endpoint to retrieve vector tiles in Protocol Buffer format:

 
http://yourserver:8080/ords/vectortiles/tile/{z}/{x}/{y}.pbf

Step 5: Display Vector Tiles in a Web Application

Utilize web mapping libraries like Leaflet with the Leaflet.VectorGrid plugin to display vector tiles.

 
<!DOCTYPE html>
<html>
<head>
    <title>Vector Tiles with Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js"></script>
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Initialize the map
        const map = L.map('map').setView([40.7128, -74.0060], 10); // New York City coordinates

        // Add a base layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ' OpenStreetMap contributors'
        }).addTo(map);

        // Add vector tile layer
        L.vectorGrid.protobuf('http://yourserver:8080/ords/vectortiles/tile/{z}/{x}/{y}.pbf', {
            vectorTileLayerStyles: {
                CITY_TILES: {
                    weight: 1,
                    color: '#3388ff',
                    fillColor: '#3388ff',
                    fillOpacity: 0.2
                }
            }
        }).addTo(map);
    </script>
</body>
</html>

👉TIP: Combining H3 Spatial Indexing with vector tiles can lead to more interactive and insightful maps.

👀 I suggest you read this article about H3 Spatial Indexing in the below link :

https://lidagholizadeh.blogspot.com/2024/12/implementing-h3-index-for-spatial-data.html

Comments

AnonymousMarch 22, 2025 at 4:57 AM
A few things to consider: 1) Vector tile caching should be disabled during large DML operations for better performance. 2) When exposing tiles via ORDS, ensure SDO_UTIL.GET_VECTORTILE uses correct :z, :x, :y params. Not bad! 😛

ReplyDelete
Replies

Add comment

Oracle APEX,Oracle Spatial

Lida Gholizadeh