Andrea Aime GeoSolutions Vector tiles and GeoServer: dynamic vector tiles server, XYZ services, and base maps 

GeoSolutions Enterprise Support Services Deployment Subscription Professional Training Customized Solutions GeoNode • Offices in Italy & US, Global Clients/Team • 30+ collaborators, 25+ Engineers • Our products • Our Offer 

Affiliations We strongly support Open Source, it is in our core We participate in OGC testbeds and get funded to advance new open standards We support standards critical to GEOINT 

5 minutes vector tiles intro 

It’s tiles • Most of the tooling is centered on “Web Mercator Quad” (Google/OSM pyramid) 

It’s vector tiles • A vector-based format for delivering map oriented data (not for editing, processing) • Vector based • Geometry + attributes • Client side rendering Raw data 

It’s vector tiles • A vector-based format for delivering map oriented data (not for editing, processing) • Vector based • Geometry + attributes • Client side rendering OSM like 

It’s vector tiles • A vector-based format for delivering map oriented data (not for editing, processing) • Vector based • Geometry + attributes • Client side rendering Positron 

What do we do to geometries…. • Geometries are clipped on the tile (on a buffer around it) • Vertices snapped on a integer grid (fine enough for display at that zoom level) 

What about features and attributes? • A good vector tile is a small one • As few features as possible in the tile • Minimal attributes • Coalesce geometries with the same attributes In yellow, one feature! 

GeoServer producing vector tiles 

Proudly doing MVT since 2015 • Vector tiles community module, GS 2.8.0, 2015 • Official extension in 2.14.0, 2018 • Last significant improvements, 09/2024 

How to vector tile in GeoServer • Choose MVT as tile caching format • Choose WebMercatorQuad gridset 

Tiled preview wireframe + attributes 

Controlling tile contents • Good vector tiles are small! • We need • Scale dependencies • Filters • Attribute selection • Feature collapse (geometry union)§ • And one more thing • Polygon label-point generation 

Styling to the rescue • Styles already do • Scale dependencies • Feature filtering • You might already have sensible styles for PNG/JPEG rendering • MVT engine just ignores the symbolizer part • Vendor options to control attribute selection and feature collapse 

GeoCSS single layer example gs:roads [@z > 11] [type=highway] { stroke: black; vt-attributes: 'name'; vt-coalesce: true; } Layer Scale dep. Attribute filter Small oddity, activate output 

GeoCSS multilayer example @mode "Flat"; tiger:poly_landmarks { fill: gray; vt-attributes: 'LANAME,CFCC'; vt-labels: true; } tiger:tiger_roads [@z > 11] { stroke: black; vt-attributes: 'NAME'; vt-coalesce: true; } tiger:poi [@z > 12] { mark: symbol(square); } 

Getting in touch with XYZ apps • Grab the ResourceURL from WMTS capabilities, replace placeholders http://host:port/geoserver/gwc/service/wmts/rest/nyc-vt/{st yle}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?forma t=application/vnd.mapbox-vector-tile http://localhost:8083/geoserver/gwc/service/wmts/rest/nyc-v t/WebMercatorQuad/{z}/{y}/{x}?format=application/vnd.mapbox -vector-tile 

Using in external applications maputnik example 

MVT in other CRSs too • GeoServer can generate vector tiles in any CRS • Step 1) New gridset, e.g., “LongIslandQuad” 

MVT in other CRSs too • Step 2) Bind gridset with layer • Step 3) Grab and customize tiles URL from WMTS capabilities http://localhost:8083/geoserver/gwc/service/wmts/rest/tiger-ny/ LongIslandQuad/{z}/{y}/{x}?format=application/vnd.mapbox-ve ctor-tile 

MVT in other CRSs too • Step 4) Customized JS client (e.g., OpenLayers) const extent = [970000, 180000, 1020000, 250000]; const resolutions = [ 273.4375, 136.71875, 68.359375, 34.1796875, 17.08984375, 8.544921875, 4.2724609375, 2.13623046875, 1.068115234375, 0.5340576171875 ]; const tileGrid = new ol.tilegrid.TileGrid({ extent: extent, tileSize: 256, resolutions: resolutions }); Grid structure 

MVT in other CRSs too proj4.defs("EPSG:2263", "+proj=lcc +lat_1=41.03333333333333 +lat_2=40.66666666666666 +lat_0=40.16666666666666 +lon_0=-74 +x_0=984250 +y_0=0 +datum=NAD83 +units=ft +no_defs"); ol.proj.proj4.register(proj4); const projection = ol.proj.get('EPSG:2263'); const vectorTileLayer = new ol.layer.VectorTile({ source: new ol.source.VectorTile({ format: new ol.format.MVT(), url: 'http://localhost:8083/geoserver/gwc/service/wmts/rest /tiger-ny/LongIslandQuad/{z}/{y}/{x} ?format=application/vnd.mapbox-vector-tile', projection: projection, tileGrid: tileGrid, }), … }); CRS Putting it all toghether 

MVT in other CRSs too 

GeoServer consuming vector tiles 

MBTiles store • MBTiles are Sqlite files chock full of tiles • They can be vector tiles • MBTiles store community module • Exposes vector tiles as “vector layers” 

MBTiles available in the wild 

MBTiles available in the wild • Whole world, or just one area • You’ll have to “log in” eventually 

Roll your own with Planetiler • Download raw OSM data • Use planetiler to convert into MBTiles 

Mapbox styles extension • Mapbox styles is a JSON based style language • Designed to work with vector tiles • GeoServer has a basic understanding of it { "version": 8, "name": "simple-offsetline", "layers": [ { "id": "simple-line", "type": "line", "paint": { "line-color": "#000000", "line-width": 1 } }, { "id": "simple-offsetline", "type": "line", "paint": { "line-color": "#FF0000", "line-width": 1, "line-dasharray": [5, 2], "line-offset": 5 } } ] } 

Styles available in the wild 

Put them together • Combine them to generate your own base maps • github.com/geosolutions-it/openmaptiles 

Sample GeoServer rendering 

Ok ok… but why? • Existing clients needing raster tiles • (packaged, pre-existing, old browsers…) • You need you own base map • sealed environment • customization • Needs your own CRS • not everyone wants to use Web Mercator • not everyone can use Web Mercator 

OSM in MGI 1901 / Balkans zone 5 • Produce vector tiles • Use case, target projection • Consume vector tiles • Use case, basemap EPSG:8677 

The End Questions? [email protected] [email protected]