OpenLayers 3: a unique mapping library

Video in TIB AV-Portal: OpenLayers 3: a unique mapping library

Formal Metadata

OpenLayers 3: a unique mapping library
Title of Series
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
Open Source Geospatial Foundation (OSGeo)
Production Year
Production Place
Portland, Oregon, United States of America

Content Metadata

Subject Area
We've rewritten OpenLayers from the ground up with the goal of offering a powerful, high-performance library leveraging the latest in web technologies. This talk will present the latest advances of the library, focusing on aspects that make OpenLayers 3 stand out. OpenLayers 3, for example, uses technologies, techniques and algorithms that enable high-quality and high-performance vector rendering. Come learn about the optimizations and techniques OpenLayers 3 uses internally, and how you can leverage them in your next web-mapping applications.
Keywords web-mapping OpenLayers JavaScript HTML5
Revision control Collaborationism Uniform resource locator Group action Computer animation Demo (music) Control flow Right angle Open set Library (computing)
Mapping Tesselation Polygon Line (geometry) Open set Uniform resource locator Coefficient of determination Vector space Different (Kate Ryan album) Artistic rendering Green's function Software framework Library (computing)
Point (geometry) Group action Pixel Computer file Zoom lens Source code Materialization (paranormal) Open set Function (mathematics) Mereology Fraktalgeometrie Number Medical imaging Goodness of fit Bit rate Software cracking Algorithm Stapeldatei Touchscreen Mapping Polygon Interactive television Line (geometry) System call Demoscene Frame problem Category of being Radius Process (computing) Geometric quantization Computer animation Vector space Personal digital assistant Calculation Vertex (graph theory) Object (grammar) Figurate number Library (computing) Geometry
Group action Pixel Perfect group State of matter View (database) Function (mathematics) Web browser Open set Perspective (visual) Element (mathematics) Web 2.0 Medical imaging Prototype Mechanism design Touch typing Contrast (vision) Area Stapeldatei Touchscreen Mapping Projective plane Electronic mailing list Sound effect Line (geometry) Limit (category theory) Uniform resource locator Word Film editing Computer animation Vector space Artistic rendering output Geometry
Point (geometry) Building Implementation Multiplication sign Zoom lens Source code Web browser Client (computing) Mereology Perspective (visual) Revision control Avatar (2009 film) Goodness of fit Mathematics Internetworking Energy level Extension (kinesiology) Position operator Electric generator Mapping Key (cryptography) Tesselation Moment (mathematics) Gradient Data storage device Electronic mailing list Limit (category theory) Frame problem 10 (number) Data management Arithmetic mean Computer animation Vector space Artistic rendering Vertex (graph theory) File viewer Right angle Resultant Geometry
thank you for attending at the start uh my name is Eric and the 1 I work for him to camp i which is a company located in Switzerland and France and from from France so from from the French the soft and attempt so today I'm going to talk about the opening 3 library which is the new version of OpenNI URLs and I want to to explain war on what makes it unique so this is going to be the subject of this of this talk 1st of all I would like to mention that we really we have really is uh the final version of 3 is now really is the right was to 2 weeks ago I think it's of it's a major thing for for the library and and the project in in general with been working on of the US the 3 for 2 years so it was funded by a collaborative group of companies so it's really great to to out and now that the so in this talk i'm going to 2 presented by some of the techniques that we use in internally in the library and what makes this a library unique I'm not going to talk about the P all the way you use OpenNI arose so if you want to know more about the API and how to use it in general are you can go to teams and and S is that taught which is at 3 o'clock in in this room after the break think so I'm going to start with um with an example of and demo because of this is a typical open
else and company as map and this map we have we have 3 we used 3 different renderer rendering technologies in the library I we used the dog we use can us and we use which here and this map here is rendered with canvas which is currently all main rendering technology so in this in this map they out to layers URLs but there is a background layer which is a tile layer and it's actually a being maps are linear and on top of it there is a vector layer but what's in the vector layer is now you can see these as labels and white and black I would with the name of the countries but you can't there is a there is a marker and a green marker on John might tell so this is also in the rendered as a vector and the vector layer and you can also see the the boundaries of of the country's the blue lines and those are actually polygons and what I want to show you I 1 Future of open minerals and it that you can rotate the map so I can rotate the map and left and right here and as you can see what's interesting to note here is that the labels and the marker owes us today are izontal they don't they don't rotate with the map so this is an optional behavior of but that's something you can you can do with the open areas and that the thing I want to another feature I want to to show is that I can animate that demand so we have this animation framework of so you can use the animation and you can add map in many different ways so here what I'm doing is a flight to animation from John might have to Guatemala and again but what's interesting to note is that as i and he made a maps there is no stretching of the lines of the labels stay at the same step size during the the animations and the same for the market so the
question now is how do we do that how can we how do we do to to not to stretch and the lines not to stretch the labels during the and assume animation so what we do is we draw very often and vector
layers all drawn very very very often so this is to be able to get good rendering quality good image quality so we basically we we render the vector roles at each frame of the animation and during animation and interaction so I each frame means at each step of the animation we redraw the entire scene and to be able to get smooth animations on it is known that you you need to redraw between 30 I frames from between 30 and 60 frames per 2nd so the and this means redrawing by vector roles and this rate to be able to get good rendering quality and good performance so we have really haven't but performance challenge here because we want to redraw very often and at 60 frames per cent so now and this is the goal of my talk i'm going to we're going to look at the techniques that we use in the library to be able to achieve that so the 1st technique we use our technique number 1 is batching so we try to minimize the that of processing and manipulation in the library so while interacting and while animating the map that we want to reuse as can we don't to reuse the data as much as possible instead of calculating the likelihood of so we catch and batch and style of the calculations of the style the geometry simplification the artery lookups that we need to get the features out of the source and the creation of objects in in general so we create a batch file with all of the data we need and then we can reuse and replace that batch as needed and actually what we do is we replace the same batch when animating and interacting with the map so that's the 1st technique we use another thing we do is geometry simplification so you already know about that probably but what we do here is before entering before drawing we simplify the geometries so what we draw is only a simplified geometries so we used the do blast radius of the blast poker algorithm for lines and we use some quantization algorithm for for polygons and this is to be able to maintain the relationship between between uh adjustment geometries and another thing that we use a lot is what I call oversimplification so if you have a very complex and a very complex geometry and if that geometry spans more than your viewports and so in that case we can oversimplified as shown in this figure we can oversimplify the parts of the geometry that are outside and a few ports so in this example here I have a complex unitary that everything that is outside the viewports is drawn as a very simple and geometry and we do that also to be able to maintain the topology of of the geometry so I'm going to show you an example of this so this is a fracture cracks and so right now the fractal as 3 thousand points I can increase that's outside the other way so this is a fractal with 13 points and I can increase that yeah I'm going to increase it to about 8 under thousands thousand points and as you can see I can still interact with the map without any problems and this is because we simplify the geometry so we don't draw as many points we don't grow 8 thousand 800 thousand points in that case if a zoom the map now I see as a zoom the map I see more and more details on of the geometry but now now the oversimplification algorithm that triggers because everything that's outside but the viewports is simplified a lot with just a few vertices so in this example you can see you can see both techniques in in action and
another thing that is rather unique is the way we we render vector calls but we don't have an intermediate can last for fractals are which means that vector geometries are drawn directly to the output canvas which is the canvas you see on the screen which means that we only pay for the pixel we draw we and that we can avoid composing transparent pixels also the good consequence of that and a good property of that is that with open AOL's vector materials of very very cheap so you can have hundreds of vector and there is no parallel your customers basically so that was the performance techniques that we use now I'd like to talk about another 1 technique another feature is feature hit detection how do we detect a feature on the map so I'm going to start with an example so this is a map again with a
background layer and on top of it there's a Tamil can area can maybe is amended and as I move the mouse but I can detect that the future URLs and yeah I display very simple very simple pop up with the name with the name of the future so as as you can see this is very this works very well this is very precise our groups and very very fast Ch
so how does it work on so the 1 thing to know 1st is that 10 of us itself does not natively natively support it detection there is nothing with can you just draw pixels and and that's it you cannot know with as as the G you can register list now this nose on your elements but this is not the same with can canvas so that a technique we use here is that so we have this batch of features as they explained before and we so that's all seen that with all the features we we have on the screen so we re draw all the on tyrosine into 1 by 1 pixel at canvas and then we test if there is a cargo so we draw feature-by-feature and for each feature we tested there is a course and if there is a cut up there is it hits so the advantages of that's a mechanism is that we can also detect features that are and that up on and all those of the future so we can detect everything so it's the pixel perfect because we render at every feature of the same way out render in the output can us and we don't we don't support that said that later we can introduce a tolerance so we can we were able to detect a line that out 1 pixel thing so we can detect them easily and which is so important and touch devices for example so so now I'd like to talk about web Jia so as I said there are 3 renderers in other nails done canvas which is the 1 that I talked about before and there is also a g so a few words about web geo so which is now everywhere and we talked about about it more and more of and it used to be absent from IOS and it will be in IUI states which as I think is just around the corner into come out in 2 weeks or something so which means that where is supported by every major or browser now and the important thing about where L is that it allows allow us to do things that are not otherwise possible so so and and going to talk about the current status of these web Jia renderer in opening of 3 so right now it's a bit limited because we only support we only have support for Tyler and image layers but not fall for vehicles are you can to some basic image effects I like changing the you saturation contrast this is already supported but that on that it supported but this is the main thing and we want to to work on the so these other perspectives for the project and we want to we want to push web GL other web Jira narrow for what we want to work on it and the church of that's our main main things so we want to add a vector support to its and we also want to do to be able to do that it didn't perspective that views they and to conclude this talk and to to finish I'm going to show you an example of this tilting tittered a perspective view so this is just a prototype right now but this is to show you that this is something we're taking seriously and we are currently working on so this is again a regular map
with a b being maps and I can I can tilt add to the map whatsoever perspective you in which later would allow us to to view things in 3 D is so for example if a have a building will be able to start to see the building in 3 D so that's we have in mind for for the future of the opponents the mission of my presentation and thank any questions this part of the I am I
was wondering I noticed you head labels place dynamically on features of earlier in your talking and I was wondering if the positioning of those labels are those of pre generators that figured out on the fly based off of centuries of the appalling yeah it's based on the on the internet an internal point of the geometry dynamically chat so you you mentioned the vectors gets simplified so they get simplified on every extend change then or we can the thing so each time we I would say every time you every time you zoom are recalculated but not during the zoom animations so we use the same the geometry is simplified geometry while animating but at the end of the animation then we recently recently fight I don't think eventually start getting worried about the size of that of that simplifying for it is is it gonna make it slow a simplification you the if it's happening on every extension it's not happening on the brakes change 1st of all and that we try to make it fast for you so you shouldn't have seriously you shouldn't have to worry about it if if it doesn't work then we have a problem on our side and it's it's it's you know if you don't have to go to care about it I mean you just provided geometries and this simplification is done for you just before entering but the geometry in the source stated is is not simplified it's only for the rendering end how many lectures vertices the can I the perform so currently I think we I can say that we support and and tens of thousands points vertices something like that i with the Canada Centre you so we don't we don't there we denote Support vector but we have met prototype and with 1 million points no problem but once once the data is in the GPU euro and your safe for OK and related question uh so we being chemists render manage thousands of points right yes alright than about make is getting the data down to client right so for for a moment and obliged to we use like we 2 layers on the spot where much features and then we go for the viewer must layers of meaning this and a lot of pictures so nothing to my keys Our after you have to be really close alright so for a moment we use WMS layers when there's a lot of pictures in a place to point that x and so I think the question we will foster care is on a quiz now I have to do you think that we could stop doing that and yes always use but not always that's that that's so where is that great point that mean in if we we if we don't care about getting the data don't client where's the brick and also it is when we use it works with thousands of features in chemists is that in a store as well guessing browsers yet but I think if you use i.e. if user a recent recent versions of IE I 10 and I 11 minutes OK they have a very good candidates implementation and it's improving the as we speak here the time frame for a better layers of Yale so we're going to work on it and next month but but only for points for now so we're going to an of it A . vector where G . implementation by the end of this year the this will come there to and 11 at time frame for for the rest but we are very interested in pushing that for the this it sounds like I wanna limitations on the vector data now will be just uploading it to the client I to that and I imagine that tiles will continue the use and to get interactive even the matched map tiles I'm wondering when you great support we ought and I don't know but in the this is on our list we want to support UT of grade in the future and that currently there is no 1 working on it but we're obviously interested in having support for you to the grid and a future but I can't say when this would come right now the so an example you showed earlier with the vectors of was that using more just WFS vectors there was that using vector tiles similar to what level right now know this wasn't in in the examples a show this was not the avatar ties and just so I think this was 1 example was came just to the determine fired of command and the other 1 was she watches and the result would be would it support some we already have support for displaying a vector Victor tides and we have an example showing showing this on but this is something we still need to work on and if you put it into