Time for action – working with the TileVector source

The use of a tile grid removes the need to implement a loader function; so, there is less work involved in setting it up. Let's see how easy it is to use the TileVector source:

Starting from the previous example, add the following after the serverVector layer is defined:

var tiledSource = new ol.source.TileVector({
  format: new ol.format.TopoJSON({
    defaultProjection: 'EPSG:4326'
  }),
  projection: 'EPSG:3857',
  tileGrid: new ol.tilegrid.XYZ({
    maxZoom: 19
  }),
  url: 'http://{a-c}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson'
});

Now, add create a vector layer using this source:

var tiledVector = new ol.layer.vector({
  source: tiledSource,
  style: vectorStyle
});

And finally, change the map to load the tiledVector layer instead of the serverVector layer:

var map = new ol.Map({
  renderer: 'canvas',
  target: 'map',
  layers: [tiledRaster, tiledVector],
  view: view
});

Load this in your browser and you should see something like the following screenshot:

What just happened?

As you can see, the TileVector source is quite a bit simpler than the ServerVector source. For the TileVector, we provided a format, a projection to convert vector features into (typically, the projection used with the map's view), a tileGrid, and a url. The format specifies what format the features will be in, which tells OpenLayers how to read features from the tiles sent by the server. It also can specify the projection used for the features. In this example, the server provides files in the TopoJSON format, a variant of GeoJSON that encodes topology, in a projection of EPSG:4326 (latitude and longitude). The tileGrid tells OpenLayers how to convert geographic coordinates into rows and columns that the server will understand. You can't just use any tileGrid with any server—it's very important that the tileGrid matches what the server expects. The XYZ tile grid, however, is a very common grid used by most tile servers, both raster and vector. The url property tells OpenLayers where to request each tile from. There are some special placeholders that you can put into a url that OpenLayers will replace on the fly when requesting a specific tile:

{z}: This will be replaced by the current zoom level.
{y} or {-y}: This will be replaced by the row of the tile. The {-y} option inverts the y axis, this is needed for some servers.
{x}: This will be replaced by the column of the tile.

After defining the source, it can be used with the vector layer in the same way the ServerVector source was used, and the layer is added to the map in the same way too.

The result is that when you load the browser, OpenLayers will request vector tiles from the server and render them using the style we defined.

To see what happens when vector tiles are requested, open Web Inspector, switch to the Network tab, and make sure All is selected, then reload the page. You will see the requests that fetch the vector tiles end with the .topojson extension:

Click on some requests and view the responses. Do you see the difference between this and the ServerVector responses? Here, the features are returned directly as a JavaScript object while in the previous example, they were wrapped in a JavaScript function call.

Look through the requests for the raster tiles they are the ones that end with .png. You should be able to find a raster tile for each vector tile because they are using the same tileGrid.

One of the side effects of using vector tiles is that vector features such as lines and polygons may cross more than one tile and will be split up into different features. If you are rendering polygons with a stroke, or lines with dashed styles, you will see some interesting effects at the edges of the tile boundaries. We can see an example of this when first loading the TileVector, in this particular case. The river that runs vertically through the center of the map has several horizontal lines in it that coincide with the tile boundaries. Line features are typically less affected and point features shouldn't be affected at all. You can use polygon features, but you will probably want to render a fill style only to avoid artifacts at the tile boundaries.

Now, we've seen it in action, let's review all the options available when using a TileVector source:

Name	Type	Description
`attributions`	`Array.<ol.Attribution>`	As with `ol.source.vector`, this is an optional array of attributions to display when features from this source are displayed on the map.
`format`	`ol.format.Format`	This is the format that the features are represented in.
`logo`	`string \| olx.LogoOptions \| undefined`	This is a logo to display when features from this source are displayed on the map.
`projection`	`ol.proj.ProjectionLike`	This is the projection for feature geometries after loading.
`tileGrid`	`ol.tilegrid.TileGrid`	The tile grid specifies how the world is divided up into tiles. The most popular is `ol.tilegrid.XYZ`.
`tileUrlFunction`	`function` \| `undefined`	This is a function that returns a URL given a tile coordinate and the projection. This is required if both `url` and `urls` are not provided.
`url`	`string \| undefined`	This is a string representing the URL from which to request tiles. The string must contain placeholders identifying the tile coordinates as row (`{y}` or `{-y}`), column (`{x}`) and zoom (`{z}`).
`urls`	`Array.<string> \| undefined`	This is an array of URL strings following the same convention as the `url` option. Some servers provide multiple domain names to access tiles from to allow browsers to request many tiles in parallel.

Previous Chapter

Time for action – creating a loader function

Next Chapter

Time for action – a drag and drop viewer for vector files

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – working with the TileVector source

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide