This guest post is by Liujian Qian.
Since the release of MapViewer 126.96.36.199.0, and the Oracle Spatial Map Visualization Component 19.1.0 (which contains all the essential functions of Oracle FMW MapViewer) there has been a lesser known but powerful new feature called “Vector Tile Service”. This service can be used to generate and stream vector tiles that contain data for a single pre-defined SMVC (Spatial Map Visualization Component) theme on the fly.
Vector tiles, in case you are wondering, is a compact binary data format where each vector tile (divided geographically according to the same popular World Mercator tiling scheme used by many world-map services) can contain geometry and attribute data for one or more map layers. For more details about Vector Tiles, check out the Mapbox blog here.
Note that SMVC currently does not cache previously generated vector tiles, unlike image map tiles which are typically cached to the disk.
So how do you visualize large volumes of Oracle Spatial managed spatial data using vector tiles? Currently SMVC does not provide any tool out of the box for visualizing the vector tiles it generates, but there are a number of open source API options, including the OpenLayers API and the Mapbox GL JS API. In this blog we will show an example of using the Mapbox API, but the same concept applies when using the OpenLayers API.
The above screenshot illustrates what you will see when you run this demo. Note that the demo has been tested with SMVC version 19.1.
All the files and source code for the demo are located here: https://github.com/ljqian/oraclemaps. To run this example, you must already have SMVC 19.1 or MapViewer 188.8.131.52+ installed and running, with the “mvdemo” sample data schema defined as a SMVC data source named “mvdemo”. Note that if you didn’t have this data schema or data source defined, you can still run the demo by changing the name of the data source and the theme, as well as the properties used in the example for showing a popup. Also, it is best that your own theme contains point type geometries which are what the demo is designed to show. It is trivial to modify the demo code so that other types of geometries such as linestring or polygon can be displayed. The vector tiles generated by SMVC can contain any type of geometries.
If your SMVC or MapViewer server is up and running, the next step is to copy the demo files to your application’s web server document folder so you can open the demo.html page in a browser.
The demo code itself is entirely embedded in the demo.html file, with detailed comments to help understand the code. If you are already familiar with the Mapbox GL JS API in general then the demo should be fairly easy to understand.
The demo starts by creating a new Mapbox Map instance. Its background map uses the image map tiles hosted on Oracle Maps Cloud Service. The image tiles are part of a SMVC tile layer. Note that Oracle Maps Cloud Service can only be used for demo purposes and cannot be incorporated into an end-user application.
In the demo’s map-styles sub-folder you will find the JSON stylesheet for the world-map as well as the accompanying sprites and fonts, which are not used in this demo but might be useful down the road in a more sophisticated application. If you want to use your own SMVC defined tile layer as your application map’s background, just make sure the tile layer is created using the Google-like Web Mercator tiling scheme, as any other tile scheme will not work with Mapbox GJ JS. To use your own SMVC defined tile layer as a background", you will need to change the JSON stylesheet so that it references tiles generated from your local SMVC instance instead of the one running on Oracle Maps Cloud Service.
Do note that while this demo displays a background map that is based on a SMVC (image) tile layer, you can easily switch to a Mapbox or OpenStreetMap hosted background (world) maps which can be either image or vector tile based. If you already have a subscription account with Mapbox and custom maps then those are likely what you will be using as background maps.
The rest of the demo code is clearly documented as inline comments and should be self-explanatory. The key steps are:
We hope this simple demo provides enough information to get you started developing your own SMVC vector tile applications using the Mapbox GL JS API.
While any given vector tile generated by SMVC can only contain one pre-defined theme, that does not mean in your application's map visualization you are limited to showing only one such theme at a time. Using the Mapbox API (or OpenLayers) you are free to add as many data layers as needed, as long as you define the source for each and add the theme contained in it as a layer to the Mapbox Map object. The below screenshot shows such a map where three different SMVC themes (customers, sales territories and inter-state highways) are displayed on top of a single background map. Here the "customers" layer is displayed using Mapbox API's heatmap rendering type, while the territories and highways are displayed using the fill and line rendering types. At run time for each area on the map that falls inside a tile's bounding box, 4 separate tile requests will be made, one to get the background map's tile, and one each for a vector tile containing the customers, sales territories and highways data.