How WebGL vector maps work

Video thumbnail (Frame 0) Video thumbnail (Frame 1322) Video thumbnail (Frame 2341) Video thumbnail (Frame 2956) Video thumbnail (Frame 3904) Video thumbnail (Frame 4932) Video thumbnail (Frame 5462) Video thumbnail (Frame 6435) Video thumbnail (Frame 7280) Video thumbnail (Frame 7876) Video thumbnail (Frame 8503) Video thumbnail (Frame 9157) Video thumbnail (Frame 9807) Video thumbnail (Frame 10340) Video thumbnail (Frame 10887) Video thumbnail (Frame 11538) Video thumbnail (Frame 12421) Video thumbnail (Frame 13048) Video thumbnail (Frame 13640) Video thumbnail (Frame 14641) Video thumbnail (Frame 15326) Video thumbnail (Frame 15895) Video thumbnail (Frame 17177) Video thumbnail (Frame 17835) Video thumbnail (Frame 18402) Video thumbnail (Frame 19181) Video thumbnail (Frame 19924) Video thumbnail (Frame 20633) Video thumbnail (Frame 21537) Video thumbnail (Frame 22702) Video thumbnail (Frame 24967) Video thumbnail (Frame 25540) Video thumbnail (Frame 26502) Video thumbnail (Frame 27096) Video thumbnail (Frame 27660) Video thumbnail (Frame 28974) Video thumbnail (Frame 29540) Video thumbnail (Frame 31009) Video thumbnail (Frame 31562) Video thumbnail (Frame 32116) Video thumbnail (Frame 32768) Video thumbnail (Frame 33530) Video thumbnail (Frame 34294) Video thumbnail (Frame 35217) Video thumbnail (Frame 35942) Video thumbnail (Frame 40342)
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 Integrated development environment Vector space Witt algebra Vector space Cuboid Mereology Optical disc drive
Computer animation Open source Meeting/Interview Interactive television Optical disc drive Dimensional analysis Library (computing)
Overlay-Netz World Wide Web Consortium Computer animation Raster graphics Tesselation Information security Error message Open set
Decision tree learning Computer animation Vector space Mapping Hypermedia Website Mass Cuboid Optical disc drive Computing platform
Mobile Web Fibonacci number Open source Mobile Web Web browser Mass Hand fan Rotation Emulation Data management Computer animation Computer worm Cycle (graph theory) Summierbarkeit Family Form (programming) Computing platform
Presentation of a group Game controller Computer file Mapping Structural load Real number View (database) Electronic program guide Thermal expansion Menu (computing) Real-time operating system Data storage device Bound state Plane (geometry) Number Computer animation Representation (politics) Integer Summierbarkeit
Execution unit Mapping Multiplication sign Interactive television Coma Berenices Graph coloring Mathematics Algebra Computer animation Object (grammar) Cuboid 5 (number) Social class
Metropolitan area network Execution unit Fibonacci number Computer animation Mapping Knot Cuboid 5 (number)
CAN bus Computer animation 4 (number) Object (grammar) Direction (geometry) Interactive television Object (grammar)
Rule of inference Building Sine Interactive television Cartesian coordinate system Rule of inference Similarity (geometry) Tablet computer Computer animation Row (database) Physical law Object (grammar) Summierbarkeit Conditional-access module
Computer animation Visualization (computer graphics) Estimation Text editor Real-time operating system Text editor
Computer animation 4 (number) Coma Berenices Web browser 8 (number) Storage area network
Satellite Computer animation 4 (number) Meeting/Interview Videoconferencing Videoconferencing Cuboid Addressing mode Storage area network
Computer animation Mapping Vector space Link (knot theory) View (database) 4 (number) Meeting/Interview View (database) Utility software Perspective (visual) Perspective (visual)
Scripting language Implementation Electronic data interchange Touchscreen Mapping Tesselation Multiplication sign Android (robot) Set (mathematics) Parallel port Coma Berenices Maxima and minima Student's t-test Band matrix Process (computing) Computer animation Vector space Band matrix Network topology Vector space Cuboid Summierbarkeit
Web 2.0 World Wide Web Consortium Computer animation Computer hardware Weight Cloud computing Web browser Summierbarkeit Emulation
Web 2.0 World Wide Web Consortium Uniform resource locator Computer animation Computing platform Summierbarkeit
Mathematics Computer animation Volumenvisualisierung Object (grammar) Open set Open set
World Wide Web Consortium Pixel Touchscreen Line (geometry) Execution unit Coma Berenices Line (geometry) Graph coloring Computer programming Type theory Programmer (hardware) Word Computer animation Calculation Shader <Informatik> Triangle Electronic visual display Vertical direction Vertex (graph theory) Singuläres Integral
Web 2.0 Computer animation Aliasing Gradient Triangle Line (geometry) Rule of inference Arm Triangle
Computer animation Weight Multiplication sign Attribute grammar Line (geometry) Triangle
Rounding Polygon Raw image format Computer animation Intrusion detection system View (database) Triangle Line (geometry) Vulnerability (computing)
Triangulation (psychology) Computer animation Dedekind cut Personal digital assistant Triangle Coma Berenices Computational geometry Dreiecksnetz Cuboid Library (computing)
Subject indexing Medical imaging Server (computing) Texture mapping Computer animation Texture mapping Connectivity (graph theory) Computer font Surjective function
Point (geometry) Server (computing) Pixel Fibonacci number Computer file Latin square Shape (magazine) Regular graph Distance Computer font Rotation Medical imaging Goodness of fit Regular graph Natural number Different (Kate Ryan album) Selectivity (electronic) Area Execution unit Algorithm Texture mapping Uniqueness quantification Gradient Symbol table Distance Computer animation Software Vector space Game theory Cuboid
Point (geometry) Metropolitan area network Texture mapping Computer animation 3 (number) Limit (category theory) Library (computing) Emulation
Mobile app Subject indexing Texture mapping Computer animation Oval Cuboid System call Library (computing) Scalable Coherent Interface
Multiplication sign Mereology Perspective (visual) Food energy Emulation Buffer solution Vector space Process (computing) Codierung <Programmierung> Communications protocol Implementation Message passing Maß <Mathematik> Default (computer science) Multiplication sign Metropolitan area network Parsing Data dictionary Decimal Coma Berenices Mereology Particle system Number Computer animation Vector space String (computer science) Buffer solution Revision control Key (cryptography) Cuboid Communications protocol Library (computing)
Data dictionary Coma Berenices Mereology Number Computer animation Vector space String (computer science) Vector space Revision control Key (cryptography) Maize Cuboid Implementation Message passing Maß <Mathematik> Default (computer science)
Twin prime Coma Berenices Price index Emulation Subject indexing Array data structure Computer animation Square number Collision Gamma function Cuboid Square number Form (programming)
Dynamical system Tablet computer Computer animation 3 (number) Maxima and minima Physical law Quicksort Cuboid Library (computing)
Point (geometry) Metropolitan area network Drag (physics) Tesselation Programmable read-only memory Menu (computing) Special unitary group Supercomputer Computer animation Computer cluster Cuboid Simulation Wide area network
Array data structure Algorithm Thread (computing) Computer animation Vector space Artistic rendering Process (computing) Office suite Thread (computing) Number World Wide Web Consortium
Polygon Computer font Execution unit Computer file Mapping Line (geometry) WebDAV Maxima and minima Coma Berenices Web browser Arm Emulation Value-added network Formal language Computer animation Different (Kate Ryan album) Artistic rendering Software testing Text editor Cuboid Conditional-access module Summierbarkeit Computing platform Data type
Metropolitan area network Chemical equation Set (mathematics) Coma Berenices Bit Entire function Category of being Medical imaging Different (Kate Ryan album) Software testing Software testing Cuboid MiniDisc Pixel Pairwise comparison Computing platform Library (computing) Wide area network
Computer animation Circle Lecture/Conference Different (Kate Ryan album) Server (computing) Independence (probability theory) Continuous integration Mereology Computing platform
Ocean current Implementation Group action State of matter Decision theory Multiplication sign Insertion loss Coefficient of determination Roundness (object) Energy level Liquid Integer Endliche Modelltheorie Physical system Addition Standard deviation Tesselation Interior (topology) Demoscene Graphical user interface Type theory Computer animation Vector space Network topology Buffer solution Summierbarkeit
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