In this second part of the series, we look at how to consume the tiles we uploaded to GCS from popular modern web mapping clients.
In the initial installment, we baked the Hamilton County contour vector tiles and uploaded them to GCS as static website content. Let's see how to consume them in OpenLayers and Esri's JavaScript API.
OpenLayers
OpenLayers supports vector tiles with the VectorTileLayer. Check out the live demo.
var contours = new VectorTileLayer({
source: new VectorTileSource({
format: new MVT(),
url:
"https://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/{z}/{x}/{y}.pbf"
})
});
After writing just a few lines of code, the Hamilton county contours are displayed on the map, complete with attributes. The blue poly lines are evidence that OpenLayers has applied its own default styling.
Client-side Styling
Earlier we mentioned that vector tiles separate the styling from the tile content, leaving it up to the client to provide styling. OpenLayers can provide styling on the client-side with the ol-mapbox-style library. Once installed, simply create a Mapbox style and apply it to the layer.
import { applyStyle } from "ol-mapbox-style";
var glStyle = {
version: 8,
sources: {
esri: {
type: "vector",
url:
"https://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/"
}
},
layers: [{
source: "esri",
"source-layer": "hamilton_contours_50ft",
minzoom: 0,
layout: {},
id: "hamilton_contours_50ft",
type: "line",
paint: {
"line-width": 1,
"line-color": "purple"
}
}]
};
applyStyle(contours, glStyle, "esri");
With the above client-side styling applied, we change the color from blue to purple. See it live.
Esri JavaScript API
It's easy to add a VectorTileLayer with Esri's JavaScript API (JSAPI). Check out the live demo.
const contours = new VectorTileLayer({
url: "https://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/"
});
Because the JSAPI requires the back end to implement certain elements of the GeoServices REST API Vector Tiles specification, a few more files must be added to GCS.
# implement GeoServices REST API specification for Vector Tile Server
mkdir hamilton_contours_50ft/VectorTileServer
touch hamilton_contours_50ft/VectorTileServer/index.json
gsutil cp hamilton_contours_50ft/VectorTileServer/index.json \
gs://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/index.json
gsutil setmeta \
-h "Cache-Control:no-cache, max-age=0" \
gs://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/index.json
# set MainPageSuffix - allows /VectorTileServer?f=json to return /VectorTileServer/index.json
gsutil web set -m index.json gs://geoaccelerators.woolpert.dev
The index.json file provides metadata about the vector tileset including descriptive information, supported services, extents and pyramid levels of detail (lod). A good starting point is the metadata file for the OpenStreetMap Esri vector tile basemap layer hosted at basemaps.arcgis.com. We began with that file and adjusted for the particulars of our tileset.
{
"currentVersion":10.7,
"name":"Hamilton County Contours 50ft",
"capabilities":"TilesOnly",
"type":"indexedFlat",
"defaultStyles":"/resources/styles",
"tiles":[
"../{z}/{x}/{y}.pbf"
],
"exportTilesAllowed":false,
"initialExtent":{
"xmin":-20037508.342787,
"ymin":-20037508.342787,
"xmax":20037508.342787,
"ymax":20037508.342787,
"spatialReference":{
"cs":"pcs",
"wkid":102100
}
},
"fullExtent":{
"xmin":-20037508.342787,
"ymin":-20037508.342787,
"xmax":20037508.342787,
"ymax":20037508.342787,
"spatialReference":{
"cs":"pcs",
"wkid":102100
}
},
"minScale":0,
"maxScale":0,
"tileInfo":{
"rows":512,
"cols":512,
"dpi":96,
"format":"pbf",
"origin":{
"x":-20037508.342787,
"y":20037508.342787
},
"spatialReference":{
"wkid":102100,
"latestWkid":3857
},
"lods":[
{
"level":0,
"resolution":78271.51696399994,
"scale":295828763.795777
},
{
"level":1,
"resolution":39135.75848200009,
"scale":147914381.897889
},
{
"level":2,
"resolution":19567.87924099992,
"scale":73957190.948944
},
{
"level":3,
"resolution":9783.93962049996,
"scale":36978595.474472
},
{
"level":4,
"resolution":4891.96981024998,
"scale":18489297.737236
},
{
"level":5,
"resolution":2445.98490512499,
"scale":9244648.868618
},
{
"level":6,
"resolution":1222.992452562495,
"scale":4622324.434309
},
{
"level":7,
"resolution":611.4962262813797,
"scale":2311162.217155
},
{
"level":8,
"resolution":305.74811314055756,
"scale":1155581.108577
},
{
"level":9,
"resolution":152.87405657041106,
"scale":577790.554289
},
{
"level":10,
"resolution":76.43702828507324,
"scale":288895.277144
},
{
"level":11,
"resolution":38.21851414253662,
"scale":144447.638572
},
{
"level":12,
"resolution":19.10925707126831,
"scale":72223.819286
},
{
"level":13,
"resolution":9.554628535634155,
"scale":36111.909643
},
{
"level":14,
"resolution":4.77731426794937,
"scale":18055.954822
},
{
"level":15,
"resolution":2.388657133974685,
"scale":9027.977411
},
{
"level":16,
"resolution":1.1943285668550503,
"scale":4513.988705
},
{
"level":17,
"resolution":0.5971642835598172,
"scale":2256.994353
},
{
"level":18,
"resolution":0.29858214164761665,
"scale":1128.497176
},
{
"level":19,
"resolution":0.149291070823808325,
"scale":564.248588
},
{
"level":20,
"resolution":0.0746455354119041625,
"scale":282.124294
},
{
"level":21,
"resolution":0.03732276770595208125,
"scale":141.062147
},
{
"level":22,
"resolution":0.018661383852976040625,
"scale":70.5310735
}]
}
}
Client-side Styling
The GeoServices REST API for vector tiles also follows the Mapbox styling specification. The JSAPI looks for styling at a well-known server-side endpoint: /VectorTileServer/resources/styles/root.json, as defined above in the metadata file. Let's create the style file.
mkdir hamilton_contours_50ft/VectorTileServer/resources hamilton_contours_50ft/VectorTileServer/resources/styles
touch hamilton_contours_50ft/VectorTileServer/resources/root.json
gsutil cp \
hamilton_contours_50ft/VectorTileServer/resources/styles/root.json \
gs://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/resources/styles/root.json
gsutil setmeta \
-h "Cache-Control:no-cache, max-age=0" \
gs://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/resources/styles/root.json
The content of root.json is a basic Mapbox style document.
{
"version": 8,
"sources": {
"esri": {
"type": "vector",
"url": "https://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/"
}
},
"layers": [{
"source": "esri",
"source-layer": "hamilton_contours_50ft",
"minzoom": 0,
"layout": {},
"id": "hamilton_contours_50ft",
"type": "line",
"paint": {
"line-width": 1,
"line-color": "#B6432B"
}
}]
}
The JSAPI applies the server-side styling to the layer, resulting in brown contour lines.
Client-side styling can be accomplished by passing a style object to the VectorTileLayer constructor.
// load a new vector tile layer from JSON object
const contours = new VectorTileLayer({
style: {
version: 8,
sources: {
esri: {
type: "vector",
url: "http://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer/"
}
},
layers: [{
source: "esri",
"source-layer": "hamilton_contours_50ft",
minzoom: 0,
layout: {
"line-join": "round",
"line-cap": "round"
},
id: "hamilton_contours_50ft",
type: "line",
paint: {
"line-width": 1,
"line-color": "#1a471b"
}
}]
}
});
With the above styling in place, we change the color from the brown server-side styling to green. See it live.
The Esri JavaScript API currently does not support the extraction of attributes, such as pop-ups or information windows, directly from the vector tiles. Instead, a companion feature service must be stood up alongside the vector tiles to support querying-like activities.
ArcGIS Online
Now that the necessary parts of GeoServices REST API specification are implemented, other applications within the Esri ecosystem become candidate consumers for the vector tile layer. First, we must add a reference to the layer in ArcGIS Online (AGOL) or Portal as a tile layer. We can also include a web map that combines the vector tile layer with a standard Esri basemap. To add a tile layer to AGOL, create a new web map and click Add > Add Layer from Web. Choose ArcGIS Server Web Service and provide the GCS VectorTileServer URL:
- https://geoaccelerators.woolpert.dev/tileservices/hamilton_contours_50ft/VectorTileServer
Click Add Layer and the tile layer appears in the map. To create the tile layer item in AGOL, click Save Layer in the layer details.
Adding the GCS vector tile layer directly as an item in the AGOL Content section was unsuccessful. We suspect it is related to unimplemented elements of the GeoServices REST API spec.
The tile layer and web map items in appear in the AGOL Content section.
A Smidgen of Mobile
With the tile layer hosted in AGOL and publicly available, we can easily add it to a mobile map in Esri's Explorer for ArcGIS. Simply search for Hamilton contours, and because it is publicly available, Explorer should quickly find it.
GCS tiles in Explorer.
Next up: Consuming GCS vector tiles in the two most popular desktop GIS clients: ArcGIS Pro and QGIS.
Comments
0 comments
Please sign in to leave a comment.