3.3 Vector Tile Server
The vector tile server is a vector tile caching engine that fetches, caches, and serves pregenerated vector tiles.
A vector tile is encoded in ProtoBuf format (see https://en.wikipedia.org/wiki/Protocol_Buffers). This format allows serializing the structured data and it is neutral to programming languages and operating systems.
Currently, the vector tiles support only the World Mercator projection. Its Oracle SRID is 3857. Its tiling coordinates, including the number of zoom levels, and the map's data bounds, are identical to the Google Maps tiling scheme.
One vector tile is only for one layer, and it cannot have more than one layer. In Map Visualization Component terminology, a layer is called as a theme, and thus one vector tile is only for one theme; a vector tile cannot have two or more themes.
Example 3-7 Use mapbox-gl JavaScript Library to Display a Vector Tile
This example uses the mapbox-gl JavaScript library and displays a vector tile layer provided by the Map Visualization Component's vector tile server.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Simple Demo Using Oracle Visualization Vector Tile Service</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
<div id='map'></div>
<script>
var mapInstance = new mapboxgl.Map({
container: 'map',
// this defines where to load the background map tiles.
style: 'map-styles/world_map/oracle_world_map.json',
center: [-122, 37],
zoom: 4.5
});
var addMapViewerPointLayer = function() {
var mvURL ="http://"+document.location.host+"/mapviewer";
var mvDataSrc = "mvdemo";
var mvTheme = "CUSTOMERS";
var vectorTileUrl = mvURL+"/vt/"+mvDataSrc+"/{z}/{x}/{y}.mvt?t="+mvTheme ;
var layerDef1 = {
"id" : "my-layer-1",
"type" : "circle",
"source": {
"type" : "vector",
"tiles" : [vectorTileUrl], // a vector tile source
"minzoom" : 0,
"maxzoom" : 19
},
"source-layer" : mvTheme,
"paint" : {
"circle-radius": 10,
"circle-color": 'rgb(111, 111, 111)',
"circle-opacity": .8
}
};
mapInstance.addLayer(layerDef1);
};
mapInstance.on('load', addMapViewerPointLayer);
</script>
</body>
</html>
In this example, the content of the style property defined in the file oracle_world_map.json is as follows:
{
"version": 8,
"id" : "elocation-mercator-worldmap-mb",
"name" : "World Map (Oracle)",
"metadata" : {
"sgtech:version": "19.1.0",
"sgtech:sources:type": "raster"
},
"sources": {
"elocation-worldmap-mb": {
"type": "raster",
"attribution": "<a target=''_blank'' href=''https://elocation.oracle.com/elocation/legal.html''> © 2019 Oracle Corporation </a> <a target=''_blank'' href=''http://elocation.oracle.com/elocation/legal.html''> Map data © 2019 HERE </a>",
"tiles": [
"https://elocation.oracle.com/mapviewer/mcserver/ELOCATION_MERCATOR/world_map_mb/{z}/{y}/{x}.png"
],
"tileSize": 256
}
},
"layers": [
{
"id": "Oracle World Map",
"type": "raster",
"source": "elocation-worldmap-mb",
"minzoom": 0,
"maxzoom": 19
}
],
"sprite": "http://localhost:8080/mapviewer/private/mapbox-demos/map-styles/world_map/sprites/sgtech-maki",
"glyphs": "http://localhost:8080/mapviewer/private/mapbox-demos/map-styles/world_map/fonts/glyphs/{fontstack}/{range}.pbf"
}
As you see, a vector tile request sent to the mapviewer server is formulated using this template:
"http://"+document.location.host+"/mapviewer"+"/vt/"+mvDataSrc+"/{z}/{x}/{y}.mvt?t="+mvTheme ;When the example is running, if you check the browser's network traffic, you will see vector tile requests similar to the following:
http://localhost:8080/mapviewer/vt/mvdemo/4/2/6.mvt?t=CUSTOMERS
For any data source accessible by the server, its predefined geometry themes are accessible by the vector tile server.
Parent topic: Map Visualization Servers