Skip to content

VectorTiles

andy.rothwell edited this page Feb 13, 2020 · 8 revisions

Vector tiles

phila-vue-mapping (and therefore, mapboard, layerboard, or any other framework) does not handle Vector Tiles yet.

According to Mapbox's page on vector tiles:

"A vector tile is a lightweight data format for storing geospatial vector data, such as points, lines, and polygons. Vector tiles are used to create Mapbox vector tilesets."

According to the Mapbox page on vector tilesets:

"Vector tilesets are the vector data equivalent of raster tilesets. Instead of storing raster data in the form of pixels, vector tilesets store vector data in the form of points, lines, and polygons as vector tiles."

The format was adopted by ESRI, which describes them here, like this:

"Vector tile layers reference a set of cached vectors and the information for rendering the vectors. Data in vector tile layers is stored in individual layers containing geometry, attributes, and styles. Styling information is stored separately from the tile geometry and attributes, and more than one style can be defined. This means that one set of vector tiles may be styled numerous ways without having to generate a new cache for each style. This saves space and speeds up the process for creating new map styles."

So you can now create a set of vector tiles using Mapbox or ArcGIS Pro.

Handling vector tiles in phila-vue-mapping is needed, as the Streets Dept. worked with ESRI to create this service for StreetSmartPHL, only to find that Layerboard was not prepared for working with vector tiles yet.

Options for handling Vector Tiles in a web map

Leaflet

Using the plugin Leaflet.VectorGrid, this example site (see in github) was set up to prove that Leaflet can handle vector tiles.

Note, the Leaflet.VectorGrid plugin was recommended by the official Leaflet plugins page.

It seems to be fairly currently worked on in github (last commit was Nov 29, 2019), but not frequently worked on.

No styling originally went into the site, leaving it looking like this:

Mapbox GL JS

Information about developing mapbox gl js components in phila-vue-mapping is here.

Clone this wiki locally