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

Mapbox vector tiles have emerged as a popular format for delivering geospatial data, offering dynamic rendering and interactivity for modern web maps. While not an official OGC standard, this open specification has been widely adopted, making it a staple of web cartography. This presentation delves into GeoServer's evolving capabilities to serve Mapbox vector tiles, emphasizing recent enhancements and best practices.

We will explore how GeoServer leverages SLD and CSS to define the contents of vector tiles, ensuring tailored and efficient data delivery. New configuration options, such as label point generation, attribute selection and geometry coalescing, will be highlighted as tools to control and optimize tile outputs. Practical advice will also be provided for streamlining vector tile generation, helping users create seamless and scalable workflows.

The session will conclude with a look at how vector tiles can serve as an input for generating high-quality base maps in various coordinate reference systems. Using OpenMapTiles styles and Planetiler, we will demonstrate how to produce visually appealing, multi-projection base maps, unlocking the full potential of vector tiles for diverse applications.

Whether you're building interactive maps or generating custom base maps, this talk will equip you with the knowledge and tools to make the most of GeoServer's vector tile capabilities.

Transcript

1. Andrea Aime GeoSolutions Vector tiles and GeoServer: dynamic vector tiles server, XYZ services, and base maps
2. 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
3. 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
4. 5 minutes vector tiles intro
5. It’s tiles • Most of the tooling is centered on “Web Mercator Quad” (Google/OSM pyramid)
6. 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
7. 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
8. 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
9. 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)
10. 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!
11. GeoServer producing vector tiles
12. 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
13. How to vector tile in GeoServer • Choose MVT as tile caching format • Choose WebMercatorQuad gridset
14. Tiled preview wireframe + attributes
15. 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
16. 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
17. 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
18. 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); }
19. 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
20. Using in external applications maputnik example
21. MVT in other CRSs too • GeoServer can generate vector tiles in any CRS • Step 1) New gridset, e.g., “LongIslandQuad”
22. 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
23. 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
24. 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
25. MVT in other CRSs too
26. GeoServer consuming vector tiles
27. 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”
28. MBTiles available in the wild
29. MBTiles available in the wild • Whole world, or just one area • You’ll have to “log in” eventually
30. Roll your own with Planetiler • Download raw OSM data • Use planetiler to convert into MBTiles
31. 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 } } ] }
32. Styles available in the wild
33. Put them together • Combine them to generate your own base maps • github.com/geosolutions-it/openmaptiles
34. Sample GeoServer rendering
35. 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
36. OSM in MGI 1901 / Balkans zone 5 • Produce vector tiles • Use case, target projection • Consume vector tiles • Use case, basemap EPSG:8677
37. The End Questions? andrea.aime@geosolutionsgroup.com info@geosolutionsgroup.com