Logo TIB AV-Portal Logo TIB AV-Portal

How WebGL vector maps work

Video in TIB AV-Portal: How WebGL vector maps work

Formal Metadata

How WebGL vector maps work
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

Content Metadata

Subject Area
Mapbox GL JS is an open source library for modern interactive maps, powered by WebGL. Developed for more than 3 years, it combines a variety of sophisticated algorithms, smart ideas and novel approaches to deliver 60fps rendering of vector data with thousands of shapes and millions of points. In this talk, you will find out how it works under the hood and why it's so challenging to build dynamic WebGL applications. The talk will cover scalable font rendering, line and polygon tessellation, in-browser spatial indexing, collision detection, label placement, point clustering, shape clipping, line simplification, sprite packing, efficient binary data encoding and transfer, parallel processing using Web Workers and more!
mathematics Computer animation real vector environment Witt-Algebra real vector box part odd
map Computer animation Open Source Meeting/Interview interactive odd dimension libraries
overlay web Computer animation raster Tiled Security errors open subsets
regression trees map Computer animation real vector mapping hypermedia website Mass box odd platforms
mobile fibonacci series Open Source mobile browser Mass fan rotation Emulation data management Computer animation Payload cycle Sum family form platforms
presentation control mapping files load real views Guide expansions Menu real time storage Bounds plane number Computer animation Representation integers Sum
unit mapping map mapping time interactive coma Coloured mathematics algebraic Computer animation objects box 5th classes
man unit mapping fibonacci series map Computer animation mapping knot box 5th
CAN-bus mapping Computer animation 4th objects directions interactive objects
rules building map sin interactive applications rules similar tablets Computer animation record law objects Sum CAMS
mapping map Computer animation visualisation Sch├Ątzung editors real time editors
Computer animation 4th coma browser 8th Sans
satellite mapping Computer animation 4th Meeting/Interview Video Video box PEAS Sans
Computer animation mapping real vector link views 4th Meeting/Interview views utilizes perspective perspective
script implementation Elektronischer Datenaustausch mapping screens mapping Tiled time Android sets parallelization coma maximal student bandwidth processes Computer animation real vector bandwidth topology real vector box Sum
web web Computer animation Hardware NET cloud platforms browser Sum Emulation
web web Location Computer animation platforms Sum
mathematics Computer animation Render objects open subsets open subsets
web pixel screens lines unit coma lines Coloured programs programme Types words Computer animation calculation shaders triangle Display vertical vertices kernel
web Computer animation aliases graded triangle lines rules Arm triangle
map Computer animation time NET attributes lines triangle
Runden polygons CAP Computer animation intrusion detection systems views triangle lines Weak
triangulation mapping Computer animation completion case triangle coma Computing triangulation box libraries
Indexable image server map Computer animation map component font surjections
point server pixel fibonacci series files Latin shape regular font distances rotation image goodness regular naturally different selection area unit algorithm map unique graded Symbolic distances Computer animation software real vector Games box
point man map Computer animation 3rd limitations libraries Emulation
app Indexable mapping map Computer animation Void's box system call libraries Scalable Coherent Interface
mapping time part perspective energy Emulation buffer real vector processes encoding protocols implementation message-based unite default time man parsing dictionaries decimal coma part particle number Computer animation real vector string buffer versions key box protocols libraries
dictionaries mapping coma part number Computer animation real vector string real vector versions key mazes box implementation message-based unite default
mapping twin indicators coma Emulation Indexable Arrays Computer animation square collision Gamma box square form
dynamic tablets Computer animation 3rd maximal law sort box libraries
point man drag mapping map Tiled PROM Menu sun HPC Computer animation Now box simulation WAN
algorithm Arrays multithreaded Computer animation real vector Rendering processes Office multithreaded number web
polygons mapping files lines WebDAV maximal browser Arm Emulation van information different CAMS Sum platforms data types font unit mapping coma Computer animation Rendering testing editors box
man mapping Ionic sets coma bits entire category image different testing testing box disk pixel comparison platforms libraries WAN
Computer animation circle Lecture/Conference different server independent Continuous Integration part platforms
current Actions implementation states time decision loss Dogs round level integers Liquid model systems addition standards map Tiled inner Demo graphical user interface Types Computer animation real vector topology buffer Sum
Computer animation
parts of a welcome this 3rd
and last session of today so we we will have 3 coaxed and they all about the environment and the 1st thought will be given by the light emitted by the funding of all of the math books GA these higher 1 so I have 100 slides and put and so of the very quick and from the talk about how all vector math work and rock musician
from Ukraine i.e. where
have about our company that does all the all some cool stuff in mapping like if you see really amazing stuff and I think that's probably what I . years ago I builds library called leaflets which is now the most popular open-source mapping library ever used by like hundreds of thousands of and we broke with with a wonderful community but sometimes dimension again OK so we're not going to a a new area of interactive proving that to now the
curent aging error of all we got the on the web is neural trusted tiles that has like everyone uses security like that everyone but the wetlands and and so
this error was for the last 11 years with the new lumen overlayers influence but now we're
slowly witnessing the coming of the euro vector maps and you can see all
the big players in the mapping is true that's like builds a full mapping platforms work on my vector map rendering technologies are some of them are proprietary wakeful equals the can can see how it is implemented the a new 1 apple in here for example some companies are really nice and also and work fully and openly flight from the mass media what's and some other sites and humans and so on and so now I'm gonna
talk about mammals here and see how it works under the hood and managing is fully open source is platform for both mobile devices and browsers so it works on both the brothers and like in cars you can embed can c . 2 and has cycles and so there is this an open data the so White was with and the 1st and that you're going to see when use are bacteria rather is that it has moves and annotation and
it just feels so much different when you're using that light it's like and his is transitioning so we only will in Europe with the use of mass of the solution that I just any just feels feel so much better to use are than our traditional restaurants so that the person that you can do really
fancy and indigenously would point changing views with this and there's
actually no concept of integers but when you're doing better maps like you can render it any uh of levels and so we have a special file in which where you can find in interrelations values are so you can have 1 holiday the rules along with gets wider as you zoom in Slovenia are another advantage is full control over data representation in real time so
you can change any aspect of the match out at
any time by this is is this is just like artificial example that way you can change
color is seeking change
financial objects rewarded them and would do anything you want with the map like change any any kind
of quite a visual the representation in real-time and white you can animate between values so it and it opens up a whole new class of possibilities for making new interactive experiences with maps which is
really really powerful and not something we could do
before with restaurants where with restaurants will recitalist you would have liked the Bayes-net and so
like stuff on top of that we Call it markers or
waste buttons there is no distinction between all
mapping and better maps like you can change everything
and I think it is only falls off way then include changing the light direction In tearing renderer so that which is which is you have to costly to knowledge despite the spherical
and another big advantage is that any object in manner that you can see can be interactive like you can
make any object doesn't you can make a clickable and horrible with mouse or like if you do any other group on and so you can make like rules interactive buildings Interactive everything on a map can the indirect and
yet this can enable really interesting applications
and so like the previous advantages that he can change everything on the flight the and so yeah you can with this it
can create a visual map editor right here you can
view the press like this we just click himself in practice in real time and this is really a powerful
way to do cartography with Nicosia have isn't that back in like you can design absent and that's it you
should try this 1 could worsen the browser we can do this
with that what's studio and this
island which is really powerful it can do
really differently looking out for and you
can do stop that you couldn't do before like video format so
this is the example of the video from a satellite on all of directly that that you can
drag as and there's a feel
like something you can do before it all the of course you have
perspective and 3 got abilities like popular view
in for interrogation where the maps like utility and of course that there is
pretty dealing the links coming to that but you and will start working on vector in a war on terror rendering to that so another knowledge of vector maps
is that you use this much much less bandwidth that cluster and that's the way this is 1 of the charter it's like when I use a fixed set screen and from 0 assume 0 2 used to the maximum 2 and this is a very light vector tile-based maps old move many times less data than roster tiles you especially italso returned based so
we have 2 there was trees for this job scripts and implementation of many Americans unions and so the new 1 which is mostly written in C + + with students for a i lessons with the objective see when the way it's going with John all those platforms so that these are 2 implementations that will work on in parallel and some
talk about Web jails like how we do it on the browser so we can look at some of the web heels works and how how much how many users are actually like capable of using web the obligations and
so actually when you will be supported so among the vast majority of users weight
1 95 % with USC literally almost like % so freedom much all users can now use web geopolitik locations white so you don't need to worry too much about square leaving people behind that can't use because now is pretty much everywhere so political question arises why Web GL is you not use very often why is is so powerful if you can do really crazy things with that white why isn't it everywhere the underwear
and white and this is the sum of those 2 2 the truth is developing however this suffocation is extremely hot but we have been working on average but over 3 years would be dedicated to him and say we just we're just getting started to like so much more stuff to do it's really really hard who was a common
misconception that open a 3 D API some like some kind of mathematical API that you we define 3 D objects and adjusts renders really fast but in fact open GL is will will level two-dimensional API so basically this is things always open can do is draw
trials so we can
define open GL as a technology for drawing triangles really really fast uh so forth would you know allows you to to write to 2 types of 5 special programs directly from for the graphics processing unit for 1 type of problem is called verdicts tutor and we can write fast enough to transform the vertices of the words and the data like to for example to projected 3 D vertices into a screen industry that just for display and another that programmers fragmentary there it's it's transforms pixel cost like you can do sometimes the calculations you determine what pixel is drawn what color and basically that's it so let's for example look at how
to draw a line to the web year and like you would plot the needs of what is so we're going to light a
let's say do we want to draw a nice analyze their smooth around the edges which is called and a lot of alliance and send to draw a segment of a
line and Web jail because it can't draw once again you will find a simple approach would be to rule 6 finals uh to find rules will be sold the field and so the triangles on the outside would have this small gradient to make the the adjusts movement and to outliers the lectures
will also help and yield basically has a future we can assign a special customer attributes to each of which is to do fencing with and so on in
the end he can go along the same lines with just 2 finals which is 3 times faster weights with a slightly more complicated map behind it but this is just 1 2nd
and if we're talking about polyline but there are 3 weaknesses of 1 view is that he died so flying gaps that we also need to support for like for both cartography and for example to draw our around when doing
news and involve a lot of triangles then so when all
those is much much harder than drawing lines are
because of all the public is holes and always you can only draw triangles very efficiently because so we need to go through all of try and turns out this is a really complicated computational geometry are challenge with the doors of and years of research wouldn't put into it and there's a diagonal really really efficient tolerance for this and so we
compliance and a great triangulation library that's fast enough for a use case on the justice side so I spent so many months of sleepless size uh working like researching papers and so in the end we developed a new library called here and just proved that was really really fast at regulating opponents and then it was so good that was ported to C + + and now we use both libraries earth
yes so that's going on there as well components is really easy convergent index of this just don't exist in C so I all
you can do a lot of texts you're used so like can wait if you use that the cannot the and rather you just say like dual this text and this font and that's is this is wrong it's we're equal and in open GL that we have to render a so called on texture on the server side we will render every a letter uh into image and then move the finals and filled with small bottle texture to draw 1 letter and
said like we need to this textures the bending of 1 what's the areas of the map we we view and what letters we need so we have font server that serves as a special and unique cost intervals and select for example for Latin characters in some points most characters are in the 0 to 255 French there and so you can you only need to the old 1 file to like this we will see the text for a certain point in regular but so for example for a chinese so that of like there are thousands of symbols in nature Chinese off of it so it's really hard but is given what we know is that when we can consider changing the size of the text annotation and Boeing holds because if we just draw with simple font textures and tried to resize the the small but but it gives blurry and when you did it gets blurry to wait not gradients of quality so good guys and about company that brought us Hall flying game and are currently hopefully working of software 3 there is about scientists distance feels is set ecology that is now used everywhere in India regret that it allows you
to concludes a vector uh shape into a picture that looks like this that distance so the uh to the outline image pixel and special algorithm also to edges of this shape and different sizes really Christmas so we used
this technique and our point features like this and so we can get vendor that was really nice to have but
there is another problem is open GL has a limitation of all much how big of texture in a way that 1 thousand to 24 1 and so like if you just start browsing and that was a lot of characters like in China it just fills up and starts to break rendering so we have in
right household that's so is also called contributed to oppose the idea the movement show that library that uh implementing a call our food that's dynamically fills of a texture depending on on what's a letters used index and what it is it was lost and it's working well but but there is another
problem that we haven't even sold yet it's really complex services such as and this is so crazy hard that's yeah it's it's a topic for another a big talking maybe a 1 hour labs so
that the resulting in assessing the data is loaded
in will as Stiles like you would do In restaurant instead of like a also vector the vector data is encoded
in in 1 influence Cole Protocol Buffers is very complex and so we wanted it to be as fast as possible so we moved to libraries that are the fastest particle offers encoders and decoders you who doesn't know what a zero-forcing was and see it makes the data 4 times smaller than energies on you do that and 7 times the of the 2 that even the native just some parts so it's really really fast and we have our own perspective picture tells that that defines how the data is encoded
exactly and this suspect is is overly developed sense of
it has been adopted so what of other companies like as every is not using the technology for beer vector rendering and Madison for 10 grams and then there is a
place and where the label so a problem where you have a lot
of people and you need to please them nicely so that they don't collide is still when his and notice that like they're placed around probably labels and like there is this is a separate really big challenge uh and
this is how it looks like this how we make the latest of polite we cover them with small squares and then will still squares into our room into a spatial index and then of collusion attacks are really fast so the fastest spatial and this just to schools or much are and we also use a special it's cold with its so for a I was yelled at all so as to transfer this index in the form of typed arrays which I'll mention clear then there is
this is an example around 100 something megabytes of data directly in the browser and so some 2nd Ingersoll's and then in Brussels and this is all happening in the roster without sort and and this there is a very cool library behind it do this and
that costs a tiles
and then there's going clustering recent feature that was used for this and we will do what we call support was that that's really fast and can go off away millions of points then you can that
kind of the the heat map with and is
a tricky the of doing all this competition algorithms because you can do do it all the main thread because it will block the rendering and will start soon we can do is you have to do it in a separate France but then you have the problem of chemical communicating between France and you need to turn everything you communicate all the data into arrays of numbers to make this efficient which is a separate
challenge also we have elected to office
fication which is the only hold language that defines how to do the usual filing and so is
used by our editor and you can do very different working
maps with it it's really powerful entity uh we have to make sure that the rendering is the same across all implementations and across all platforms be it I was soaraway qt or anything else for the browsers different browsers
so we have to we have to write a very extensive testing that has a set of images and renders all the every every property of the style that is amended and compared to like the expected outputs and so we
had to write a special library for comparing the screenshots that consider the entire balancing differences into account because different platforms have Brenda things a bit differently and it's really fast in
re-nested with we have we use for different platforms for continuous integration to cover all the platforms we used an
answer question arises with the exercise well I
won't talk about that it yeah so this is
it's and another thing I would like to mention is that to date parts 25 years of independence of Ukraine in the use and drink a lot of beer for a range of of which thank you want but
in the forward from great dog are there any questions I think you're much of this going back to the way that you transmit that he said there are no new methods and Morgan about you and how we transmit vector times but I assume that still you would have to like make a decision what they do transmit so if you pretty father zoomed out you probably won't
transmit the signal building their houses that bond and how they determine that unknown server-side yeah uh so data is still a proper losses for each are integers level and then when after we transferred that if we just interpolate that's like school that transition between levels as visible in but uh the precision we can back into like once a level is enough to display the map on the next level so by the time is usable in in a new titles so you don't have a problem off when a losing precision 1 of the questions so when when things all over the map of at the time how do you handle that so street goes like across from that the times that split up to 4 years split up and we half of buffers around tiles to make sure that it's features so smoothly transition to each other there are no scenes between the 2 you mentioned a model of the problems you need to solve with with members of your you on likely replacements and also the sum of Orioles perceived participating in liquid standards to improve things to make with your better to like handle font better I know there is development and red to the system well unfortunately I only have 24 hours in a day and 2 kids and working on standards is extremely hard I'm just not there type of person that would work on the sentence it's just now what's a general yeah there is seen as a fool basically invented with a few other people duties inspect the sky and the others pushing on centers but here we're we're focused on cutting edge implementations and centers like there is the current state of affairs is that standard fall implementations rather than the other way around like some like Chrome implements a local features and then others say all this should be a assigned and that this is how it happens so rather than the other way round so that it can be the weight so that it can progress to quickly 1 last question I have have you in the face with things that are inherently roster you should some examples we had in the tree and idiom things underneath the onset handled within what we will analogy yield can handle roster tiles as well and so video and it's like yeah we can just hold it displays a skilled in addition to the interest OK thank you once again each each