Vector Tiles with GeoServer and OpenLayers

Video in TIB AV-Portal: Vector Tiles with GeoServer and OpenLayers

Formal Metadata

Vector Tiles with GeoServer and OpenLayers
Title of Series
Part Number
Number of Parts
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Production Place

Content Metadata

Subject Area
The latest release of GeoServer adds support for creating Vector Tiles in GeoJSON, TopoJSON, and MapBox Vector Tiles format through its WMS service for all the vector data formats it supports. These tiles can be cached using GeoWebCache (built into GeoServer), and served with the various tiling protocols (TMS, WMTS, and WMS-C). Thanks to very recent OpenLayers 3 development, these Vector Tiles can be easily and efficiently styled on a map. This technical talk will look at how GeoServer makes Vector Tiles accessible through standard OGC services and how they differ from normal WMS and WFS usage. It will also look at how OpenLayers 3 - as a simple-to-use vector tiles client - interacts with GeoServer to retrieve tiles and effectively manage and style them. OpenLayer 3’s extensive style infrastructure will be investigated.
Keywords Boundless
geo presentation component Meeting/Interview Bounds open
choice pixels awareness demos range clients areas Biomedical Imaging preprocessors Services media different law render screen Relation component map widgets Gradient bit part break messaging job rendering sort Space point page file image 3rd similar mass rules Cache level boundaries Maßstäbe Standards scale information Resolution tile servers vector content Independence clients lines Case Large Eddy Simulation component Decision time solitaire part subset web geo Mathematical Squares display box job information related code extent areas Real Store Attribute open connections useful work Tile bandwith Tower render results symbols Runde digital filters servers control App functionality map factor lines Resolution Real color Tile second strings shell rendering task modules awareness rules response Webcasting inherits analysis single Computer animation Services objects Maßstäbe
Standards effective pixels P2P Overlays component code attitude time sources function open Heads part rotation variance subset Biomedical Imaging geo Mathematical signing rates core Frameworks information render pixels library Positive Classes rotation areas P2P Overlays sources map component Width point binary code interior list Attribute instances several open Tile option Ordering render orientations recording geo Space point functionality map Resolution image interaction Axonometrie color events metadata versions MVT CAMS optimization Standards information Resolution servers Net projection analysis interaction lines binary encodings Application subset pointers Computer animation networks Case box display library
point slides presentation functionality laborers state time demos 3rd menu Join web Biomedical Imaging Mathematical Meeting/Interview curve screen demos map projection interaction content bit lines open Computer animation Case library
observer servers functionality pixels TRANSFORMATION time Resolution print clients open transfers parameter part goodness Mathematical Services Meeting/Interview encoding Systems Classes addition Standards map demos list effectiveness Word speech geo library PDF
Windkanal Meeting/Interview Kerr Extremwerte Normal force
screen laborers component Meeting/Interview terms time list mass 5th Outline
management Computer animation Meeting/Interview ICC
but it does so without further ado
represent to the presentation about your sword and openly free for I will be talking about that generated by GeoServer rendered using OpenLayers others will disagree but for me it was interesting thing to happen induces the last little while is enacted house there really easy use of people that a lot of possibilities and really excited talk about them and here's a classic
characters Cabral he wrote the original GeoServer vector tells components undated and currently moving better tiles producer community module 2 or more official extension of the module media under he wrote the book there's components to be talking about OpenLayers later on on but it's the started you quickly introduce vector tells in relation to what's familiar piled maps whose standards but what about using voice and data we've all seen on the planet the people around you get little independence squares called tiles that pulled in from the server these massive great server only has brought each each file once this cash is very good for everyone using a map to make for bad asleep interactive maps is was entirely a a lot of time never went pictography 4 that's it looks great it's clear and beautiful it should be easy to put together a map using these files however is not much you can do with them other than drawl but not any any access the underlying feature linework work military being control how the map what it's step set in stone but what if we do the hard work get back what's available energy level get ready to draw that don't actually draw is that packet real feature really all features into squares just waiting to be drawn we call these data tiles without selling information that the house which is vector tells the men grade and catch them we will then deliver them in exactly the same way as an image TileMap except instead of just living images on the screen the client decides what strong and how about it does the rendering and result is a personalized interactive vector tells whether that I would emphasize that image how maps invented how maps for very similar except in the shells maps have free rendered on the server piles and details have rendered on the client files and they're not telling this is pretty much exactly the same that tells are empowering and efficient but a little bit harder to work well this is a thousand of these stories to tell if your map data better tower tiles empower the client to the server to decide which stories told to the client decides what the map looks like you not constrained to the service cartography decisions tiles are very efficient because you can tell you can tell all the thousand stories with the same time you only need 1 copy of them on the server is just render them differently on a client they're also efficient because the Committee pack a lot of information too little space this is especially true for the high resolution displays that really popular out is yet to bring in a lot of pixels that means a lot of extra image files that's a ton of actors server bandwidth and storage drive vectors which look at any resolution is sort of pre generated images can be really efficient it's a huge savings the last 2 points that it tells the more difficult to work with specially doing your own style this you need to understand both feature data and the tools likely addresses maybe tools is easy to use as possible I think vector tells me continually talking mostly about the service I have creates factor tells in and how you can control their content the take way of this is that acted housing easy-to-use GeoServer and all the tools and techniques that you're familiar with you get to reuse undressed we talking about in gambling the client-side OpenLayers is there really slick demo and show you some cutting edge new functionality it's super easy get thousand user and you want is instead asking for an image like a PNG produce servers w Master just ask for a better tells format that says is that of an image 13 get invented how about and your server history set of throwing it into an image campus over ROS into a data file will go into more details about the and to make them available through due what catches how caching services just the box in the vector tells format you're publishing to it does the rest is nothing else to worry about that's 5 seconds and you're up and running before going to the tells us what the vector tells in context of the open of the OGC services on it's a look at using because you make maps maps of them so I think that the mass which used to make apps there's also files in the title something in Tulsa those services like W and yes there's also factors in top in the search in the title so I think that the best response querying and retrieving features it's all a little confusing so to be clear we used use servers that the mass of the special vector tiles renderer to generate task we used dual webcast to handle the hashing entirely due what catches the magical it just works and if we ask is that in the context of vector tiles is surprisingly pretty much independent a lot of people feel that because that the passes is about access to funds style feature data should be connection between vector tiles and that's turns out of the lead to provide actual axis the future data line working at it's they they differ because vector Charles provide easy to render features and WFS returns the glorious feature details needed for actual GIS analysis GeoServer the mass rendering process is fairly comprehensive this 2 main renderers streaming render uses the image maps trust out features on image the vector files friend work which used to make that tells trust and self features into a data files in both the writers in in In the end both ranges are very similar people preprocess and render the data you actually image quantity of fire just as the interest of time to talk about
most of the steps of the 2 warning that the job to easily generalized to make this smaller perhaps transform can other serious and very small subsets of features will be on may be embedded in almost all cases this is exactly what you want I'm going to talk about putting in controlling the creation of the vector towns using Soviet with clips were always and what needs to be drawn to the child I'm saving storage and rendering time but we don't put right tell boundary we get that the tiles look wrong advantages especially if using vapor big styles were features CrossCorr near the boundaries so that the received objects a cooking too close to the boundary issue and makes maps such horrible things here in the course I'm just a quick note because of the extended clipping area will see overlapping data in adjacent tiles which is in a problem when you're rendering sometimes something to be aware of if you're doing any analysis of the task OpenLayers across all the data on the top of the rendering is left to the exact tile boundary is exactly what you want in your maps right the the final piece of the puzzle is how we decide what in what it is in the tiles various map scales for example with the moons zoomed in on what I wanna when zoomed out only 1 show highways when zoomed in I wanna from most of the roads incomes sold the styled layer descriptor which is the standard OGC way describe how to style map as so these users so as you making pretty maps colors bills and clients and things like that styling is the jobstream streaming renderer drawing images the vector tiles simple if the SLT rule would have drawn images that picture onto the image it draws it without sound information into the vector tiles data file to suppose that the BS that he would have drawn that that the features on the image of the the vector tells data this basically 3 parts that so the roles scale How the in it out you are controls all rules are getting turn it off filter which shows you what what data used as thousands is about a towers but important for image how maps so you could make it unclear map I think you'd have to really try I'm showing the role of for for sure residential residential roads using a filtered only when using in more than 1 270 thousand for the streaming and renderer is we show an image within blue lines when using for the Beckett files rendered it we get put into the back to tell In the vector Taylor tile data file no styling information when using down remember when the vector of string regular would have drawn the feature vector tells render puts it in the data file I'm using our a really ugly matter just make the standards easier to see but also prove a point with vector tells you get to decide what grammatical take you don't get stuck with my part of the decisions traditionally would use you tested tile and cash Adobe messed images using this SLT the and boom you got really ugly web that shows different details of data depending on zoomed in you are really sets and stuff but if you want to use my data but not my colors or most of right choice of standing but that all takes 5 seconds to make this available as separate housing GeoWebCache we power of client to make the selling decisions now we're cooking with gas yep here's an example of an image and a vector tells map the same valuable maps as you'd expect that will behave primitive exactly the same you gives vector details in most situations where you use image power maps there to take the common changes on a show you 1st of all just changing how fine fine map what's styling ponderously doubling this later on 2nd involves changing the servers so to change what what the reader gets put into the vectors the 1st this simple ostalim changes shown here this is articles really sigh I really really shines you want your Mac but different just have to change the clients styling function and nothing on the server changes you don't have to regenerate the task I have layers that function to do rotating as you can see cannot change anything on the server like it is the exact same tiles and I now have 2 different looking maps the the 2nd letter changes more complex my Mac my map is missing some of the features or to drop the features are just not in the vector tiles data this so the putting always them both ways into the vector tiles because there's no hassle the rule that says that you that straddles data vector tells I at the castle the an admiral renders the pope ways into the vector task as shown here due natural magically knows as all the change in reset cash this is an example of a change of the server to change the actual content of the vector tells the the previous was applied to change the change the styling of the map now that adequately the server back to town data I also about openly styles renders them I've chosen page dashed lines going viral growth that this mapping this is the basic idea behind behind the houses and GeoServer we used SLG to render peaches clean generalization and clipping into a data file that you won't catch me available in a cash entirely matter it's really easy to underestimate talk about all the layers of time candidates so let's take a look for
those of you who not here in the morning session OpenLayers is met framework of Matlab at the ivory and it can match pretty much everything images image tries to make the data and also tied metadata can do so in any projection you can even have a Raftery protection in open it has full rotation support so if you have a navigation application you can have a head head up in that instead of the north of met with support animations that's transition you're viewport from 1 so that those position whatever to another and then combine these animations so could even the fly through values or whatever you could think of and it integrates very well with other libraries like for example sees you more 3 but ties in open areas of being version 3 11 I think so about 10 months ago but we already gave us the Beaver last year at the conference and sold but that was ordinary and then we support basically all the vector formats that are available in open but networks like the ties is the preferred format because it has the best optimizations for granted and styling works the same as with on-time record data using open their style functions and I'm going to show you how would you start functions work in a minute but also because attitudes that are required for styling are transferred with the that because you can have some interactivity in your map for example the hover over features and get information about the features to have access to the future and I can expressed if there's enough they've already said it's not a replacement for vector as in that we have this data it's really not made for analysis it's made from entering map expected has support in helping their use in capsule than the OL formant MVT class it uses map books is PBS library to read the binary tile data and use this method to spectral Thailand read to extract the layers and features from the vector in openly as what we had to that format is you can also configure it to only read a subset of the layers that are available in the vector class and instead of creating a feature instances which have have the flu geometries for that be useful event listening for changes and everything we create very light weight render features that I have coordinates in pixel space there are various clustering so far usually you would create a vector ties layer like you wouldn't xyz layers of that is the has roster has like OpenStreetMap layer but in all the company as we can take advantage of the emptiness output format so this code snippet shows how you could read those of you entered as capabilities from user several for layer that was that that provides an approximate the ties and with the time neuron function and the time rates that we get back from the WMT has capabilities parsing we can finally create our but highly open issues that class erected time for vector I layers and the source of has the same name and the most interesting part is the last line here in this code snippets of the style of nearsighted functions are called with the future that's being style and with the resolution that's used to render the feature and this allows for very flexible signing of 1 and a simple example in this snippet you receive streets with road casing style nicely by at having 2 styles 1 with the thicker line with for the casing and another with a different color with the thing of for the actual wrote and open also has z-index support so you can tell the emperor the order that you want to features from so obviously you want to casings below but actual speed for getting interactivity when hovering over them that you can also can use the same standard of there's features that you would use for vector layers you can register for point the event which gets triggered whenever you move your pointer over the map and inside that list there you can use that for each feature at pixel function and that function is called with the feature and in this case we just want to display the name of the feature in an overlay that is positioned next to the feature itself at its core but still some
alive demo to show you features right good and goes to
the big screen where is it yeah yeah and I should see where to make it flow screen somewhere here only the it alright so this is but in that's had they've had mentioned which has the same basic styling that he used in his as the lead I went ahead and took the same map change the size of little bits but these casings and and everything and I don't know if you've noticed but the map that they've uh what 1 has shown with using this for 3 to 6 as projections so it might look a bit unfamiliar so I made another change and requested the Web Mercator ties settings that from use over and I ended up getting a map that looks a bit more familiar to you can also see labels here and the nice thing about that times this menu rotate the map that the labels the state a prior to initiation content and so the labor stay upright and I also mentioned the interactivity so as a hover over the features here you can see you the names of of streets and looking at it in the future of I am currently working on the library of that translates books to ties into open their style functions and this is how it looks currently as you can see there's obviously no support yet for aligning labor labels and point features that's what I'm currently working on and 1 feature that still missing in open there's these labels that follow curves are lines that should also the available very soon and then you will really be able to get a very nice looking but has maps and properly and this already brings us to the end of our presentation and I'm just not able to find the slides again because I don't know who's screens are arranged but that should keep you from the as inventions thank image fusion so that you and and regret talk more about this exciting new features and I think it really helps a lot to but not in in register any other questions during the talk so but I think there might be questions so we start right here hello and today get it right and I have to define style
twice 1st in as a leading server and then again in an open letter supply and there is no way to how play and only once very good observation that's really a thing that we're still we've been struggling with in this whole post for Chief ecosystem for 4 years that there's no good story for transferring starts from 1 system to another and that as the former is an XML XML format that is suitable for doing that but it's also quite verbose format and has and it's quite a few interesting additions that are not part of a standard of what we have and user was somewhere in between as the symbolic encoding and that's the geometry transform functions and other interesting features and my personal opinion is that with the new map external style format for the 1st time in this phosphor for cheaper system we have a style of that should be easy to transfer styles between systems and I'm like I can make a 100 % promise but if I have a funding and time to develop it I will also be and planning to work on the library that translates as the 2 men books to size and then you have the whole granted from GeoServer to openly as you could even do get arcade-style request Governments gets the request status of B and turn it into a list of functions and then at the same rendering in open just sentiment question I hope so if that wasn't thanks for the great speech but have a thing that I like ask you will always run in kind of the same problem which is about 4 and then and have you tried to sort printing with the effects of sounds to set possible I mean you have to server-side prints for the administrative of repair client-side friend I can't I can't say a few words about the clients like printing in open there's the
whole that is rendered to converse and you can take this canvas and bring and if you want to print out a higher resolution all you have to do is change the pixel ratio that you render the mapping and it but I wouldn't rendered with a higher resolution but using the same standards so that should be easy if you want to do something from the sides the argument libraries that can on the created PDF from whatever you acted on the class and you have an official demo also In the openness examples if you look for PDF and print that for clients and printing and I can answer that the service that printing press focused on only have 5 minutes on so if rooms of changes then probably is sometimes makes a of 1 question here so I was just wondering about the SLD on the jails of aside if you put in the rendering transformation the geometry transformation will that be
reflected in the tunnels no so what
and look at some other any more questions that because we would have liked and not go so that too when you have a question you know you can just shut up and because the money to decide and that's kind of what people you know because the room not that easy to get excellent during 1 of sitting up there trying to stand room so you can raise entering talks and I'm I'm I'm wondering about some of performance so you're reassuring them 1 you do try like to rotate it all selected to tick tick tick is it's as it is the normal force is getting better
small I think there was something because of switching screens a lot so I didn't get the full chemistry and performance but we do
have a performance room for performance improvement for labor rendering still an open just to if you rotate the same met without labels and festivities something with labor ending and uh it's it's the halo that you that around a font it takes a while to random but there are ways to improve the so that's also on my list for performance improvements and so I would have 1 more question than you think we do know can't answer thank you just question in terms of preparing the vector time is that possible on the fly as well there's always going to have to go through GeoWebCache no you can dreary request vector joules from the W mass generate them on the fly I don't see
any more questions on that we know what went on to the Soviet Union has been talking this introduction thank